下拉选择树组件

字数： 3k字   |    阅读时长： 17min  |   阅读量： 次

前提：本组件是根据项目进行开发，所以在技术选择上有相对固定的选择，当然大体使用都差不多。

需求

可以普通下拉，也可以选择树状下拉

技术

  1. JavaScript 、JQuery (Ajax) 、Mustache 、Layui.css
  2. Vue 、 httpVueLoader 、axios 、Layui.css

方案1

代码如下：

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
// 下拉树
var Selectree = function () {
}
Selectree.prototype = {
    /**
     * 下拉树：是否是树、下拉数据、按钮名称、自己属性名称(每个节点的唯一标识)、[辨识父节点属性名称、根节点属性]
     * @param el 例如：'#gatelist_page'
     * @param para  例如：{ 'multi': Boolean, 'data': Array, 'name': String, 'keyName': String, 'parentName': String,  'rootId': String }
     * @param callback  例如： function (item: obj){ //  }
     */
    render: function (el, para, callback) {
        var _this = this
        var temp = '<div class="select-tree input-group input-group-sm col-lg-3 col-sm-3 col-xs-3">{{{getName}}}'+
            '<div class="form-control select-list">'+
            '<div class="input"><span class="fa fa-caret-down"></span></div>'+
            '<div class="list selectree" style="display: none;">{{{getList}}}'+
            '</div>'+
            '</div>'+
            '</div>'
        var treeData = []
        if (!para.name) {
            para.name = ''
        }
        if (!para.multi) {
            para.multi = false
        }
        // 渲染下拉 html
        if (para.multi) {
            var pKey = para.parentName
            var key = para.keyName
            // 需要将 array 的数据转化成 children-parent 的格式
            var traverse = function (id, list) {
                var arr = [];
                for (var i = 0; i < list.length; i++) {
                    if (String(list[i][pKey]) === id) {
                        list[i].children = traverse(String(list[i][key]), list);
                        arr.push(list[i])
                    }
                }
                return arr
            };
            treeData = traverse(para.rootId, para.data);
        }
        var view = Mustache.render(temp, {
            getName: function () {
                if (para.name.length > 0) {
                    return '<span class="input-group-btn"><span class="btn choose-gate-Adapter disabled opacity-1">' + para.name + '</span></span>'
                }
                return ''
            },
            getList: function () {
                if (para.multi) {
                    var tmp = '';
                    var ren = function (list) {
                        var temp = '<div class="list-item">'+
                            '<span class="fa {{downClass}}"></span>'+
                            '<span class="item-name" data-name="{{name}}" data-id="{{id}}"><span class="fa {{fileClass}}"></span>{{name}}</span>'+
                            '<div class="list-children" style="display: none;">'+
                            '<div class="list">'
                        var view = ''
                        for (var i = 0; i < list.length; i++) {
                            var hasChild = false
                            var item = list[i]
                            var itemView = ''
                            if (item.children && item.children.length > 0) {
                                hasChild = true
                            }
                            itemView = Mustache.render(temp, {
                                name: item.name,
                                id: item[para.keyName],
                                downClass: function () {
                                    if (hasChild) {
                                        return 'fa-angle-right'  // 展开 'fa-angle-down'
                                    }
                                    return ''
                                },
                                fileClass: function () {
                                    if (hasChild) {
                                        return 'fa-folder-o'  // 展开 'fa-folder-open-o'
                                    }
                                    return 'fa-file'
                                }
                            })
                            view += itemView
                            if (hasChild) {
                                view += ren(item.children)
                            }
                            view += '</div>'+
                                '</div>'+
                                '</div>';
                        }
                        return view
                    };
                    tmp += ren(treeData)
                    return tmp
                } else {
                    var tmp = '';
                    for (var i = 0; i < para.data.length; i++) {
                        tmp += '<li class="list-item" data-id="'+ para.data[i][para.keyName] +'">' + para.data[i].name + '</li>'
                    }
                    return tmp
                }
            }
        })
        $(el).html(view)

        // 绑定点击显示与隐藏事件
        $(el + ' .select-tree .input').unbind()
        $(el + ' .select-tree .input').bind('click', function () {
            $(el + ' .select-tree .selectree').show()
        });
        $(document).click(function (e) {
            if (!(e.target === $(el + ' .select-tree .selectree')[0] ||
                e.target === $(el + ' .select-tree .input')[0] ||
                e.target.className.indexOf('list-item') !== -1 ||
                e.target.className.indexOf('fa') !== -1 ||
                e.target.className.indexOf('item-name') !== -1 ||
                e.target.className.indexOf('list-children') !== -1)) {
                $(el + ' .select-tree .selectree').hide()
            }
        })
        iconShowClick();
        iconHideClick();
        function iconShowClick() {
            $(el + ' .selectree .list-item .fa-angle-right').unbind()
            $(el + ' .selectree .list-item .fa-angle-right').bind('click', function () {
                $(this).nextAll('.list-children').show()
                $(this).next().children().removeClass('fa-folder-o')
                $(this).next().children().addClass('fa-folder-open-o')
                $(this).removeClass('fa-angle-right')
                $(this).addClass('fa-angle-down')
                iconHideClick()
            })
        }
        function iconHideClick() {
            $(el + ' .selectree .list-item .fa-angle-down').unbind()
            $(el + ' .selectree .list-item .fa-angle-down').bind('click', function () {
                $(this).nextAll('.list-children').hide()
                $(this).next().children().addClass('fa-folder-o')
                $(this).next().children().removeClass('fa-folder-open-o')
                $(this).removeClass('fa-angle-down')
                $(this).addClass('fa-angle-right')
                iconShowClick()
            })
        }

        // 绑定选择点击事件： 回显
        if (para.multi) {
            $(el + ' .selectree .list-item .item-name').unbind()
            $(el + ' .selectree .list-item .item-name').bind('click', function () {
                var id = $(this).data('id');
                var selectItem = null;
                $(el + ' .select-tree .input').html($(this).data('name') + '<span class="fa fa-caret-down"></span>')
                for (var i = 0; i < para.data.length; i++) {
                    console.log(para.data[i])
                    if (String(para.data[i][para.keyName]) === String(id)) {
                        selectItem = para.data[i]
                        break
                    }
                }
                callback(selectItem)
            })
        } else {
            $(el + ' .selectree .list-item').unbind()
            $(el + ' .selectree .list-item').bind('click', function () {
                var id = $(this).data('id');
                var selectItem = null;
                $(el + ' .select-tree .input').html($(this).html() + '<span class="fa fa-caret-down"></span>')
                for (var i = 0; i < para.data.length; i++) {
                    if (String(para.data[i][para.keyName]) === String(id)) {
                        selectItem = para.data[i]
                        break
                    }
                }
                callback(selectItem)
            })
        }

        // 回调函数
    }
}

