列表自定义表单（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);}//设置Cookiefunction 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();}//获取Cookiefunction getCookie(userId,flag){    var arr,reg=new RegExp("(^| )"+userId+flag+"=([^;]*)(;|$)");    if(arr=document.cookie.match(reg))        return unescape(arr[2]);        else        return null;}//删除Cookiefunction 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();        }    });}

效果

总结

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