EasyUI datagrid 使用小结

用了 EasyUI 框架一段时间了，这个前端框架用起来还是挺方便的，也有很多现成的控件，看看官方文档应该还是能比较快用起来的。
在这里记录一下一些常用的控件的方法，遇到过的bug或者当初耗了一点时间来实现的功能吧。

---

1. datagrid 跳到指定页

var pager = $('#dg').datagrid('getPager'); // 获取分页Paper对象var pageSize = pager.data("pagination").options.pageSize;   // 获取当前设置的页面尺寸，即每页显示多少条数据var pageNum = pager.data("pagination").options.pageNumber;  // 获取当前页码pager.pagination('select', pager.data("pagination").options.pageNumber + 1);    // 选择下一页

吐槽一下……
这个我一直找 datagrid 找不到跳转到某一页的方法，后来仔细看发现 datagrid 的分页是通过 pagination 这个控件实现的，于是看 pagination 的相关文档就好了。
以后也要注意呀~~

2. datagrid toolbar 的显示与隐藏

隐藏整个工具栏： $('div.datagrid-toolbar').hide();
隐藏第一个按钮： $('div.datagrid-toolbar a').eq(0).hide();
显示则用 show();

3.

加载 datagrid 数据的代码要等页面加载完后再调用，否则如果用 onBeforeLoad 添加参数的时候有些值会取不到。
而且在页面没加载完时就调用的话，会引发向后台发送两次请求的bug。

4. datagrid 里面嵌入 checkbox

PS： 注意一点， datagrid 列的 formatter 方法是可以直接返回 html 代码的，这样就很简单了。

columns: [[    ...    {        field: 'ShareGroup', title: '推送标配群', width: 200, sortable: false,        formatter: function (value, rowData, rowIndex) {            return "<div id='checkbox-div-" + rowIndex + "'>" +                "<label class='field-checkbox'><input id='ShareGroup-" + rowIndex + "-0'" + " name='ShareGroup-" + rowIndex + "'" + " type='checkbox' value='0' onchange='changeCheckboxColor(" + rowIndex + ")' />小学</label>" +                "<label class='field-checkbox'><input id='ShareGroup-" + rowIndex + "-1'" + " name='ShareGroup-" + rowIndex + "'" + " type='checkbox' value='1' onchange='changeCheckboxColor(" + rowIndex + ")' />初中</label>" +                "<label class='field-checkbox'><input id='ShareGroup-" + rowIndex + "-2'" + " name='ShareGroup-" + rowIndex + "'" + " type='checkbox' value='2' onchange='changeCheckboxColor(" + rowIndex + ")' />高中</label>" +                "<label class='field-checkbox'><input id='ShareGroup-" + rowIndex + "-3'" + " name='ShareGroup-" + rowIndex + "'" + " type='checkbox' value='3' onchange='changeCheckboxColor(" + rowIndex + ")' />幼儿</label>" +                "</div>";        }    },    ...]]

5. 使用 datagrid 后在 IE8 下出现 rowspan 为空或不是对象错误

解决办法看这篇文章：JQueryEasyUI IE8出现rowspan为空或不是对象

6. 改变行/列的样式

...{    field: 'Price1', title: "单价(元)", width: 40, sortable: true,    // 改变列的样式    styler: function (value, rowData, rowIndex) {        if (rowIndex != 0 || $("#queryEmployee").combobox("getValue") > 0) {            return 'background-color:#CCFF99;';        }    }}...// 给第一行的汇总添加不同的样式以突出显示rowStyler: function (index, row) {    if (index == 0 && $("#queryEmployee").combobox("getValue") == -1) {        return 'background-color:#AAFFEE;';    }},

7. datagrid 获取选中行的索引

没有直接的方法，要绕一下。

var row = $('#dg').datagrid('getSelected');var rowIndex = $('#dg').datagrid('getRowIndex', row);

8. 一个bug：分页后，选中一行，再点刷新按钮，就会全选所有项

可能的原因：datagrid 的 idField 没有写对

9. datagrid 分页的情况下实现点击表头的小三角图标对所有数据重新排序

说明一下：
遇到过这样的需求，当点击 datagrid 表头某一列的小三角图标时是可以排序的，但是在当我们对 datagrid 进行了分页的情况下，点击排序只是对当前页的数据进行排序，而需求需要我对数据库里面的所有数据进行排序。
看了一下文档，发现有 onSortColumn 这个事件可以用，当用户对一列进行排序时触发。于是我们只要在触发这个事件的时候重新向后台请求一遍 datagrid 的数据好了。

var sortOrder = "asc"; // 排序方式，asc：正序，desc：倒序var sortField = "NickName"; // 要排序的列名称// 初始化数据列表function initDatagrid() {    $('#dg').datagrid({        url: '/api/Member',        method: "get",        striped: true,        border: true,        selectOnCheck: false,        checkOnSelect: false,        remoteSort: true, // 定义是否从服务器排序数据，要设置为true        singleSelect: false,        idField: 'MemberId',        pagination: true,        rownumbers: false,        pageSize: 20,        fitColumns: true,        columns: [[                { field: 'Phone', title: "手机号码", width: 80, sortable: true },                { field: 'NickName', title: "用户昵称", width: 120, sortable: true },                { field: 'RegistTime', title: "注册时间", width: 60, formatter: formatDatebox, sortable: true },                { field: 'UserType', title: "用户类型", width: 35, formatter: formatUserType, sortable: true },                { field: 'UserState', title: "用户状态", width: 35, formatter: formatUserState, sortable: true },                {                    field: 'View', title: "操作", width: 25,                    formatter: function (value, row, index) {                        return " <div class='detail' onclick='Member.view(" + row.MemberId + ")'>查看</div>";                    }                },                {                    field: 'Edit', title: "", width: 25,                    formatter: function (value, row, index) {                        var editState = '禁用';                        if (row.UserState == 0) {                            editState = '启用';                        }                        return " <div class='edit' onclick='Member.editState(" + row.MemberId + ',' + row.UserState + ")'>" + editState + "</div>";                    }                }        ]],        // 把要排序的列名称与正序/倒序这两个参数也传到后台进行处理        onBeforeLoad: function (params) {            params.nickName = $("#nickName").val();            params.phone = $('#phone').val();            params.sortField = sortField;            params.sortOrder = sortOrder;        },        // 点击某一列进行排序时触发的事件        onSortColumn: function (sort, order) {            sortField = sort;  // 要排序的列名称            sortOrder = order;  // 正序or倒序            $('#dg').datagrid('reload');        }    });}

不过这样还没完善，在 easyui 里本来点击 onSortColumn 就是请求了一次后台的，这一点可以打断点测试一下。
所以，我们需要把原来的那次请求屏蔽掉，否则会请求两次后台，具体的做法，就是修改 jquery.easyui.js / jquery.easyui.min.js 文件。
在 jquery.easyui.js / jquery.easyui.min.js 文件中搜 remoteSort，找到下面这段代码

if(opts.remoteSort){_646(_63c);}else{_647(_63c,$(_63c).datagrid("getData"));}opts.onSortColumn.call(_63c,opts.sortName,opts.sortOrder);};

把 if 里面执行的代码执行掉就好了。（在上图中是 _646(_63c);，有可能不一样）。
PS：datagrid 和 treegrid 都有 remoteSort 这个东东，别搞错了！！

好了，改好后就在点击排序后不会请求两次后台啦~~