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