最近因为工作关系,用到了easyui,各种方便的同时也发现了不少问题。尤其是datagrid插件的动态隐藏显示行。现给出解决方案如下
定义一个表格
table id="usergroup_tableBaseRight" class="easyui-datagrid" style="width:100%;height:100%" data-options="rownumbers:true">
<thead>
<tr>
<th data-options="field:'moudleid',width:100,hidden:true">模块编号</th>
<th data-options="field:'moudlename',width:120">所属模块</th>
<th data-options="field:'rightid',width:100,hidden:true">权限编号</th>
<th data-options="field:'name',width:160">权限名称</th>
<th data-options="field:'rightvalue',width:20,checkbox:true">权限</th>
<th data-options="field:'info',width:320">信息</th>
</tr>
</thead>
</table>
填充数据后显示如下
那么问题来了,当我们需要隐藏某行的时候发现 easyui datagrid 控件不能动态的显示隐藏行。百度,google都没有解决方案。。。算了,不说废话了,直接上代码
//获取 easyui-datagrid 数据存储所在表格
function easyuiDG_getTBody(tableid) {
/*
获取easyui datagrid 数据所在的html 表格
cssclass datagrid-view2 是 easyui datagrid 数据展示table所在的div
*/
var view2 = $('#' + tableid).prevAll('div.datagrid-view2');
var table = view2.children('div.datagrid-body').children('table.datagrid-btable');
/*
return table.html(); 返回以下 html 内容 (table.innerHTML)
<tbody>
<tr id="datagrid-row-r1-2-0" datagrid-row-index="0" class="datagrid-row" style="height: 25px;"><td field="moudleid" style="display:none;">
<div style="height:auto;" class="datagrid-cell datagrid-cell-c1-moudleid">7</div>
</td>
<td field="moudlename"><div style="height:auto;" class="datagrid-cell datagrid-cell-c1-moudlename">系统</div></td>
<td field="rightid" style="display:none;"><div style="height:auto;" class="datagrid-cell datagrid-cell-c1-rightid">1</div></td>
<td field="name"><div style="height:auto;" class="datagrid-cell datagrid-cell-c1-name">ACCBOOK_LOGIN</div></td>
<td field="rightvalue"><div style="" class="datagrid-cell-check"><input type="checkbox" name="rightvalue" value="0"></div></td>
<td field="info"><div style="height:auto;" class="datagrid-cell datagrid-cell-c1-info">账套登录</div></td>
</tr>
<tr>...</tr>
</tbody>
*/
return table;
}
//隐藏指定行
function easyuiDG_hideRow(tableid, index) {
var tbody = easyuiDG_getTBody(tableid).children('tbody');//获取 easyui-datagrid 数据存储所在表格
tbody.children().eq(index).hide(); //隐藏指定行
//如果显示行号的话 则隐藏行号
if ($('#' + tableid).prevAll('div.datagrid-view1')) {
var numbers = $('#' + tableid).prevAll('div.datagrid-view1')
.children('div.datagrid-body')
.children('div.datagrid-body-inner')
.children('table.datagrid-btable')
.children('tbody');
numbers.children().eq(index).hide();//隐藏行号
}
}
//隐藏所有行
function easyuiDG_hideAllRow(tableid) {
var tbody = easyuiDG_getTBody(tableid).children('tbody');//获取 easyui-datagrid 数据存储所在表格
for (var i = 0; i < tbody.children().length; i++) {
tbody.children().eq(i).hide();
//如果显示行号的话 则隐藏行号
if ($('#' + tableid).prevAll('div.datagrid-view1')) {
var numbers = $('#' + tableid).prevAll('div.datagrid-view1')
.children('div.datagrid-body')
.children('div.datagrid-body-inner')
.children('table.datagrid-btable')
.children('tbody');
numbers.children().eq(i).hide();//隐藏行号
}
}
}
//显示指定行
function easyuiDG_ShowRow(tableid, index) {
var tbody = easyuiDG_getTBody(tableid).children('tbody');//获取 easyui-datagrid 数据存储所在表格
tbody.children().eq(index).show(); //显示指定行
//如果显示行号的话 则隐藏行号
if ($('#' + tableid).prevAll('div.datagrid-view1')) {
var numbers = $('#' + tableid).prevAll('div.datagrid-view1')
.children('div.datagrid-body')
.children('div.datagrid-body-inner')
.children('table.datagrid-btable')
.children('tbody');
numbers.children().eq(index).show();//显示行号
}
}
//显示所有行
function easyuiDG_showAllRow(tableid) {
var tbody = easyuiDG_getTBody(tableid).children('tbody');//获取 easyui-datagrid 数据存储所在表格
for (var i = 0; i < tbody.children().length; i++) {
tbody.children().eq(i).show();
//如果显示行号的话 则显示行号
if ($('#' + tableid).prevAll('div.datagrid-view1')) {
var numbers = $('#' + tableid).prevAll('div.datagrid-view1')
.children('div.datagrid-body')
.children('div.datagrid-body-inner')
.children('table.datagrid-btable')
.children('tbody');
numbers.children().eq(i).show();//显示行号
}
}
}