easyui datagrid 表格动态隐藏部分列的展示

Posted 2020-09-02 Mr_伍先生

1.一套代码中，可能不同的项目情况都在用，但是可能不同的项目要求展示的datagrid列的内容并不一致，所以能够动态的显示部分datagrid列的内容。

   即datagrid的中的某一列，这个项目要求显示那个项目要求不显示。

 

2.js代码实现

   

function gridLoad() {
    $(‘#t_auclot‘).datagrid(
            {
                idField : ‘id‘, // 只要创建数据表格 就必须要加 ifField
                title : ‘拍卖列表‘,
                fit : true,
                url : parent.baseUrl + ‘auction/auclot,
                method : ‘GET‘,
                fitColumns : false,
                nowrap : false,
                singleSelect:true,
                // striped : true, // 隔行变色特性
                loadMsg : ‘数据正在加载,请耐心的等待...‘,
                rownumbers : true,
                sortName : ‘crtTime‘,
                sortOrder : ‘desc‘,
                rowStyler : function(index, record) {
                },
                /*frozenColumns : [ [ // 冻结列特性 ,不要与fitColumns 特性一起使用
                {
                    field : ‘ck‘,
                    width : 50,
                    checkbox : true
                
                 * formatter: function(value, rowData, rowIndex){ return ‘<input
                 * type="radio" name="selectRadio"
                 * id="selectRadio"‘+rowIndex+‘value="‘+rowData.id+‘"/>‘; }
                 
                } ] ],*/
                columns : [ [ {
                    field : ‘auclot‘,
                    title : ‘操作‘,
                    width : 240,
                    align : ‘center‘,
                    formatter : aucLotFtt
                }, {
                    field : ‘plateNum‘,
                    title : ‘车牌号‘,
                    width : 75,
                    sortable :true,
                    align : ‘center‘
                }, {
                    field : ‘aucLotSettled‘,
                    title : ‘结算情况‘,
                    width : 70,
                    align : ‘center‘,
                    formatter : aucLotSettledFtt
                } ] ],
                onLoadSuccess:function(data){
                    if(!top.checkHiddenSet("plateNumFlag")){ 
                        $("#t_auclot").datagrid("hideColumn", "aucLotSettled"); // 设置隐藏列
                    }else{
                        $("#t_auclot").datagrid("hideColumn", "plateNum"); // 设置隐藏列
                    }
                    if(top.checkHiddenSet("stageFlag")){ 
                        $("#t_auclot").datagrid("hideColumn", "stage"); // 设置隐藏列
                        $("#stageResearch").hide();//隐藏上拍阶段的搜索框
                    }
                    if(top.checkHiddenSet("typeFlag")){
                        $("#t_auclot").datagrid("hideColumn", "type"); //设置隐藏列
                    }
                } ,  
                pagination : true,
                pageSize : 10,
                pageList : [ 5, 10, 15, 20, 50 ],
                toolbar : toolbarFtt()
            });
};

 

3.以上，做法，就能够做到，datagrid列的动态显示了