EasyUI之datagrid的使用

Posted 2020-09-23 善良的小赵

1.datagrid的展示首先需要一个展示的容器table

        <div>
            <table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit"></table>
        </div>

 2.对容器table进行设置，展示数据列

 $(‘#tt‘).datagrid({
                url: ‘/ActionInfo/GetActionInfo‘,
                type: "post",
                title: ‘权限数据表格‘,
                width: 700,
                height: 400,
                fitColumns: true, //列自适应
                nowrap: false,
                idField: ‘ID‘,//主键列的列明
                loadMsg: ‘正在加载权限信息...‘,
                pagination: true,//是否有分页
                singleSelect: false,//是否单行选择
                pageSize: 5,//页大小，一页多少条数据
                pageNumber: 1,//当前页，默认的
                pageList: [5, 10, 15],
                queryParams: {},//往后台传递参数
                columns: [
                    { field: ‘ck‘, checkbox: true, align: ‘left‘, width: 50 },
                    { field: ‘ID‘, title: ‘编号‘, width: 80 },
            
                      {
                          field: ‘ActionTypeEnum‘, title: ‘权限类型‘, width: 80, align: ‘right‘,
                          formatter: function (value, row, index) {
                              if (value == "1") {
                                  return "菜单权限";

                              }
                              else {
                                  return "普通权限";
                              }
                          }
                      },
                       {
                        field: ‘SubTime‘, title: ‘时间‘, width: 80, align: ‘right‘,
                        formatter: function (value, row, index) {
                            return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d");
                         
                        },
                       },
                        {
                            field: ‘Edit‘, title: ‘编辑‘, width: 80, align: ‘right‘,
                            formatter: function (value, row, index) {
                                return "<a href=‘javascript:void(0)‘ class=‘delete‘ num=‘" + row.ID + "‘>删除</a>&nbsp;<a href=‘javascript:void(0)‘ class=‘edit‘ num=‘" + row.ID + "‘>编辑</a>"
                            },
                        }
                ]],

当对datagrid进行数据的绑定的时候，如果绑定的列出现问题，将会整个表格都不显示，如果绑定的field属性没有对应的返回数据对应，将会原样展示，通过formater可以为每一个filed自定义返回的值，例如上面的代码添加两个a标签“编辑、删除”

3.datagrid中事件的使用

使用的方式跟上面属性的使用方式是一样的，只需要加上相应的事件的名称和事件触发对应的function即可

 onLoadSuccess: function () {
                    $(".delete").click(function () {
                        var id = $(this).attr("num");
                        alert(id);
                    })
                    $(".edit").click(function () {
                        var id = $(this).attr("num");
                        alert(id);
                    })
                }

上面的代码展示了当表格数据加载完毕后执行的function。