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 没有写对