使用示例：

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
<div id="unitSelectTree"></div>
<div id="unitSelectTree1"></div>
<script src="../bander/selectTree.js"></script>
<script>
    // 调用下拉树
    var select = new Selectree();
    select.render('#unitSelectTree', {
        'multi': true,
        'data': [
            {
                name: '全国',
                pid: 'ROOT',
                id: '1'
            },{
                name: '江苏省',
                pid: '1',
                id: '2'
            },{
                name: '北京市',
                pid: '1',
                id: '3'
            },{
                name: '上海市',
                pid: '1',
                id: '4'
            },{
                name: '南京市',
                pid: '2',
                id: '5'
            },{
                name: '浦口区',
                pid: '5',
                id: '6'
            }],
        'name': '选择组织',
        'parentName': 'pid',
        'keyName': 'id',
        'rootId': 'ROOT'
    }, function (item) {
        console.log('你选择了', item)
    });
    select.render('#unitSelectTree1', {
        'data': [
            {
                name: '',
                id: 0,
                pid: 'ROOT',
            },{
                name: '香蕉',
                id: 1,
                pid: 'ROOT',
            },{
                name: '梨',
                id: 2,
                pid: 'ROOT',
            },{
                name: '苹果',
                id: 3,
                pid: 'ROOT',
            },{
                name: '柚子',
                id: 4,
                pid: 'ROOT',
            },{
                name: '火龙果',
                id: 5,
                pid: 'ROOT',
            }],
        'keyName': 'id',
    }, function (item) {
        console.log('你选择了', item)
    })
