之前在项目中添加自定义列的功能，思考了很久，参考了别的项目的实现，并加上了一下特定的功能，最近的项目离需要添加自定义列的功能，效果如下
-
初始列表
2.点击自定义列按钮之后效果如图
3.用上下左右按钮进行选择，或者双击隐藏或者显示的列
4.修改完要显示的自定义列之后进行保存的效果如下
接下来上代码了：
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
|
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="customModalLabel">自定义列选择</h4>
</div>
<div class="modal-body" id="customBody">
<div class="row">
<div class="col-md-12">
<!-- BOX -->
<form id="transferForm" class="form-horizontal" role="form" action="#" validation="validation">
<div class="box border">
<div class="box-title">
<h4><i class="fa fa-columns"></i><span class="hidden-inline-mobile">自定义列选择</span></h4>
</div>
<div class="box-body">
<div class="row">
<div class="col-sm-4">
<div style="width:150px;height:400px;border:1.5px solid #2d6ca2;margin-left:50px;overflow:auto;">
<dl id="other">
#foreach($other in $otherMap.entrySet())
<dd style="margin-top:5px;" onclick="selKey(this);">
<a href="javascript:;" data-id="$!{other.key}">$!{other.value}</a>
</dd>
#end
</dl>
</div>
</div>
<div class="col-sm-2">
<div style="position:absolute; top:200px;margin-left:31px">
<a href="javascript:void(0);" class="btn btn-primary" onclick="exitCustom();"><i class="fa fa-arrow-circle-left"></i></a>
</div>
<div style="position:absolute; top:250px;margin-left:31px">
<a href="javascript:void(0);" class="btn btn-primary" onclick="insertCustom();"><i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<div class="col-sm-3">
<div style="width:150px;height:400px;border:1.5px solid #2d6ca2;overflow:auto;">
<dl id="selected">
#foreach($selected in $selectedMap.entrySet())
<dd style="margin-top:5px;" onclick="selKey(this);">
<a href="javascript:;" data-id="$!{selected.key}">$!{selected.value}</a>
</dd>
#end
</dl>
</div>
</div>
<div class="col-sm-2">
<div style="position:absolute; top:200px;margin-left:31px">
<a href="javascript:void(0);" class="btn btn-primary" onclick="upCustom();"><i class="fa fa-arrow-circle-up"></i></a>
</div>
<div style="position:absolute; top:250px;margin-left:31px">
<a href="javascript:void(0);" class="btn btn-primary" onclick="downCustom();"><i class="fa fa-arrow-circle-down"></i></a>
</div>
</div>
</div>
</div>
<span style="padding-left:110px;">隐藏</span> <span style="padding-left:220px;">显示</span>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="customSub()">保存</button>
</div>
</div>
</form>
<!-- /BOX -->
</div>
</div>
</div>
</div>
<script type="text/javascript" src="$jsModule.getTarget("")/style/js/jlj/customerbasic/custom.js"></script>
|
2.js代码部分如下
|
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
function selKey(label){
$(label).siblings().each(function(i,ele){
$(ele).attr("style","margin-top:5px;");
$(ele).removeAttr("data-selected");
});
$(label).attr("style","margin-top:5px;background-color:#B0C4DE;");
$(label).attr("data-selected","selected");
}function insertCustom(){
var html=$('#other').find('[data-selected]').html();
if (html==undefined) {
return;
}
$('#other').find('[data-selected]').remove();
$('#selected').append('<dd οnclick="selKey(this)" style="margin-top:5px;">'+html+'</dd>');
$('#selected').find('[data-selected]').attr('style',"margin-top:5px;");
$('#selected').find('[data-selected]').removeAttr("data-selected");
}function exitCustom(){
if($('#selected').find('dd').length==1){
bootbox.alert("至少有一个列需要显示");
return;
}
var html=$('#selected').find('[data-selected]').html();
if (html==undefined) {
return;
}
$('#selected').find('[data-selected]').remove();
$('#other').append('<dd οnclick="selKey(this)" style="margin-top:5px;">'+html+'</dd>');
$('#other').find('[data-selected]').attr('style',"margin-top:5px;");
$('#other').find('[data-selected]').removeAttr("data-selected");
}$('body').off('dblclick','#selected dd [data-id]');
$('body').off('dblclick','#other dd [data-id]');
$('body').on('dblclick','#selected dd [data-id]',function(i,ele){
exitCustom();
});$('body').on('dblclick','#other dd [data-id]',function(i,ele){
insertCustom();
});function upCustom(){
var html=$('#selected').find('[data-selected]').html();
var prev=$('#selected').find('[data-selected]').prev();
if (html==undefined||prev.length==0) {
return;
}
$('#selected').find('[data-selected]').remove();
$(prev).before('<dd οnclick="selKey(this)" style="margin-top:5px;background-color:#B0C4DE;" data-selected="selected">'+html+'</dd>');
}function downCustom(){
var html=$('#selected').find('[data-selected]').html();
var next=$('#selected').find('[data-selected]').next();
if (html==undefined||next.length==0) {
return;
}
$('#selected').find('[data-selected]').remove();
$(next).after('<dd οnclick="selKey(this)" style="margin-top:5px;background-color:#B0C4DE;" data-selected="selected">'+html+'</dd>');
}function customSub(){
if($('#selected').find('dd').length==0){
bootbox.alert("至少有一个列需要显示");
return;
}
var customs=[];
$('#selected').find('[data-id]').each(function(i,ele){
customs.push($(ele).attr('data-id')+"_"+$(ele).text());
});
$.ajax({
url : "/customerbasic/saveCustomList.action",
type : "post",
cache:false,
data: {"customs":customs.join(",")},
dataType : "json",
success : function(result) {
if (result.code="success") {
bootbox.alert("修改自定义列成功");
$('.close:visible').trigger('click');
selectPage("/customerbasic/"+$('[data-page]:visible').attr('data-page')+".action");
}else {
bootbox.alert("修改自定义列失败");
}
}
});
} |
3.java代码
action：
|
1
2
3
4
5
6
7
8
9
10
|
//保存自定义列 public void saveCustomList(){
try {
LOG.info("买卖客源保存自定义列进入action"+getErpPin()+"-------------");
Result result = customerBasicService.saveCustomList(customs,getErpPin());
print(result.resultJson());
} catch (Exception e) {
e.printStackTrace();
}
}
|
service：
|
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
|
@SuppressWarnings("unchecked")
@Override
public Result saveCustomList(String customs, String pin) {
Result result = new Result();
//查询当前的自定义列
String customStr= customListManager.queryByPin(pin);
boolean flag = false;
//创建自定义实体类，如果自定义列表里有当前pin的自定义列，那么就更新json窜，如果没有，就添加自定义列json串
if (customStr== null) {
Map<String, String> map = (Map<String, String>) JsonUtil.fromJson(
SystemDict.CUSTOMLIST, Map.class);
map.put("customerbasic", customs);
} else {
Map<String, String> map = (Map<String, String>) JsonUtil.fromJson(
customStr, Map.class);
map.put("customerbasic", customs);
}
//如果数据库保存成功了，那么保存redis。
if (flag) {
try {
redisClient.setObject(pin + "customerbasic", 999999,
Arrays.asList(customs.split(",")));
result.addModel("code", "success");
} catch (RedisAccessException e) {
result.addModel("code", "error");
e.printStackTrace();
}
} else {
result.addModel("code", "dataNUll");
}
return result;
}
|
属性文件里的内容或者静态变量里面的内容:
|
1
2
3
|
public static final String CUSTOMLIST="{"+
"\"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_看房量\","+
"}";
|
取值的时候只要从redis里面取出来就好了：
其中的逻辑其实并不负责，也有很多改进的地方，希望大家以后多多的提出宝贵意见。
本文转自 xinsir999 51CTO博客，原文链接：http://blog.51cto.com/xinsir/1858712，如需转载请自行联系原作者