EasyUI DataGrid使用示例

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUIDemo.aspx.cs" Inherits="C_EasyUIDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>EasyUI DataGrid示例</title>

    <!--easyui-->

    <link rel="stylesheet" type="text/css" href="../JS/jquery-easyui-1.5/themes/default/easyui.css" />

    <link rel="stylesheet" type="text/css" href="../JS/jquery-easyui-1.5/themes/icon.css" />

    <script type="text/javascript" src="../JS/jquery-easyui-1.5/jquery.min.js"></script>

    <script type="text/javascript" src="../JS/jquery-easyui-1.5/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="../js/common.js"></script>

    <script type="text/javascript">

        $(function () {

            var IsCheckFlag = true;

            $("#tt").datagrid({

                title: "数据分页",

                url: "easyuihandler.ashx?method=query",

                width: "100%",

                height: "628px",

                striped: true,     //交替行换色

                rownumbers: true,  //行号

                pagination: true,  //显示底部分页

                fitColumns: true,//自动适应。先给列随便加个宽度

                toolbar: "#tb",

                checkOnSelect: false, //true，当用户点击行的时候该复选框就会被选中或取消选中。

                selectOnCheck: true, //true，单击复选框将永远选择行。

                onClickRow: function (index, row) {

                    var d_id = row["d_id"];

                    //alert(d_id);

                },

                onClickCell: function (rowIndex, field, value) {

                    //alert(value);

                    IsCheckFlag = false;

                },

                onSelect: function (rowIndex, rowData) {

                    if (!IsCheckFlag) {

                        IsCheckFlag = true;

                        $("#tt").datagrid("unselectRow", rowIndex);

                    }

                },

                onUnselect: function (rowIndex, rowData) {

                    if (!IsCheckFlag) {

                        IsCheckFlag = true;

                        $("#tt").datagrid("selectRow", rowIndex);

                    }

                }

            });

            var p = $('#tt').datagrid('getPager');

            $(p).pagination({

                /*

                    页数文本框前显示的汉字 修改每页默认条数

                    搜索pageList在jquery.easyui.min.js中修改，

                    分页区下拉分页数量集合和默认每页分页条数

                    striped属性 交替行换色

                */

                beforePageText: '第',

                afterPageText: '页    共 {pages} 页',

                displayMsg: '当前显示 {from}-{to} 条记录,共 {total} 条记录'

            });

        });

        //搜索

        function doSearch() {

            $('#tt').datagrid('load', {

                dname: $('#d_name').val(),

                delse: $('#d_else').val()

            });

        };

        //导出

        function doExport() {

            var models = [];

            var rows = $('#tt').datagrid('getChecked');

            for (var i = 0; i < rows.length; i++) {

                models.push(rows[i].d_id);

            }

            alert(models.join(','));

        }

        //新增

        function doAdd() {

            alert("新增");

        }

        //格式化列数据

        function formatPrice(val, row, index) {

            if (row.d_amount < 1010) {

                return '<span style="color:red;">' + val + '</span>';

            } else {

                return val;

            }

        }

        //自定义操作列

        function formatOper(val, row, index) {

            var str = "";

            str += '<a href="javascript:void(0);" onclick="doEdit(' + row.d_id + ')">修改</a>';

            str += '  ';

            str += '<a href="javascript:void(0);" onclick="doDelete(' + row.d_id + ')">删除</a>';

            return str;

        }

        //编辑

        function doEdit(id) {

            alert(id);

        }

        //删除

        function doDelete(id) {

            alert(id);

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <table id="tt">

                <thead>

                    <tr>

                        <th field="ck" width="100" align="center" checkbox="true"></th>

                        <th field="d_id" width="100" align="center">编号</th>

                        <th field="d_name" width="100" align="center" sortable="true">用户名</th>

                        <th field="d_password" width="100" align="center" sortable="true">用户密码</th>

                        <th field="d_else" width="100" align="center" sortable="true">备注信息</th>

                        <th field="d_amount" width="100" align="center" sortable="true" formatter="formatPrice">账户余额</th>

                        <th field="_operate" width="100" align="center" formatter="formatOper">操作</th>

                    </tr>

                </thead>

            </table>

        </div>

        <!--查询区域-->

        <div id="tb" style="padding: 3px">

            <span>用户名:</span>

            <input id="d_name" style="line-height: 26px; border: 1px solid #ccc" />

            <span>备注信息:</span>

            <input id="d_else" style="line-height: 26px; border: 1px solid #ccc" />

            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="doSearch()">查询</a> 

            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="doAdd()">新增</a> 

            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="doExport()">批量删除</a> 

            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-export'" onclick="doExport()">导出选中</a>

        </div>

    </form>

</body>

</html>

<%@ WebHandler Language="C#" Class="EasyUIHandler" %>

using System;

using System.Web;

using System.Collections.Generic;

using Newtonsoft.Json;

using Newtonsoft.Json.Linq;

using System.Data;

using System.Data.SqlClient;

public class EasyUIHandler : IHttpHandler {

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        int pageIndex = MSCL.RequestHelper.GetInt("page", 0);  //当前页码

        int pageSize = MSCL.RequestHelper.GetInt("rows", 0);  //每页显示记录数

        string method = MSCL.RequestHelper.GetString("method");//前台传的标示值 

        string JsonStr = string.Empty;

        try

        {

            switch (method)

            {

                //查询数据

                case "query":

                    string dname = MSCL.RequestHelper.GetString("dname");

                    string delse = MSCL.RequestHelper.GetString("delse");

                    string sort = MSCL.RequestHelper.GetString("sort"); //排序字段名。

                    string order = MSCL.RequestHelper.GetString("order"); //排序方式

                    string where = string.Empty;

                    where += string.IsNullOrWhiteSpace(dname) ? "" : " And d_name like '%" + dname + "%' ";

                    where += string.IsNullOrWhiteSpace(delse) ? "" : " And d_else like '%" + delse + "%' ";

                    JsonStr = QueryData(pageIndex, pageSize, where, sort, order);

                    break;

                default:

                    break;

            }

        }

        catch (Exception ex)

        {

            throw;

        }

        context.Response.Write(JsonStr);

        context.Response.End();

    }

    #region

    /// <summary>

    /// 查询数据

    /// </summary>

    /// <param name="pageIndex">当前页码</param>

    /// <param name="pageSize">每页记录数</param>

    /// <param name="where">查询条件</param>

    /// <param name="orderField">排序字段</param>

    /// <param name="order">排序方式 asc或desc</param>

    /// <returns></returns>

    protected string QueryData(int pageIndex, int pageSize, string where,string orderField,string order)

    {

        int totalRecord = 0;

        int TotalPage = 0;

        string orderStr = string.IsNullOrWhiteSpace(orderField) ? "d_id asc" : string.Format("{0} {1}", orderField, order);

        DataTable dt = MSCL.PagingHelper.QueryPagingMssql("TestTable", "*", orderStr, pageIndex, pageSize, where, out totalRecord, out TotalPage);

        PageData data = new PageData();

        data.total = totalRecord;

        List<JObject> list = new List<JObject>();

        foreach (DataRow item in dt.Rows)

        {

            JObject obj = new JObject();

            obj.Add("d_id", item["d_id"].ToString());

            obj.Add("d_name", item["d_name"].ToString());

            obj.Add("d_password", item["d_password"].ToString());

            obj.Add("d_else", item["d_else"].ToString());

            obj.Add("d_amount", item["d_amount"].ToString());

            list.Add(obj);

        }

        data.rows = list;

        return JsonConvert.SerializeObject(data);

    }

    #endregion

    public bool IsReusable {

        get {

            return false;

        }

    }

    public class PageData

    {

        public int total;

        public List<JObject> rows;

    }

}

