easyui datagrid 列隐藏和显示

最新推荐文章于 2024-02-27 23:15:34 发布

djk8888

最新推荐文章于 2024-02-27 23:15:34 发布

阅读量4.3w

点赞数 10

分类专栏： html SQL代码 JS代码

本文链接：https://blog.csdn.net/djk8888/article/details/78316838

版权

html 同时被 3 个专栏收录

97 篇文章 1 订阅

订阅专栏

JS代码

76 篇文章 1 订阅

订阅专栏

SQL代码

31 篇文章 0 订阅

订阅专栏

一、设置列为隐藏列

写法1（html属性方法）：

 <table id="ClassInfo_DataGrid" class="easyui-datagrid" style="width: 100%; height: 480px;" data-options="toolbar:'#toolbar',rownumbers:true,pagination:true,fit:true">
        <thead>
            <tr>
                <th field="ck" checkbox="true"></th>
                <th field="ClassId" hidden="true">流程ID</th>
          </tr>
        </thead>
    </table>

写法2（data-options配置方法）：

<table id="CoursePlans_DataGrid" class="easyui-datagrid" style="width: 100%;height:480px;" data-options="toolbar:'#toolbar',rownumbers:true,pagination:true,fit:true">
        <thead>
            <tr>
                <th data-options="field: 'ck', checkbox: true"></th>
                <th data-options="field: 'CourseId', width: 80, sortable: true, hidden: true" align="center"></th>
           </tr>
        </thead>
    </table>

写法3（初始化方法）：

    function initTable(queryData, courseid) {
        $("#CoursePlans_DataGrid").datagrid({
            url: '/Teaching/CoursePlans/GetAllCoursePlansInfo',
            nowrap: true,
            striped: true,
            sortOrder: 'asc',
            remoteSort: false,
            idField: 'CourseId',
            queryParams: queryData,
            pageSize: 50,
            pageList: [50, 100, 200],
           columns:[[    
                {field:'id',checkbox:true}, 
                {field:'data',title:'数据',width:150，hidden:'true'}, 
            ]]
            }
        });
    }

二、控制列的显示和隐藏

<a id="btnShowColumn" class="easyui-linkbutton" data-options="iconCls:'icon-export',plain:true">显示列</a>
<a id="btnHideColumn" class="easyui-linkbutton" data-options="iconCls:'icon-import',plain:true">隐藏列</a>
         <script type="text/javascript">
             $(function () {
                 $("#btnShowColumn").click(function () {
                     $('#ClassInfo_DataGrid').datagrid('showColumn', 'ClassName');//列的field值
                 });
                 $("#btnHideColumn").click(function () {
                     $('#ClassInfo_DataGrid').datagrid('hideColumn', 'ClassName');//列的field值
                 });
             });
         </script>