列表自定义表单（easyui+cookie）

这篇文章是上一篇的最终版，因需求改变而改变，经过这次的改变代码越来越完善，自己也学到了更多。

改变

• 将代码封装成组件
• 页面展示

需求

• 在部分列表中增加为自定义的模式（即用户自己选择显示哪些数据项）
• 操作页面中的【重置】功能是将勾选项恢复到初始状态（即每个页面中默认勾选的显示项目，以当前页面显示的项目为默认勾选项，增加的显示项都不是默认勾选，需使用者自己勾选）
• 该自定义项需要在用户进行修改后自动保存（根据用户账号来保存，可保存在本地）

技术点

• easyui
• cookie

代码块

列表自定义编辑框

<div id="module_column_defined_dialog" buttons="#module_column_defined_dialog_button"></div>
<div style="text-align:center" id="module_column_defined_dialog_button">
<a href="javascript:void(0)" id="buttone-column-defined-save-select-all"class="easyui-linkbutton" iconCls="icon-edit-rf" onclick="selectAllColumn()">全选</a>
<a href="javascript:void(0)" id="buttone-column-defined-save"class="easyui-linkbutton" iconCls="icon-ok-rf">确定</a>
<a href="javascript:void(0)" id="button-column-defined-cancel"class="easyui-linkbutton" iconCls="icon-reload-rf" onclick="resetColumn(currentUserId,initColumnMap,pk,flag)">重置</a>
</div>

a标签

<a href="javascript:void(0)" class="easyui-linkbutton"  onclick="columnDefined(currentUserId,initColumnMap,pk,flag)">列表自定义</a>

常量

var pk="faultFeedbackId";
var module_dialog="#module_dialog";
var flag = "look_index";
var currentUserId = "${currentUserId}";
var initColumnMap = {
    'faultFeedbackId':true,
    'feedbackStatus':true,
};

页面加载时

$(function(){
    $("#module_column_defined_dialog").dialog($.extend({}, dialogParam, dialogParamObj));
    loadColumnDefined(currentUserId,initColumnMap,pk,flag);
});

组件module_cols_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
            setCookie(userId,columnStr.substring(0,columnStr.length-1),flag);
            //更新列状态（隐藏或显示）
            updateColumn(boolMap,allColumn,pk);
            //关闭对话框
            colsDefinedCancel();
        }
    });
    $("#module_column_defined_dialog").dialog({
        title : $("title").html()+" - 列表自定义",
        content : html,
        href : '',
        onBeforeOpen : function (){
            var columnStr = getCookie(userId,flag);
            var columnArr = [];
            if(columnStr!=null){
                columnArr = columnStr.split(",");
            }
            //复选框勾选
            if(columnStr!=null&&columnStr.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 columnStr = getCookie(userId,flag);
    if(columnStr!=null&&columnStr.length>0){
        columnArr = columnStr.split(",");
    }
    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");
    $.messager.alert('系统提示','操作成功！',"info");
}

//复选框勾选
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) {
            delCookie(userId,flag);
            checkedColumn(initColumnMap);
            updateColumn(initColumnMap,$('#module_datagrid').datagrid('getColumnFields'),pk);
            colsDefinedCancel();
        }
    });
}

效果

总结

代码真的需要时间去磨合，这篇文章也绝对不是最终版，不段追求完美的心才能人进步，我要坚持写文章不求别只为自己进步！同时也希望大家能互相学习和指正！