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

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

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列的动态显示了

 

相关文章
|
6月前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
39 2
|
6月前
EasyUI DataGrid 假分页
EasyUI DataGrid 假分页
68 0
|
6月前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
6月前
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
160 0
|
6月前
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
267 0
EasyUI DataGrid 可编辑列级联操作
EasyUI DataGrid 可编辑列级联操作
easyUI datagarid 编辑状态下的combobox动态赋值
easyUI datagarid 编辑状态下的combobox动态赋值
easyui datagrid reload后自动全选解决
easyui datagrid reload后自动全选解决