EasyUI1.5之设置datagrid显示隐藏列

datagrid添加设置隐藏列按钮
- js页面初始化datagrid

$(function(){initColums();init();
}

initColumns()函数

function initColums() {cols = [{field: 'cusNo',title: 'id',sortable: true,align: 'center',},{field: 'cusName',title: '名称',align: 'center',sortable: false,},{field: 'spc',title: '规格',sortable: false,align: 'center',},{field: 'ZJc',title: '简称',sortable: false,align: 'center',},{field: 'qty',title: '订单总数量',sortable: false,align: 'center',},{field: 'qtyYwg',title: '库存数',sortable: false,align: 'center',formatter: function(value, row, index) {return row.qty - row.qtyWwg;}},{field: 'qtyPs',title: '已发货数',sortable: false,align: 'center',},{field: 'qtyWfh',title: '未发货数',sortable: false,align: 'center',formatter: function(value, row, index) {return row.qty - row.qtyPs;}},{field: 'qtyKp',title: '开票数',align: 'center',formatter: function(value, row, index) {return row.qty - row.qtyWk;}},{field: 'qtyWk',title: '未开票数',align: 'center'},{field: 'amtn',title: '订单总金额',align: 'center'},{field: 'amtnSk',title: '已收款金额',align: 'center',//已收款数formatter: function(value, row, index) {return row.amtn - row.amtnWk;}},          {field: 'amtnWk',title: '未收款金额',align: 'center'},//未收款数];
}

init()函数

function init() {$('#custsList').datagrid({url: 'orderBodyController.do?custsdatagrid',title: '库存详情列表',
//      fitColumns: true,fit: true,
//      method: 'post',//默认是postloadMsg: '正在加载...',
//      nowrap: false,//把数据显示在一行里rownumbers: true,//显示行号
//      singleSelect: true,frozenColumns: [[{field: 'id',title: 'id',checkbox: true,},]], columns: [cols],queryParams: {type: 1,},onLoadSuccess: function(data) {//自适应行号custsList.datagrid('fixRownumber');initDrag();},toolbar: '#tb',pagination: true,pageSize: 10,pageNumber: 1,pageList: [10, 20, 30],
//      pagePosition: 'both'sortName: 'cusNo',sortOrder: 'asc',
//      remoteSort: true,//默认可以从服务器端排序});
}

JSP页面添加tb div

<div id="tb" style="padding: 5px;"><a href="#" class="easyui-linkbutton" iconCls="icon-filter" plain="true" onclick="chooseColumShow();">设置显示列</a>
</div>

选择显示隐藏列设置datalist页面，点击按钮弹出选择页面
- 设置显示列函数chooseColumShow()

/*** 设置显示列*/
function chooseColumShow() {var title = '设置列显示页面';initShowColumnWindow($('#show_column_window'), $('#show_column_datalist'), custsList, title);
}

JSP页面添加datalist设置显示隐藏列页面工具栏

<div id="show_column_window"><div id="show_column_datalist"></div><div id="show_columns_buttons" align="right"><a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="chooseAllColumns();">全选</a><a href="#" class="easyui-linkbutton" iconCls="icon-clear" plain="true" onclick="unChooseAllColumns();">全不选</a><a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveChooseColumns();">确定</a><a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="closeShowCloumns();">关闭</a></div></div>

具体设置隐藏列函数

定义相关变量

var dialog_showColumn; //设置显示列弹出框
var datalist_column;  //设置显示列datalist
var datagrid;//具体操作的datagrid

初始化设置显示列弹出框initShowColumnWindow(dialog_showColumnWindow, datalist_columnShow, dg, title)

/*** 设置列显示、隐藏* @param {} dialog_showColumnWindow* @param {} datalist_columnShow* @param {} dg* @param {} title*/
function initShowColumnWindow(dialog_showColumnWindow, datalist_columnShow, dg, title) {dialog_showColumn = dialog_showColumnWindow;datalist_column = datalist_columnShow;datagrid = dg;
//  alert(dialog_showColumnWindow);dialog_showColumnWindow.window({title: title,closable: true,collapsible: false,maximizable: false,minimizable: false,resizable: true,draggable: true,modal: true,width: 600,height: 400,
//      href: href,onOpen: function () {var columnFields = dg.datagrid("getColumnFields");var columnDefineArray = [];var checkedRow = [];$.each(columnFields, function (i, columnField) {var fieldOptions = dg.datagrid("getColumnOption", columnField);fieldOptions.text = fieldOptions.title;fieldOptions.value = columnField;if (!fieldOptions.hidden) {checkedRow.push(i);}columnDefineArray.push(fieldOptions);});datalist_columnShow.datalist({lines: true,checkbox: true,selectOnCheck: false,singleSelect: false,data: columnDefineArray,onLoadSuccess: function () {$.each(checkedRow, function (i, rowIndex) {datalist_columnShow.datalist("checkRow", rowIndex);});}});},buttons: '#show_columns_buttons',});
}

其他辅助函数

/*** 选中所有要显示的列，即全选*/
function chooseAllColumns() {datalist_column.datalist("checkAll");
}/*** 取消全选要显示的列*/
function unChooseAllColumns() {datalist_column.datalist("clearChecked");
}/*** 确定要显示的列*/
function saveChooseColumns() {var checkedDataArray = datalist_column.datalist("getChecked");var showColumns = [];$.each(checkedDataArray, function (i, checkedData) {showColumns.push(checkedData.value);});var columnFields = datagrid.datagrid("getColumnFields");var hideColumn = [];$.each(columnFields, function (i, columnField) {if ($.inArray(columnField, showColumns) != -1) {datagrid.datagrid("showColumn", columnField);} else {hideColumn.push(columnField);datagrid.datagrid("hideColumn", columnField);}});dialog_showColumn.window("close");
}/*** 关闭窗口*/
function closeShowCloumns() {dialog_showColumn.window("close");
}

EasyUI1.5之设置datagrid显示隐藏列相关推荐

在Word2010文档中设置和显示隐藏文字
用户在使用Word2010编辑文档的过程中,常常需要将Word文档中的特定文字设置为隐藏文字,以实现保密效果.本篇教程介绍在Word2010文档中设置和显示隐藏文字的方法. 1．设置隐藏文字用户可以 ...
【转】设置右键显示/隐藏系统文件
@Set Prog=[小唐]设置右键显示/隐藏系统文件 @echo off @color 0A :start cls @echo ╭═══════════════════╮ @echo ║ ...
datatable隐藏列设置及获取隐藏列的值
原文:原文链接设置隐藏列: "columns": [ { "data": "name" }, { "data": &q ...
Excel如何显示隐藏列？
我们在工作中遇到excel表格数据太多比较负责,同时字段太多需要隐藏一些不重要的字段方便阅读和分析其他数据那么我们如何取消隐藏数据呢?隐藏列比较简单选中点隐藏就可以了,取消隐藏需要一些小的技巧才能灵活 ...
vue el-table 显示/隐藏列异常-表格数据域高度变小
在我们需要对表格的列做动态的显示/隐藏时,会遇到一个问题,那就是在某一列从隐藏到显示时,整个表格会闪烁,仔细观察会发现是表格的表头高度瞬间变大,然后又缩回去了,这就导致一个问题,表格数据域的高度会变小 ...
【Pandas】dataframe 设置完全显示所有列
pandas 的 dataframe列数太多无法完全显示,可以通过设置display.max_columns'实现. import pandas as pd pd.set_option('displa ...
设置div显示隐藏的N种方法
设置display为block或""或直接不设置display,div都是显示的,display为none就隐藏了.JQ可以用 $("div").show(); ...
帆软根据参数显示隐藏列
通过参数selectType的值显示和隐藏----地区列右键-->条件属性-->增加条件属性-->再加属性[列宽]0毫米-->公式-->$selectType=1或者2 ...
设置DataGrid自动生成列的宽度
在DataGrid的ItemCreated事件里可以 private void DataGrid1_ItemCreated(object sender, System.Web.UI.WebContro ...

EasyUI1.5之设置datagrid显示隐藏列

EasyUI1.5之设置datagrid显示隐藏列相关推荐

最新文章

热门文章