droptree.js
4.67 KB
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
// ***********************************************************************
//单击文本框弹出的选择列表,可以多选。调用：
//var droptree = layui.droptree("/base/UserSession/GetOrgs", "#Organizations", "#OrganizationIds");
// droptree.render();
// ***********************************************************************
layui.define(['jquery', 'layer'], function (exports) {
var $ = layui.jquery;
var layer = layui.layer;
var zTreeObj;
var inst; //droptree实体
//显示下拉菜单
var showMenu = function () {
$("#menuContent").css({
left: "10px",
top: $(inst.config.nameDOM).outerHeight() + "px"
}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
};
//隐藏下拉菜单
var hideMenu = function () {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
//滚动条下拉
function onBodyDown(event) {
if (!(event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
hideMenu();
}
}
//点击tree
var onClick = function (e, treeId, treeNode) {
var nodes = zTreeObj.getSelectedNodes();
for (var i = 0, l = nodes.length; i < l; i++) {
$(inst.config.nameDOM).val(nodes[i].Name);
$(inst.config.idDOM).val(nodes[i].Id);
break;
}
$(inst.config.idDOM).change(); //如果不调change，VUE不会监听idDom
hideMenu();
}
//tree复选框
var onCheck = function (e, treeId, treeNode) {
var nodes = zTreeObj.getCheckedNodes(true);
var ids = nodes.map(function (e) { return e.Id; }).join(",");
var names = nodes.map(function (e) { return e.Name; }).join(",");
$(inst.config.nameDOM).val(names);
$(inst.config.idDOM).val(ids);
$(inst.config.idDOM).change(); //如果不调change，VUE不会监听idDom
}
//构造器
var Class = function (options) {
var that = this;
that.config = $.extend({}, that.config, options);
//上级机构选择框
$(that.config.nameDOM).on("click", function () {
that.render();
});
};
//默认配置
Class.prototype.config = {
text: 'Name',
key: 'Id',
parentKey: 'ParentId',
selectedMulti: true //默认是多选
};
//加载数据
Class.prototype.render = function () {
var that = this;
var setting = {
view: { selectedMulti: that.config.selectedMulti },
check: {
enable: that.config.selectedMulti,
chkStyle: "checkbox",
chkboxType: { "Y": "", "N": "" } //去掉勾选时级联
},
data: {
key: {
name: that.config.text,
title: that.config.text
},
simpleData: {
enable: true,
idKey: that.config.key,
pIdKey: that.config.parentKey,
rootPId: 'null'
}
},
callback: {
onClick: onClick,
onCheck: onCheck
}
};
var index = layer.load();
$.getJSON(this.config.url,
{
page: 1, rows: 10000
},
function (json) {
layer.close(index);
if (json.length == 0) {
$(that.config.nameDOM).val('');
$(that.config.idDOM).val('');
return;
}
zTreeObj = $.fn.zTree.init($("#org"), setting, json);
that.setCheck();
zTreeObj.expandAll(true);
showMenu();
});
}
//设置初始选中的值
Class.prototype.setCheck = function () {
zTreeObj.checkAllNodes(false);
var value = $(this.config.idDOM).val();
if (value == undefined) return;
var nodeids = value.split(",");
$.each(nodeids,
function () {
var node = zTreeObj.getNodeByParam("Id", this, null);
if (node != null) {
zTreeObj.checkNode(node, true, false);
}
});
}
exports('droptree', function (url, name, id, selectedMulti) {
var options = {
nameDOM: name, //显示的文本框ID，如："#catetoryName"
idDOM: id, //隐藏的文本框，如："#categoryId"
url: url,
selectedMulti: selectedMulti //是否为多选
}
inst = new Class(options);
return inst;
});
});