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

1. 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',//默认是post
        loadMsg: '正在加载...',
//      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>

1. 选择显示隐藏列设置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");
}