<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=)