彻底解决列表自定义（保存用户自定义表头和表头宽度）

核心组件module_column_defined.js

//列表自定义
function columnDefined(userId,initColumnMap,pk,flag) {
    $("#module_column_defined_dialog").dialog("clear");
    var html='<div style="margin-left:30px;margin-top:20px;">';
    var allColumn = $('#module_datagrid').datagrid('getColumnFields');
    for(var i in allColumn){
        if(i!=0){
            var value =allColumn[i];
            var text = $('#module_datagrid').datagrid( "getColumnOption" ,value).title;
            html+='<label style="float:left;width:25%;height:30px"><input name="column_defined" type="checkbox" value="'+value+'">'+text+'</label>';
            if(i%4==0){
                html+='<br/>';
            }
        }
    }
    html+='</div>';
    //解绑上一次点击事件并触发点击事件
    $("#buttone-column-defined-save").unbind('click').click(function(){
        var columnStr = "";
        var boolMap = {};
        $('input[name="column_defined"]:checked').each(function(){
            columnStr+=$(this).val();
            columnStr+=",";
            boolMap[$(this).val()] = true;
        });
        if($.isEmptyObject(boolMap)){
            $.messager.alert('操作失败','请至少选择一个！', "warning");
        }else{
            //设置Cookie
            var cookieValueStr = getCookie(userId,flag);
            if(cookieValueStr!=null){
                var map = eval('(' + cookieValueStr + ')');
                map['field'] =columnStr.substring(0,columnStr.length-1);
                setCookie(userId,JSON.stringify(map),flag);
            }else{
                var newStr = '{'+'field'+':'+'\''+columnStr.substring(0,columnStr.length-1)+'\''+'}';
                setCookie(userId,newStr,flag);
            }
            //更新列状态（隐藏或显示）
            updateColumn(boolMap,allColumn,pk);
            //关闭对话框
            colsDefinedCancel();
        }
    });
    $("#module_column_defined_dialog").dialog({
        title : $("title").html()+" - 列表自定义",
        content : html,
        href : '',
        onBeforeOpen : function (){
            var cookieValueStr = getCookie(userId,flag);
            var columnArr = [];
            if(cookieValueStr!=null){
                var map = eval('(' + cookieValueStr + ')');
                if(map['field']){
                    columnArr = map['field'].split(",");
                }else{
                    checkedColumn(initColumnMap);
                }
                //复选框勾选
                if(columnArr.length>0){
                    var boolMap = {};
                    for (var i=0;i<columnArr.length;i++){
                        boolMap[columnArr[i]] = true;
                    }
                    checkedColumn(boolMap);
                }
            }else{
                checkedColumn(initColumnMap);
            }
        }
    });
    $("#module_column_defined_dialog").dialog("open");
}

//加载列表自定义
function loadColumnDefined(userId,initColumnMap,pk,flag) {
    var columnArr = [];
    var cookieValueStr = getCookie(userId,flag);
    if(cookieValueStr!=null){
        var map = eval('(' + cookieValueStr + ')');
        if(map['field']){
            columnArr = map['field'].split(",");
        }
        if(map['resizeColumn']){
            for(var key in map['resizeColumn']){ 
                resizeColumnWidth(key,map['resizeColumn'][key]);
            }
        }
    }
    var boolMap = {};
    if(columnArr.length>0){
        for(var i=0;i<columnArr.length;i++){
            var key = columnArr[i];
            boolMap[key] = true;
        }
        //更新列状态（隐藏或显示）
        updateColumn(boolMap,$('#module_datagrid').datagrid('getColumnFields'),pk);
    }else{
        //更新列状态（隐藏或显示）
        updateColumn(initColumnMap,$('#module_datagrid').datagrid('getColumnFields'),pk);
    }
}

//更新列状态（隐藏或显示）
function updateColumn(boolMap,arr,pk) {
    for (var i = 0; i < arr.length; i++) {
        var key = arr[i];
        if(boolMap[key]){//展示
            $("#module_datagrid").datagrid('showColumn', key);
        }else{//隐藏
            if(key != pk){
                $("#module_datagrid").datagrid('hideColumn', key);
            }
        }
    }
}

//全选
function selectAllColumn() {
    var allColumn = $('#module_datagrid').datagrid('getColumnFields');
    var boolMap = {};
    for (var i=0;i<allColumn.length;i++){
        boolMap[allColumn[i]] = true;
    }
    //复选框勾选
    checkedColumn(boolMap);
}

//反选
function deselectAllColumn() {
    var boolMap = {};
    //复选框勾选
    checkedColumn(boolMap);
}

