首页 > 代码库 > 用easyui做datagrid表格
用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://www.mamicode.com/‘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, onl oadSuccess: 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://www.mamicode.com/‘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); }, onl oadSuccess: 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了。
这是本人第一次用博客记录自己在工作中的学习心得，方便自己也方便大家，如果有疑问可留言讨论。
用easyui做datagrid表格
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。