easyui-datagrid 动态显示隐藏行

       最近因为工作关系,用到了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 动态显示隐藏行》

       那么问题来了,当我们需要隐藏某行的时候发现 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();//显示行号
        }
    }
}

    原文作者:alex_hq
    原文地址: https://blog.csdn.net/qq_33292205/article/details/53667455
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