//设置Cookie
function setCookie(userId,value,flag){
    var Days = 36135;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = userId +flag + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//获取Cookie
function getCookie(userId,flag){
    var arr,reg=new RegExp("(^| )"+userId+flag+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);    
    else
        return null;
}

//删除Cookie
function delCookie(userId,flag){
    var exp = new Date();
    exp.setTime(exp.getTime()-1);
    var value=getCookie(userId,flag);
    if(value!=null)
        document.cookie = userId + flag+ "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//关闭对话框
function colsDefinedCancel() {
    $("#module_column_defined_dialog").dialog("close");
}

//复选框勾选
function checkedColumn(boolMap){
    $("input[name='column_defined']").each(function(){
        if(boolMap[$(this).val()]){
            $(this).attr("checked",true);  
        }else{
            $(this).attr("checked",false);
        }
    });
}

//重置
function resetColumn(userId,initColumnMap,pk,flag){
    $.messager.confirm('确认？', '重置会将勾选项恢复到初始状态，是否执行该操作?', function(confirm) {
        if (confirm) {
            colsDefinedCancel();
            delCookie(userId,flag);
            $('#module_datagrid').datagrid($.extend({},dataGridParam,dataGridParamObj));
            loadColumnDefined(currentUserId,initColumnMap,pk,flag);
        }
    });
}

//调整列宽度
function resizeColumn(userId,flag,newStr){
    var cookieValueStr = getCookie(userId,flag);
    if(cookieValueStr!=null){
        var newMap = eval('(' + newStr + ')');
        var map = eval('(' + cookieValueStr + ')');
        if(map['resizeColumn']){
            for(var key in newMap){ 
                map['resizeColumn'][key] =newMap[key];
            }
        }else{
            var newMap = eval('(' + newStr + ')');
            map['resizeColumn'] =newMap;
        }
        var str = JSON.stringify(map);
        setCookie(userId,str,flag);
    }else{
        var map ={};
        var newMap = eval('(' + newStr + ')');
        map['resizeColumn'] =newMap;
        var str = JSON.stringify(map);
        setCookie(userId,str,flag);
    }
}

//调整列宽度
function resizeColumnWidth(field,width){
    $('#module_datagrid').datagrid('getColumnOption',field).width = width;
    $('#module_datagrid').datagrid(); 
}

jsp变量配置和初始化

var pk="faultFeedbackId";
var flag = "rf_look_index";
var currentUserId = "${currentUserId}";
var initColumnMap = {
    'faultFeedbackId':20,
    'feedbackStatus':50,
    'padCode':80,
    'renewalPadCode':80,
    'map.padIp':80,
    'map.deviceIp':80,
    'map.padGrade':50,
    'map.bindStatus':50,
    'createTime':50,
    'map.className':50,
    'feedbackContent':50,
    'finishTime':50,
    'map.fixName':50,
    'feedbackHandle':50,
    'feedbackSource':50,
    'feedbackContact':50,
    'feedbackQq':50,
    'map.promoter':50,
    'map.lastHandler':50,
    'map.clientSourceName':50,
    'remark':50,
    'vmStatus':50,
    'padStatus':50
};

列属性

columns:[[
    {width:20,title:'id',field:pk,checkbox:true},
    {width:50,title:'状态',field:'feedbackStatus',sortable:true,formatter:formatterFlag},
    {width:80,title:'设备编码',field:'padCode',sortable:true},
    {width:80,title:'更换设备编码',field:'renewalPadCode',sortable:true},
    {width:80,title:'设备IP',field:'map.padIp'},
    {width:80,title:'物理设备IP',field:'map.deviceIp'},
    {width:50,title:'设备等级',field:'map.padGrade',formatter :function(value){return getDatagridDict('rf_user_pad.pad_grade',value);}},
    {width:60,title:'当前绑定状态',field:'map.bindStatus',formatter :function(value){return getDatagridDict('rf_pad.bind_status',value);}},
    {width:50,title:'故障时间',field:'createTime',sortable:true,formatter:formatterTime},
    {width:50,title:'故障类型',field:'map.className'},
    {width:50,title:'故障描述',field:'feedbackContent',sortable:true},
    {width:50,title:'完成时间',field:'finishTime',sortable:true,formatter:formatterTime},
    {width:50,title:'修复类型',field:'map.fixName'},
    {width:50,title:'修复内容',field:'feedbackHandle',sortable:true},
    {width:50,title:'来源',field:'feedbackSource',sortable:true,formatter:function(value){return getDatagridDict('rf_fault_feedback.feedback_source',value);}},
    {width:50,title:'联系电话',field:'feedbackContact',sortable:true},
    {width:50,title:'联系QQ',field:'feedbackQq',sortable:true},
    {width:50,title:'咨询',field:'map.promoter'},
    {width:50,title:'当前处理',field:'map.lastHandler'},
    {width:50,title:'操作来源',field:'map.clientSourceName'},
    {width:50,title:'备注',field:'remark'},
    {width : 50, title : '虚拟状态',field:'vmStatus',sortable:true ,formatter:function(value){return getDatagridDict('rf_pad.vm_status',value);}},
    {width : 50,title : '受控状态',field : 'padStatus',sortable : true,formatter :formatterOnlineStatus}
]],

效果图