用easyui做datagrid表格
关于easyui，之前只是听说过了解一点点，到这边上班之后发现他们用的极多，然后作为新人被安排的一些简单的任务里也有用到它的。没办法，硬着头皮上吧，一边对着官网上的demo，一边对着手册，一边摸索着做呗。首先看效果图
相关代码如下（只摘的部分供参考，不能运行的）：
$('#tt').datagrid({
nowrap: false,
striped: true,
remoteSort: false,
singleSelect: true,
fitColumns: true,
pageSize: 25,
pageList: [25, 35, 45, 55],
title: "商家信息",
toolbar: '#toors',
loadMsg: '加载中...',
// onDblClickRow: function (rowIndex, rowData) {
// getsub(rowIndex, rowData, callback);
// var ExpandRow = $("#ExpandRow").val();
// if (ExpandRow != '') {
// $('#tt').datagrid("expandRow", ExpandRow);
// }
// $("#ExpandRow").val(rowIndex); ;
// },
url: '../ashx/SellerManager.ashx?type=GetSellerList&se_property=0',
columns: [[
{ field: 'SE_NAME', title: '商家名称', width: $(this).width() * 0.13, formatter: function (value, row, index) {
return "<a href='http://seller.jukelai.cn/AStation/?suname=" + row.USERNAME + "&supwd=" + row.UPASSWORD + "' target='_blank'>" + row.SE_NAME + "</a>";
}
},
{ field: 'USERNAME', title: '用户名', width: $(this).width() * 0.1 },
{ field: 'SE_TYPE', title: '商家类型', width: $(this).width() * 0.1 },
{ field: 'PROVINCES', title: '所在地', width: $(this).width() * 0.1, formatter: function (value, row, index) {
return row.PROVINCES + '-' + row.CITY + "-" + row.COUNTY;
}
},
{ field: 'SE_CONTACT', title: '联系人', width: $(this).width() * 0.1 },
{ field: 'SE_PHONE', title: '联系电话', width: $(this).width() * 0.1 },
{ field: 'SE_EQUIPMENTCOUNT', title: '设备数量', width: $(this).width() * 0.1 },
{ field: 'SE_URL', title: '网址', width: $(this).width() * 0.1 },
{ field: 'SE_BUSINESSAREA', title: '营业面积', width: $(this).width() * 0.1 },
{ field: 'SE_PROPERTY', title: '性质', width: $(this).width() * 0.1, formatter: function (value, row, index) {
if (row.SE_PROPERTY == 0) {
return '总店';
}
else {
return '分店';
}
}
}
]],
onClickRow: function (rowIndex, rowData) {
if (childbody != null) {
childbody.datagrid('unselectAll');
}
},
pagination: true,
onLoadSuccess: function (data) {
if (data.total == 0) {
console.info('进入无数据');
var body = $(this).data().datagrid.dc.body2;
console.info("body:%f", body);
body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 25px; text-align: center; color:Red">抱歉，没有查询到数据</td></tr>');
}
}
});
var ExpandRow = null;
$('#tt').datagrid({
view: detailview,
detailFormatter: function (index, row) {
return '<div style="padding:3px" id="ddv-"' + index + '><table class="ddv"></table></div>';
},
onExpandRow: function (index, row) {
getsub(index, row, callback);
collapserow(index);
//$('#tt').datagrid('reload');
}
});
function collapserow(index) {
ExpandRow = $("#ExpandRow").val();
if (ExpandRow != '' && ExpandRow != index) {
$('#tt').datagrid("collapseRow", ExpandRow);
}
if (ExpandRow == index) {
$('#tt').datagrid("expandRow", index);
}
$("#ExpandRow").val(index);
}
function callback(gridbody) { //拿到子级对象
if (gridbody != null) {
childbody = gridbody;
}
}
function getsub(index, row, callback) {
ddv = $('#tt').datagrid('getRowDetail', index).find('table.ddv');
var tt = $('#tt');
var cc = row.SE_ID;
ddv.datagrid({
url: '../ashx/SellerManager.ashx?type=GetSellerList&se_property=1&se_parentid=' + cc,
nowrap: false,
striped: true,
remoteSort: false,
singleSelect: true,
fitColumns: true,
singleSelect: true,
rownumbers: true,
loadMsg: '加载中...',
height: 'auto',
onClickRow: function (rowIndex, rowData) {
$('#tt').datagrid('unselectAll');
ddv.datagrid('unselectAll');
$(this).datagrid('selectRow', rowIndex);
},
columns: [[
{ field: 'SE_NAME', title: '商家名称', formatter: function (value, row, index) {
return "<a href='http://seller.jukelai.cn/AStation/?suname=" + row.USERNAME + "&supwd=" + row.UPASSWORD + "' target='_blank'>" + row.SE_NAME + "</a>";
}
},
{ field: 'USERNAME', title: '用户名' },
{ field: 'SE_TYPE', title: '商家类型' },
{ field: 'PROVINCES', title: '所在地', formatter: function (value, row, index) {
return row.PROVINCES + '-' + row.CITY + "-" + row.COUNTY;
}
},
{ field: 'SE_CONTACT', title: '联系人' },
{ field: 'SE_PHONE', title: '联系电话' },
{ field: 'SE_EQUIPMENTCOUNT', title: '设备数量' },
{ field: 'SE_URL', title: '网址' },
{ field: 'SE_BUSINESSAREA', title: '营业面积' },
{ field: 'SE_PROPERTY', title: '性质', formatter: function (value, row, index) {
if (row.SE_PROPERTY == 0) {
return '总店';
}
else {
return '分店';
}
}
}
]],
onResize: function () {
$('#tt').datagrid('fixDetailRowHeight', index);
},
onLoadSuccess: function (data) {
setTimeout(function () {
$('#tt').datagrid('fixDetailRowHeight', index);
}, 0);
if (data.total == 0) {
//console.info('进入无数据');
var body = $(this).data().datagrid.dc.body2;
//console.info("body:%f", body);
body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 25px; text-align: center; color:Red">抱歉，没有查询到数据</td></tr>');
}
}
});
callback(ddv);
}
需注意的地方:
1,子层是异步加载的，在子层加载的时候，第一次点击展开一个表的时候会把下面的内容挤下去，第二次点开的时候就好了。如图：
解决办法：在异步加载的onLoadSuccess里加 上下面几行代码就可以了，如果不写settimeout,直接写函数里面的那一行代码却不行，到最后也没搞明白为什么要这样写，如果有谁懂的，请赐教。
setTimeout(function () {
$('#tt').datagrid('fixDetailRowHeight', index);
}, 0);
2，需求是不管是父层还是子层，每次只能选中一条信息，但是实际操作中发现父层和子层可以同时选中，这样的话对数据的操作（编辑、删除）就容易混淆，因为同时选中很多条，你就不知道当你点了删除按钮它会删除哪一条。
解决办法：在两层表格中都加上一个点击行事件（onClickRow），在点击父层的时候让子层的状态改为‘unselectAll’，即取消选择所有行。如图：
3，在2的基础上发现另外一个问题，在父层点击行的时候会报错，提示对象为null，但是alert时却是object，研究了很长时间都找不到答案，最后请教了我的老师，他的一句话让我茅塞顿开。他说：要在回调函数里去拿第二层，也就是要异步的回来之后再调用一个函数去拿，否则代码立即执行，异步的还没有回来当然是空了，alert是停顿的，所以不是null 。
解决办法：定义一个全局变量，然后写一个回调函数，在异步加载的时候把对象传到回调函数里，再赋值给那个全局变量
这里getsub这个函数是异步加载第二层的那一块，我把它抽出来做成一个函数了，callback就是那个回调函数，gridbody是getsub里拿到的第二层的对象，childbody是全局变量，这样在父层里直接用childbody就可以控制子层了。
4，想把它做成展开一行的时候其余的都折叠的效果，百度了一下，发现有大神给出如下代码：
$("#ExpandRow")是一个隐藏域，用来记录你上一次展开的那一行的ID，但是这样写有一个漏洞，就是当你展开一次之后关闭，然后再点就展不开了。因为这段代码里是把当前行的状态改为‘collapseRow’，也就是折叠，当你再点的时候它的状态还是折叠，所以就展不开了。
解决办法：研究了一下，发现将这段代码稍稍改造一下就可以了。如下代码，又加了一个判断，如果点击的仍是当前行，就把该行的状态改为展开，OK了。
这是本人第一次用博客记录自己在工作中的学习心得，方便自己也方便大家，如果有疑问可留言讨论。
