<a href="http://blog.51cto.com/xinsir/%5C">之前在项目中添加自定义列的功能，思考了很久，参考了别的项目的实现，并加上了一下特定的功能，最近的项目离需要添加自定义列的功能，效果如下</a>
初始列表
<a href="http://s5.51cto.com/wyfs02/M02/88/60/wKiom1fzbGbi3ee0AABV6AY_APk603.png-wh_500x0-wm_3-wmp_4-s_3397776728.png" target="_blank"></a>
2.点击自定义列按钮之后效果如图
<a href="http://s1.51cto.com/wyfs02/M02/88/60/wKiom1fzbKqjAui_AAB8LUHyZoA056.png-wh_500x0-wm_3-wmp_4-s_1287146248.png" target="_blank"></a>
3.用上下左右按钮进行选择，或者双击隐藏或者显示的列
<a href="http://s2.51cto.com/wyfs02/M00/88/5C/wKioL1fzbXuxC9dQAACfI07Oifs278.png-wh_500x0-wm_3-wmp_4-s_2576772013.png" target="_blank"></a>
4.修改完要显示的自定义列之后进行保存的效果如下
<a href="http://s3.51cto.com/wyfs02/M01/88/60/wKiom1fzbb7zB5PfAABIa8tTnQ8816.png-wh_500x0-wm_3-wmp_4-s_1040323431.png" target="_blank"></a>
接下来上代码了：
1.首先是页面的html代码，样式问题可以随意进行修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<code><</code><code>div</code> <code>class</code><code>=</code><code>"modal-content"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"modal-header"</code><code>></code>
<code> </code><code><</code><code>button</code> <code>type</code><code>=</code><code>"button"</code> <code>class</code><code>=</code><code>"close"</code> <code>data-dismiss</code><code>=</code><code>"modal"</code> <code>aria-hidden</code><code>=</code><code>"true"</code><code>>&times;</</code><code>button</code><code>></code>
<code> </code><code><</code><code>h4</code> <code>class</code><code>=</code><code>"modal-title"</code> <code>id</code><code>=</code><code>"customModalLabel"</code><code>>自定义列选择</</code><code>h4</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"modal-body"</code> <code>id</code><code>=</code><code>"customBody"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"row"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"col-md-12"</code><code>></code>
<code> </code><code><!-- BOX --></code>
<code> </code><code><</code><code>form</code> <code>id</code><code>=</code><code>"transferForm"</code> <code>class</code><code>=</code><code>"form-horizontal"</code> <code>role</code><code>=</code><code>"form"</code> <code>action</code><code>=</code><code>"#"</code> <code>validation</code><code>=</code><code>"validation"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"box border"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"box-title"</code><code>></code>
<code> </code><code><</code><code>h4</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"fa fa-columns"</code><code>></</code><code>i</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"hidden-inline-mobile"</code><code>>自定义列选择</</code><code>span</code><code>></</code><code>h4</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"box-body"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"row"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"col-sm-4"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>style</code><code>=</code><code>"width:150px;height:400px;border:1.5px solid #2d6ca2;margin-left:50px;overflow:auto;"</code><code>></code>
<code> </code><code><</code><code>dl</code> <code>id</code><code>=</code><code>"other"</code><code>></code>
<code> </code><code>#foreach($other in $otherMap.entrySet())</code>
<code> </code><code><</code><code>dd</code> <code>style</code><code>=</code><code>"margin-top:5px;"</code> <code>onclick</code><code>=</code><code>"selKey(this);"</code><code>></code>
<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"javascript:;"</code> <code>data-id</code><code>=</code><code>"$!{other.key}"</code><code>>$!{other.value}</</code><code>a</code><code>></code>
<code> </code><code></</code><code>dd</code><code>></code>
<code> </code><code>#end</code>
<code> </code><code></</code><code>dl</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"col-sm-2"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>style</code><code>=</code><code>"position:absolute; top:200px;margin-left:31px"</code><code>></code>
<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"javascript:void(0);"</code> <code>class</code><code>=</code><code>"btn btn-primary"</code> <code>onclick</code><code>=</code><code>"exitCustom();"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"fa fa-arrow-circle-left"</code><code>></</code><code>i</code><code>></</code><code>a</code><code>></code>
<code> </code><code><</code><code>div</code> <code>style</code><code>=</code><code>"position:absolute; top:250px;margin-left:31px"</code><code>></code>
<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"javascript:void(0);"</code> <code>class</code><code>=</code><code>"btn btn-primary"</code> <code>onclick</code><code>=</code><code>"insertCustom();"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"fa fa-arrow-circle-right"</code><code>></</code><code>i</code><code>></</code><code>a</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"col-sm-3"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>style</code><code>=</code><code>"width:150px;height:400px;border:1.5px solid #2d6ca2;overflow:auto;"</code><code>></code>
<code> </code><code><</code><code>dl</code> <code>id</code><code>=</code><code>"selected"</code><code>></code>
<code> </code><code>#foreach($selected in $selectedMap.entrySet())</code>
<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"javascript:;"</code> <code>data-id</code><code>=</code><code>"$!{selected.key}"</code><code>>$!{selected.value}</</code><code>a</code><code>></code>
<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"javascript:void(0);"</code> <code>class</code><code>=</code><code>"btn btn-primary"</code> <code>onclick</code><code>=</code><code>"upCustom();"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"fa fa-arrow-circle-up"</code><code>></</code><code>i</code><code>></</code><code>a</code><code>></code>
<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"javascript:void(0);"</code> <code>class</code><code>=</code><code>"btn btn-primary"</code> <code>onclick</code><code>=</code><code>"downCustom();"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"fa fa-arrow-circle-down"</code><code>></</code><code>i</code><code>></</code><code>a</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>span</code> <code>style</code><code>=</code><code>"padding-left:110px;"</code><code>>隐藏</</code><code>span</code><code>> <</code><code>span</code> <code>style</code><code>=</code><code>"padding-left:220px;"</code><code>>显示</</code><code>span</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"modal-footer"</code><code>></code>
<code> </code><code><</code><code>button</code> <code>type</code><code>=</code><code>"button"</code> <code>class</code><code>=</code><code>"btn btn-default"</code> <code>data-dismiss</code><code>=</code><code>"modal"</code><code>>取消</</code><code>button</code><code>></code>
<code> </code><code><</code><code>button</code> <code>type</code><code>=</code><code>"button"</code> <code>class</code><code>=</code><code>"btn btn-primary"</code> <code>onclick</code><code>=</code><code>"customSub()"</code><code>>保存</</code><code>button</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code></</code><code>form</code><code>></code>
<code> </code><code><!-- /BOX --></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code></</code><code>div</code><code>></code>
<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"$jsModule.getTarget("</code><code>")/style/js/jlj/customerbasic/custom.js"></</code><code>script</code><code>></code>
2.js代码部分如下
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<code>function</code> <code>selKey(label){</code>
<code> </code><code>$(label).siblings().each(</code><code>function</code><code>(i,ele){</code>
<code> </code><code>$(ele).attr(</code><code>"style"</code><code>,</code><code>"margin-top:5px;"</code><code>);</code>
<code> </code><code>$(ele).removeAttr(</code><code>"data-selected"</code><code>);</code>
<code> </code><code>});</code>
<code> </code><code>$(label).attr(</code><code>"style"</code><code>,</code><code>"margin-top:5px;background-color:#B0C4DE;"</code><code>);</code>
<code> </code><code>$(label).attr(</code><code>"data-selected"</code><code>,</code><code>"selected"</code><code>);</code>
<code>}</code>
<code>function</code> <code>insertCustom(){</code>
<code> </code><code>var</code> <code>html=$(</code><code>'#other'</code><code>).find(</code><code>'[data-selected]'</code><code>).html();</code>
<code> </code><code>if</code> <code>(html==undefined) {</code>
<code> </code><code>return</code><code>;</code>
<code> </code><code>}</code>
<code> </code><code>$(</code><code>'#other'</code><code>).find(</code><code>'[data-selected]'</code><code>).remove();</code>
<code> </code><code>$(</code><code>'#selected'</code><code>).append(</code><code>'<dd onclick="selKey(this)" style="margin-top:5px;">'</code><code>+html+</code><code>'</dd>'</code><code>);</code>
<code> </code><code>$(</code><code>'#selected'</code><code>).find(</code><code>'[data-selected]'</code><code>).attr(</code><code>'style'</code><code>,</code><code>"margin-top:5px;"</code><code>);</code>
<code> </code><code>$(</code><code>'#selected'</code><code>).find(</code><code>'[data-selected]'</code><code>).removeAttr(</code><code>"data-selected"</code><code>);</code>
<code>function</code> <code>exitCustom(){</code>
<code> </code><code>if</code><code>($(</code><code>'#selected'</code><code>).find(</code><code>'dd'</code><code>).length==1){</code>
<code> </code><code>bootbox.alert(</code><code>"至少有一个列需要显示"</code><code>);</code>
<code> </code><code>var</code> <code>html=$(</code><code>'#selected'</code><code>).find(</code><code>'[data-selected]'</code><code>).html();</code>
<code> </code><code>$(</code><code>'#selected'</code><code>).find(</code><code>'[data-selected]'</code><code>).remove();</code>
<code> </code><code>$(</code><code>'#other'</code><code>).append(</code><code>'<dd onclick="selKey(this)" style="margin-top:5px;">'</code><code>+html+</code><code>'</dd>'</code><code>);</code>
<code> </code><code>$(</code><code>'#other'</code><code>).find(</code><code>'[data-selected]'</code><code>).attr(</code><code>'style'</code><code>,</code><code>"margin-top:5px;"</code><code>);</code>
<code> </code><code>$(</code><code>'#other'</code><code>).find(</code><code>'[data-selected]'</code><code>).removeAttr(</code><code>"data-selected"</code><code>);</code>
<code>$(</code><code>'body'</code><code>).off(</code><code>'dblclick'</code><code>,</code><code>'#selected dd [data-id]'</code><code>);</code>
<code>$(</code><code>'body'</code><code>).off(</code><code>'dblclick'</code><code>,</code><code>'#other dd [data-id]'</code><code>);</code>
<code>$(</code><code>'body'</code><code>).on(</code><code>'dblclick'</code><code>,</code><code>'#selected dd [data-id]'</code><code>,</code><code>function</code><code>(i,ele){</code>
<code> </code><code>exitCustom();</code>
<code>});</code>
<code>$(</code><code>'body'</code><code>).on(</code><code>'dblclick'</code><code>,</code><code>'#other dd [data-id]'</code><code>,</code><code>function</code><code>(i,ele){</code>
<code> </code><code>insertCustom();</code>
<code>function</code> <code>upCustom(){</code>
<code> </code><code>var</code> <code>prev=$(</code><code>'#selected'</code><code>).find(</code><code>'[data-selected]'</code><code>).prev();</code>
<code> </code><code>if</code> <code>(html==undefined||prev.length==0) {</code>
<code> </code><code>$(prev).before(</code><code>'<dd onclick="selKey(this)" style="margin-top:5px;background-color:#B0C4DE;" data-selected="selected">'</code><code>+html+</code><code>'</dd>'</code><code>);</code>
<code>function</code> <code>downCustom(){</code>
<code> </code><code>var</code> <code>next=$(</code><code>'#selected'</code><code>).find(</code><code>'[data-selected]'</code><code>).next();</code>
<code> </code><code>if</code> <code>(html==undefined||next.length==0) {</code>
<code> </code><code>$(next).after(</code><code>'<dd onclick="selKey(this)" style="margin-top:5px;background-color:#B0C4DE;" data-selected="selected">'</code><code>+html+</code><code>'</dd>'</code><code>);</code>
<code>function</code> <code>customSub(){</code>
<code> </code><code>if</code><code>($(</code><code>'#selected'</code><code>).find(</code><code>'dd'</code><code>).length==0){</code>
<code> </code><code>var</code> <code>customs=[];</code>
<code> </code><code>$(</code><code>'#selected'</code><code>).find(</code><code>'[data-id]'</code><code>).each(</code><code>function</code><code>(i,ele){</code>
<code> </code><code>customs.push($(ele).attr(</code><code>'data-id'</code><code>)+</code><code>"_"</code><code>+$(ele).text());</code>
<code> </code><code>$.ajax({</code>
<code> </code><code>url : </code><code>"/customerbasic/saveCustomList.action"</code><code>,</code>
<code> </code><code>type : </code><code>"post"</code><code>,</code>
<code> </code><code>cache:</code><code>false</code><code>,</code>
<code> </code><code>data: {</code><code>"customs"</code><code>:customs.join(</code><code>","</code><code>)},</code>
<code> </code><code>dataType : </code><code>"json"</code><code>,</code>
<code> </code><code>success : </code><code>function</code><code>(result) {</code>
<code> </code><code>if</code> <code>(result.code=</code><code>"success"</code><code>) {</code>
<code> </code><code>bootbox.alert(</code><code>"修改自定义列成功"</code><code>);</code>
<code> </code><code>$(</code><code>'.close:visible'</code><code>).trigger(</code><code>'click'</code><code>);</code>
<code> </code><code>selectPage(</code><code>"/customerbasic/"</code><code>+$(</code><code>'[data-page]:visible'</code><code>).attr(</code><code>'data-page'</code><code>)+</code><code>".action"</code><code>);</code>
<code> </code><code>}</code><code>else</code> <code>{</code>
<code> </code><code>bootbox.alert(</code><code>"修改自定义列失败"</code><code>);</code>
<code> </code><code>}</code>
<code> </code><code>}</code>
3.java代码
action：
<code>//保存自定义列</code>
<code> </code><code>public</code> <code>void</code> <code>saveCustomList(){ </code>
<code> </code><code>try</code> <code>{ </code>
<code> </code><code>LOG.info(</code><code>"买卖客源保存自定义列进入action"</code><code>+getErpPin()+</code><code>"-------------"</code><code>); </code>
<code> </code><code>Result result = customerBasicService.saveCustomList(customs,getErpPin()); </code>
<code> </code><code>print(result.resultJson()); </code>
<code> </code><code>} </code><code>catch</code> <code>(Exception e) { </code>
<code> </code><code>e.printStackTrace(); </code>
<code> </code><code>} </code>
service：
<code>@SuppressWarnings</code><code>(</code><code>"unchecked"</code><code>)</code>
<code> </code><code>@Override</code>
<code> </code><code>public</code> <code>Result saveCustomList(String customs, String pin) {</code>
<code> </code><code>Result result = </code><code>new</code> <code>Result();</code>
<code> </code><code>//查询当前的自定义列</code>
<code> </code><code>String customStr= customListManager.queryByPin(pin);</code>
<code> </code><code>boolean</code> <code>flag = </code><code>false</code><code>;</code>
<code> </code><code>//创建自定义实体类，如果自定义列表里有当前pin的自定义列，那么就更新json窜，如果没有，就添加自定义列json串</code>
<code> </code><code>if</code> <code>(customStr== </code><code>null</code><code>) {</code>
<code> </code><code>Map<String, String> map = (Map<String, String>) JsonUtil.fromJson(</code>
<code> </code><code>SystemDict.CUSTOMLIST, Map.</code><code>class</code><code>);</code>
<code> </code><code>map.put(</code><code>"customerbasic"</code><code>, customs);</code>
<code> </code>
<code> </code><code>} </code><code>else</code> <code>{</code>
<code> </code><code>customStr, Map.</code><code>class</code><code>);</code>
<code> </code><code>//如果数据库保存成功了，那么保存redis。</code>
<code> </code><code>if</code> <code>(flag) {</code>
<code> </code><code>try</code> <code>{</code>
<code> </code><code>redisClient.setObject(pin + </code><code>"customerbasic"</code><code>, </code><code>999999</code><code>,</code>
<code> </code><code>Arrays.asList(customs.split(</code><code>","</code><code>)));</code>
<code> </code><code>result.addModel(</code><code>"code"</code><code>, </code><code>"success"</code><code>);</code>
<code> </code><code>} </code><code>catch</code> <code>(RedisAccessException e) {</code>
<code> </code><code>result.addModel(</code><code>"code"</code><code>, </code><code>"error"</code><code>);</code>
<code> </code><code>e.printStackTrace();</code>
<code> </code><code>result.addModel(</code><code>"code"</code><code>, </code><code>"dataNUll"</code><code>);</code>
<code> </code><code>return</code> <code>result;</code>
属性文件里的内容或者静态变量里面的内容:
<code>public</code> <code>static</code> <code>final</code> <code>String CUSTOMLIST=</code><code>"{"</code><code>+</code>
<code> </code><code>"\"customerbasic\":\"state_客源状态,isPublic_公私客,csCode_客源编号,name_客户姓名,orderBuilding_意向楼盘,orderHousingType_意向房源类型,createUserName_录入人,belongDept_归属人所在部门,level_客户级别,csId_身份证号,address_客户地址,industry_客户行业,belongUserName_意向归属人,entrustTime_委托时间,isUrgent_是否紧急,orderAssort_意向配套,orderBuilding_意向楼盘,orderBusinessArea_意向商圈,orderFit_意向装修,orderFloor_意向楼层,orderHouseType_意向户型,orderPurpose_意向用途,payCommissionType_支付方式,endFollowTime_最后跟进时间,orderPriceMin_意向价格最小值,orderPriceMax_意向价格最大值,orderSquareMin_意向面积最小值,orderSquareMax_意向面积最大值,viewTime_带看时间,viewNum_带看次数,showNum_看房量\","</code><code>+</code>
<code>"}"</code><code>;</code>
取值的时候只要从redis里面取出来就好了：
其中的逻辑其实并不负责，也有很多改进的地方，希望大家以后多多的提出宝贵意见。
本文转自 xinsir999 51CTO博客，原文链接：http://blog.51cto.com/xinsir/1858712，如需转载请自行联系原作者
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)