基于citypicker做四级联动数据异步表单筛选

基于citypicker做四级联动数据异步表单筛选

参照、修改citypicker做四级联动,数据异步获取,动态赋值。

使用方法
在页面引入CSS样式

1
<link type="text/css" rel="stylesheet" href="dist/droppicker.min.css">

Javascript代码

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
$('#div').droppicker({
    placeholder:"请选择文件1231位置",
    data: function (type, code, callback) {
        console.log(type);
        console.log(code);
        // 有需要可换成 ajax... 可根据参数动态获取,格式要按返回
        if (type == 'droplevel1') {
            return callback([{
                code: "89",
                name: "财务部"
            }, {
                code: "90",
                name: "技术部"
            }, {
                code: "91",
                name: "总经理室"
            }]);
        } else if (type == 'droplevel2') {
            return callback([{
                code: "1",
                name: "文件柜11"
            }, {
                code: "2",
                name: "文件柜12"
            }, {
                code: "3",
                name: "文件柜13"
            }]);
        } else if (type == 'droplevel3') {
            return callback([{
                code: "1",
                name: "21文件箱"
            }, {
                code: "2",
                name: "22文件箱"
            }, {
                code: "3",
                name: "23文件箱"
            }]);
        } else if (type == 'droplevel4') {
            return callback([{
                code: "1",
                name: "31文件格"
            }, {
                code: "2",
                name: "32文件格"
            }, {
                code: "3",
                name: "33文件格"
            }]);
        }
    },
    droplevel1: {name: '财务部', code: '89'},// 修改时传入
    droplevel2: {name: '文件柜12', code: '2'},// 修改时传入
    droplevel3: {name: '22文件箱', code: '2'},// 修改时传入
    droplevel4: {name: '33文件格', code: '3'},// 修改时传入
    callback: function (data) {
        // 数据回调
        console.log(data);
    }
});

function getcode() {
    // 获取哪个传那个 droplevel1 droplevel2 droplevel3 droplevel4
    alert($('#div').data('droppicker').getCode('droplevel4'));
}

function destroy() {
    $('#div').droppicker('destroy');
}

function reset() {
    $('#div').droppicker('reset');
}
当前内容只有登录了才能查看,如果您已经注册,请登录
4

发表评论