easyui datagrid 列隐藏和显示

来源：互联网发布：ios手机休眠关闭网络编辑：程序博客网时间：2024/05/17 04:04

一、设置列为隐藏列

写法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>

阅读全文

0 0