easyui中datagrid的使用

1.自定义id

$('#table').datagrid({
...
     idField :'myId',
...

});

2.返回的josn格式要如下：

{"total":20,"rows":[
{"check":"no","myId":"1","name":"admin01","pass":"123456","time":"2017-10-10","part":"研发部","title":"普通管理员","sex":"男","opr":"1"},
  {"check":"no","myId":"2","name":"admin02","pass":"123456","time":"2017-10-11","part":"研发部","title":"普通管理员","sex":"男"},
  {"check":"no","myId":"3","name":"admin03","pass":"123456","time":"2017-10-13","part":"研发部","title":"普通管理员","sex":"男"},
  {"check":"no","myId":"4","name":"admin04","pass":"123456","time":"2017-10-13","part":"研发部","title":"普通管理员","sex":"男"},
  {"check":"no","myId":"5","name":"admin05","pass":"123456","time":"2017-10-13","part":"研发部","title":"普通管理员","sex":"男"},
  {"check":"no","myId":"6","name":"admin","pass":"123456","time":"2017-10-13","part":"研发部","title":"普通管理员","sex":"男"},
  {"check":"no","myId":"7","name":"admin","pass":"123456","time":"2017-10-13","part":"研发部","title":"普通管理员","sex":"男"},
  {"check":"no","myId":"8","name":"admin","pass":"123456","time":"2017-10-13","part":"研发部","title":"普通管理员","sex":"女"},
  {"check":"no","myId":"9","name":"admin","pass":"123456","time":"2017-10-13","part":"研发部","title":"普通管理员","sex":"男"}

]}

3.列表字段的定义如下：

$('#table').datagrid({
...
   //列表字段
    columns:[[
        {
            checkbox:true,
            field:'no',
            width:100,
            align:'center'
        },
        {
            field:'myId',
            title:'编号',
            width:100,
            align:'center'



        }
  ]]
});

4.操作列的定义及其事件的定义如下：

$('#table').datagrid({

[[ 
...
 {
            field:"opr",
            title:'操作',
            width:100,
            align:'center',
            formatter:function (val,row) {
                e = '<a  id="add" data-id="98" class=" operA"  onclick="obj.edit(\'' + row.myId + '\')">编辑信息</a> ';
                d = '<a  id="add" data-id="98" class=" operA01"  onclick="obj.delOne(\'' + row.myId + '\')">删除信息</a> ';
                return e+d;

            }

        }
]]
}
);

5.easyui发起ajax请求

前端代码：

 <script type="text/javascript">
        $(function () {
            initTable();
        });
        function initTable(queryData) {
        $('#test').datagrid({
            url: '/Role/GetAllRoleInfos',
            title: '角色的设置',
            iconCls: 'icon-save',
            height: 368,
            nowrap: true,
            autoRowHeight: false,
            striped: true,
            collapsible: true,
            pagination: true,
            rownumbers: true,
            sortOrder: 'asc',
            remoteSort: false,
            idField: 'ID',
            pageSize:20,
            queryParams: queryData,
            frozenColumns: [[
                { field: 'ck', checkbox: true },
                { title: '主键', field: 'ID', width: 40, sortable: true },
                {title:'角色名称',field:'Realname',width:100}
             ]]

                });
        }
    </script>
    <div> 


        <!-----------用户详细信息----------->
        <table id="test" style="width:940px" title="用户操作" data-options="'iconcls':'icon-edit' ">
        </table>
    </div>
</body>

后台代码：

 /// <summary>
        /// 获得角色的信息显示在角色列表中
        /// </summary>
        /// <returns>返回角色信息的Json对象</returns>
        public ActionResult GetAllRoleInfos()
        {
            try
            {
                #region
                //实现对用户和多条件的分页的查询，rows表示一共多少条，page表示当前第几页
                int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
                int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);

                string RealName = Request["RealName"];
                int? Enabled = Request["Enabled"] == null ? -1 : int.Parse(Request["Enabled"]);
                int? CategoryCode = Request["CategoryCode"] == null ? -1 : int.Parse(Request["CategoryCode"]);
                int? DeletionStateCode = Request["DeletionStateCode"] == null ? 0 : int.Parse(Request["DeletionStateCode"]);
                int total = 0;
                //封装一个业务逻辑层的方法来处理多条件查询的信息
                var roleinfo = new RoleInfoQuery()
                {
                    PageIndex = pageIndex,
                    PageSize = pageSize,
                    RealName = RealName,
                    Enabled = Enabled,
                    CategoryCode = CategoryCode,
                    DeletionStateCode = DeletionStateCode,
                    Total = 0
                };
                RoleService _roleInfoService = new RoleService();
                var date = from n in _roleInfoService.loadSearchDate(roleinfo)
                           select new
                           {
                               n.AllowDelete,
                               n.AllowEdit,
                               n.CategoryCode,
                               n.Code,
                               n.CreateBy,
                               n.CreateOn,
                               n.CreateUserID,
                               n.DeletionStateCode,
                               n.Description,
                               n.Enabled,
                               n.ID,
                               n.IsVisible,
                               n.ModifiedBy,
                               n.ModifiedOn,
                               n.ModifiedUserID,
                               n.Realname,
                               n.SortCode
                           };
                //构造Json对象返回
                var result = new { total = roleinfo.Total, rows = date };
                return JsonDate(result);
                #endregion
            }
            catch (Exception)
            {
                return null;
            }
            
        }

 

请求参数：

响应体：