easyui datagrid 列隱藏和顯示
阿新 • • 發佈:2019-01-30
一、設定列為隱藏列
寫法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>