$('#ddlFather').combotree('loadData',@Html.Raw(ViewBag.Level));

$("#ddlFather").combotree('setValue','@ViewBag.FatherId');//默认选中

var t = $('#ddlFather').combotree('tree'); // 得到树对象

var a = t.tree('getSelected').id;  //取值

var b = t.tree('getSelected').text;  //取值

$('#ddlRole').combobox({

	data: @Html.Raw(ViewBag.RoleData),

	valueField:'GroupID',

	textField:'GroupName',

	onChange : function(){

		var value = $(this).combobox('getValue');

		$("#roleId").val(value);

		//console.log(value);

		$.ajax({

			url: '@Url.Action("GetRole", "Home")',

			data: {"roleId": value },

			type: 'GET',

			timeout: 1000,

			cache: false,

			success: function(data){

				setCheckbox(data)

			}

		})

	}

});

var a = $("#ddlRole").combobox('getValue'); //取值

var a = $("#ddlRole").combobox('getText'); //取文字

$("#resourcelist").treegrid({

	title: "权限分配",

	url: '@Url.Action("GetResourceTree", "Home")',

	idField: 'moduleid',

	treeField: 'module_name',

	//rownumbers: true, //行号

	toolbar: '#tb',

	fitColumns: true,//自动适应。先给列随便加个宽度

	border: false

});