</script>

方案2

selectTree.vue 代码如下：

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<template>
    <div class="select-tree input-group input-group-sm col-lg-3 col-sm-3 col-xs-3">
        <span class="input-group-btn" v-if="name.length > 0">
            <span class="btn choose-gate-Adapter disabled opacity-1">{{name}}</span>
        </span>
        <div v-clickoutside="handleClose" class="form-control select-list">
            <div class="input" @click="display = true">{{selectItem.name}}<span class="fa fa-caret-down"></span></div>
            <list v-if="multi & display" :list="treeData" @click="handleClick" class="selectree"></list>
            <ul v-if="!multi & display" class="selectree list">
                <li class="list-item" v-for="(item, index) in data" :key="index" @click="handleClick(item)">{{item.name}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    // Vue.component('list', {
    //     template: '<div class="list"><div class="list-item" v-if="list.length" v-for="(item, index) in list" :key="index">' +
    //         '<span class="item-name" @click="handleClick(item)">{{item.name}}</span>' +
    //         '<div class="list-children">'+
    //         '<list :list="item.children" @click="click"></list>' +
    //         '</div>' +
    //         '</div></div>',
    //     props: {
    //         list: Array
    //     },
    //     mounted: function () {
    //         console.log('Child mount ')
    //     },
    //     methods: {
    //         handleClick: function (item) {
    //             this.$emit('click', item)
    //         },
    //         click: function (item) {
    //             this.$emit('click', item)
    //         }
    //     }
    // });
    var clickoutside = {
        // 初始化指令
        bind: function(el, binding, vnode) {
            function documentHandler(e) {
                // 这里判断点击的元素是否是本身，是本身，则返回
                if (el.contains(e.target)) {
                    return false;
                }
                // 判断指令中是否绑定了函数
                if (binding.expression) {
                    // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                    binding.value(e);
                }
            }
            // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
            el.__vueClickOutside__ = documentHandler;
            document.addEventListener('click', documentHandler);
        },
        update: function() {},
        unbind: function(el, binding) {
            // 解除事件监听
            document.removeEventListener('click', el.__vueClickOutside__);
            delete el.__vueClickOutside__;
        },
    };
    module.exports = {
        data: function () {
            return {
                selectItem: {
                    name: ''
                },
                selectIndex: -1,
                treeData: [],
                display: false
            }
        },
        props: {
            multi: Boolean,
            /**
             * [{
             *   name: '',
             *   value: ''
             * }]
             */
            data: Array,
            name: String,
            parentName: String,
            keyName: String,
            rootId: String
        },
        directives: { 'clickoutside': clickoutside },
        components: {
            'list': {
                name: 'list',
                template: '<div class="list"><div class="list-item" v-for="(item, index) in list" :key="index">' +
                    '<span :class="classObj" @click="changeShow" v-if="item.children.length"></span>' +
                    '<span class="item-name" @click="handleClick(item)"><span :class="item.children.length > 0 ? classObj1 : classObj2"></span>{{item.name}}</span>' +
                    '<div class="list-children" v-if="item.children.length & show">'+
                    '<list :list="item.children" @click="click"></list>' +
                    '</div>' +
                    '</div></div>',
                props: {
                    list: Array
                },
                data: function () {
                    return {
                        show: false,
                        classObj: {
                            'fa': true,
                            'fa-angle-right': true,
                            'fa-angle-down': false
                        },
                        classObj1: {
                            'fa': true,
                            'fa-folder-o': true,
                            'fa-folder-open-o': false
                        },
                        classObj2: {
                            'fa': true,
                            'fa-file': true
                        }
                    }
                },
                mounted: function () { },
                methods: {
                    handleClick: function (item) {
                        this.$emit('click', item)
                    },
                    click: function (item) {
                        this.$emit('click', item)
                    },
                    changeShow: function () {
                        this.show = !this.show;
                        if (this.show) {
                            this.classObj['fa-angle-right'] = false;
                            this.classObj['fa-angle-down'] = true;
                            this.classObj1['fa-folder-o'] = false;
                            this.classObj1['fa-folder-open-o'] = true
                        } else {
                            this.classObj['fa-angle-right'] = true;
                            this.classObj['fa-angle-down'] = false;
                            this.classObj1['fa-folder-open-o'] = false;
                            this.classObj1['fa-folder-o'] = true
                        }
                    }
                }
            }
        },
        methods: {
            handleClick: function (item) {
                this.selectItem = item
                this.$emit('change', this.selectItem)
            },
            handleClose: function (e) {
                this.display = false;
            }
        },
        mounted: function () {
            if (this.multi) {
                var pKey = this.parentName
                var key = this.keyName
                // 需要将 array 的数据转化成 children-parent 的格式
                var traverse = function (id, list) {
                    var arr = [];
                    for (var i = 0; i < list.length; i++) {
                        if (String(list[i][pKey]) === id) {
                            list[i].children = traverse(String(list[i][key]), list);
                            arr.push(list[i])
                        }
                    }
                    return arr
                };
                this.treeData = traverse(this.rootId, this.data);
            }
        }
    }
</script>

<style>
    .select-tree {
        margin-top: 20px;
        margin-left: 10px;
    }

    .select-tree > .form-control {
        width: 300px;
    }

    .select-tree .btn.opacity-1 {
        opacity: 1;
    }

    .select-tree .select-list {
        position: relative;
        z-index: unset;
    }

    .select-tree .select-list > .input {
        border-width: 0;
        height: calc(100% + 10px);
        width: calc(100% + 20px);
        margin-left: -10px;
        margin-top: -5px;
        padding: 5px 10px;
    }

    .select-tree .select-list > .input > .fa {
        float: right;
        margin-top: 2px;
        font-size: 14px;
    }

    .select-tree .select-list > .selectree {
        position: absolute;
        top: 28px;
        left: 10px;
        z-index: 666666666;
        width: calc(100% + 2px);
        margin-left: -11px;
        padding: 10px 15px;
        border: 1px solid #d5d5d5;
        background-color: #fff;
    }

    .select-tree .list .list-item .fa {
        margin-right: 5px;
        font-size: 16px;
    }

    .select-tree .list .list-item .item-name {
        display: inline-block;
        margin: 5px 0;
    }

    .select-tree .list .list-item .list-children {
        margin-left: 16px;
    }
</style>

selectTree.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
Vue.use(httpVueLoader);

var Selectree = function () {}
Selectree.prototype = {
    /**
     * 下拉树：是否是树、下拉数据、按钮名称、自己属性名称(每个节点的唯一标识)、[辨识父节点属性名称、根节点属性]
     * @param el 例如：'#gatelist_page'
     * @param para  例如：{ 'multi': Boolean, 'data': Array, 'name': String, 'keyName': String, 'parentName': String,  'rootId': String }
     * @param callback  例如： function (item: obj){ //  }
     */
    render: function (element, para, callback) {
        var obj = {
            data: para.data,
            name: para.name || ''
        }
        if (!para.multi) {
            $(element).html('<selectree :multi="false" :data="data" :name="name" @change="change"></selectree>')
        } else {
            $(element).html('<selectree :multi="true" :data="data" :name="name" @change="change"' +
            ' parent-name="parentName" key-name="keyName" root-id="rootId"></selectree>')
            obj.parentName = para.parentName
            obj.keyName = para.keyName
            obj.rootId = para.rootId
        }
        new Vue({
            el: element,
            data: function () {
                return obj
            },
            components: {
                // 将组建加入组建库
                'selectree': httpVueLoader('../components/selectTree.vue')  // js 调用的路径需要注意
            },
            methods: {
                /**
                 * 获取数据表数据
                 * @param page 当前显示的页码数
                 * @param limit 每页多少条数据
                 */
                change: function (item) {
                    callback(item)
                }
            }
        })
    }
}

使用示例（同上面，就不重复了）

本文作者： jeneen
发布时间： 2021-10-11
最后更新： 2023-05-09
本文标题： 下拉选择树组件
本文链接： https://zx1001011.github.io/2021/10/11/pluginofSelectTree/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！
知识共享许可协议
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家