开发者社区> 余二五> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

自定义列

简介:
+关注继续查看

之前在项目中添加自定义列的功能,思考了很久,参考了别的项目的实现,并加上了一下特定的功能,最近的项目离需要添加自定义列的功能,效果如下

  1. 初始列表

wKiom1fzbGbi3ee0AABV6AY_APk603.png-wh_50

2.点击自定义列按钮之后效果如图

wKiom1fzbKqjAui_AAB8LUHyZoA056.png-wh_50


3.用上下左右按钮进行选择,或者双击隐藏或者显示的列

wKioL1fzbXuxC9dQAACfI07Oifs278.png-wh_50


4.修改完要显示的自定义列之后进行保存的效果如下

wKiom1fzbb7zB5PfAABIa8tTnQ8816.png-wh_50


接下来上代码了:


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">&times;</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 onclick="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 onclick="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 onclick="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 onclick="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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
三、自定义函数
自定义函数就是我们自己定义的函数,在PHP中自定义函数格式如下: function funname(arg1, arg2, arg3......){ //TODO return values; }   view source print? 01.<?php  02.function f
791 0
自定义的弹出框类
public class MainActivity extends Activity { //自定义的弹出框类 SelectPicPopupWindow menuWindow; @Override public void onCreate(Bundle savedInstanceState) { super.onCrea
839 0
宏定义
/* ============================================================================ Name : TestDefine.
418 0
自定义滚动条
DOCTYPE> JavaScript 优雅,是一种岁月,它是历经生命种种而呈现出的一种淡若不惊,褪去了少时的稚嫩,而呈现出的一种成熟的韵味。一个优雅的人,一定有着独特的魅力,和饱满的,恬淡而丰盈的灵魂。
784 0
自定义异常
在某些应用中,编程人员可以根据程序的需要创建自己的异常类和异常对象,用来处理程序中特定的逻辑运行错误或异常
0 0
自定义大头针
自定义大头针
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载