<table id="resourcelist">

	<thead>

		<tr>

			<th data-options="field:'moduleid',width:40">资源编号</th>

			<th data-options="field:'module_name',width:150">资源名称</th>

			<th data-options="field:'actions',width:200,formatter:formatOpAction">操作</th>

		</tr>

	</thead>

</table>

<input id="ddlRole" class="easyui-combobox" style="width:200px" />

EasyUI DataGrid使用示例的更多相关文章

实现easyui datagrid在没有数据时显示相关提示内容
本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示本实例要实现如下图所示的效果: 本示例easyui版本为1 ...
Jquery easyui datagrid 导出Excel
From:http://www.cnblogs.com/weiqt/articles/4022399.html datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <sc ...
对easyui datagrid组件的一个小改进
#对easyui datagrid组件的一个小改进 ##问题在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...
easyui datagrid单击单元格选择此列
示例代码实现单击jquery easyui datagrid的单元格时,取消datagrid默认选中高亮此行的样式,改为选中单击的单元格所在的列,高亮此列上的所有单元格.可以配置全局single变量, ...
（转）easyui datagrid 部分参数说明
easyui datagrid 部分参数数据表格属性(DataGrid Properties) 属性继承控制面板,以下是数据表格独有的属性. 名称类型描述默认值 columns array 数 ...
DataTables VS EasyUI DataGrid 基础应用转
DataTables中文网推出了第一篇关于DataTables和其他表格插件比较后,为了把让这个比较更有意义,更能帮助到大家,DataTables中文网做了问卷调查,根据小伙伴们的填写我归纳了一 ...
easyui datagrid 禁止选中行 EF的增删改查（转载） C# 获取用户IP地址（转载） MVC EF 执行SQL语句（转载）在EF中执行SQL语句（转载） EF中使用SQL语句或存储过程 .net MVC使用Session验证用户登录 PowerDesigner 参照完整性约束(转载)
easyui datagrid 禁止选中行没有找到可以直接禁止的属性,但是找到两个间接禁止的方式. 方式一: //onClickRow: function (rowIndex, rowData) ...
JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（8）-MVC与EasyUI DataGrid 分页
系列目录前言为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台实 ...

随机推荐

【C++小白成长撸】--N阶幻方（魔阵）矩阵
解决方法:1.第一个元素放在第一行中间一列 2.下一个元素存放在当前元素的上一行.下一列. 3.如果上一行.下一列已经有内容,则下一个元素的存放位置为当前列的下一行. 在找上一行.下一行或者下一列的时 ...
JSP小记
0.配置servlet的模板 1.找Jar文件:\Common\plugins (myeclipse.ini文件中查看) * com.genuitec.eclipse.wizards*.jar 2.找 ...
Squid代理服务器安装
代理服务器的功能是代替网络用户去访问网络信息,并把获得的信息返回给用户,其工作步骤大致如下: ) 客户机向代理服务器发起访问互联网的请求 ) 代理服务器收到请求后检查请求是否被允许,如果允许将会进行下 ...
201521123028 《Java程序设计》第8周学习总结
1. 本周学习总结 2. 书面作业 Q1.List中指定元素的删除(题目4-1) 1.1 实验总结 Ans: 在这一题中我们需要写两个函数,分别是remove()和convertStringToLis ...
201521123019 《Java程序设计》第7周学习总结
1. 本章学习总结 2. 书面作业 Q1.ArrayList代码分析 1.1解释ArrayList的contains源代码源代码如下: public boolean contains(Object ...
201521123073 《Java程序设计》第7周学习总结
1. 本周学习总结以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码源代码: ...
201521123113 《Java程序设计》第1周学习总结
1. 本章学习总结 1.java是一个面向对象的编程语言,相对于c++来说代码较简便又好用.第一次接触java时感觉每句代码比较难写,但学习了一些快捷方法后就很方便了. 2.java运行于JVM,因此 ...
学习目标或者作业的制定(SMART原则)
以下文字摘自邹欣老师的博客很高兴看到学生们都写了自己的目标: http://www.cnblogs.com/deng201421123059/p/6435346.html 不得不说,有些同学的目标太 ...
201521123044 《Java程序设计》第14周学习总结
1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 友情提示:导图用ctrl+鼠标滚轮放大看更清楚些 2. 书面作业 1. MySQL数据库基本操作建立数据库, ...
201521123019 《Java程序设计》第10周学习总结
1. 本周学习总结 2. 书面作业本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 只有执 ...

EasyUI DataGrid使用示例

EasyUI DataGrid使用示例的更多相关文章

随机推荐

热门专题