dist/
├── index.umd.js (UMD)
└── style.min.css (CSS, compressed)
- jQuery
- Bootstrap
- jquery-validate
In browser:
<script src="https://code.jquery.com/jquery-1.11.2.min.js "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.min.js"></script>
let myTree = new OrgTreeSelect(element, (options = {}));
-
element
- Type:
String
- Type:
-
options (optional)
- Type:
Object
- 可用的 options.
- Type:
<div id="tree"></div>
// 宣告 orgTreeSelect
let myTree = new OrgTreeSelect("#tree");
// set options
myTree.setOptions({
data: _data,
texts: {
treeTitle: "部門列表",
selectText: "請選擇",
},
showAdd: true,
showEdit: true,
showDelete: true,
showCheckbox: true,
onEdit: (node) => {
myTree.openEditDialog({
mode: 'edit',
title: "編輯",
node: node,
texts: {
id: "Id",
text: "內容",
save: "儲存",
close: "取消",
error_null: "請填寫此選項。"
},
onSave: function(dialog, formData) {
node.text = formData.text;
let isSuccess = myTree.updateNode(node);
return isSuccess;
},
});
},
// onAdd methods
onAdd: (node) => {
myTree.openEditDialog({
mode: 'add',
title: "新增",
node: node,
texts: {
id: "Id",
text: "內容",
save: "儲存",
close: "取消",
error_invalid: "此Id已重複使用",
error_null: "請填寫此選項。"
},
onSave: function(dialog, formData) {
let newNode = {
id: formData.nid,
text: formData.text,
nodes: []
}
let parent = myTree.getNode(node.id);
let isSuccess = myTree.addNode(parent, newNode);
return isSuccess;
},
});
},
// onDelete methods
onDelete: (node) => {
myTree.openDeleteDialog({
mode: 'delete',
title: "刪除",
node: node,
texts: {
id: "Id",
text: "內容",
close: "取消",
delete: "刪除"
},
onSave: function(node) {
let isSuccess = myTree.deleteNode(node);
return isSuccess;
},
});
}
});
-
Type:
Array
, an Array of node objects -
Default:
[]
-
note: node object:
{id: str, text: str, nodes: [] }
至少要有id和text兩個key,子物件要放在nodes裡面。 如果傳入的data有這三項key以外的key,在建構tree時會一律放在
except
的key下面。
- Type:
String
- Default:
null
- note: 表單的標題
- Type:
String
- Default:
null
- note: 表單的標題
- Type:
Boolean
- Default:
False
- note: 是否顯示 [新增 icon]
- Type:
Boolean
- Default:
False
- note: 是否顯示 [編輯 icon]
- Type:
Boolean
- Default:
False
- note: 是否顯示 [刪除 icon]
- Type:
Boolean
- Default:
True
- note: 是否顯示 [Ckeck box icon]
- Type:
String
- Default:
"#2796DB"
- note: selected node的背景顏色
- Type:
Function
- Default:
null
- note: 新增子 node
- Type:
Function
- Default:
null
- note: 編輯 node
- Type:
Function
- Default:
null
- note: 刪除 node
Set Option to Tree
- options
- Type:
object
- Type:
Select Node by Id
- id
-Type:
String
Unselect Node by Id
- id
-Type:
String
Get Node Object by Id
- return
- Type:
Object
- Type:
Get Parent Node Object by Id
- return
- Type:
Object
- Type:
Get All Sibling Node Object by Id
- return
- Type:
Array
- note: an array of node object
- Type:
Get All Child Node Object by Id
- return
- Type:
Array
- note: an array of node object
- Type:
Get Selected Tags, Ingore Mother-Child Repeataion
- return
- Type:
Array
- note: an array of node object
- Type:
Open Edit/Add Dialog
-
options
- Type:
Object
- note:
{ mode: ['edit' | 'add'], title: {String}, node: { id: {String}, text: {String}, nodes: {Array} }, texts: { id: {String}, text: {String}, save: {String}, close: {String}, error_invalid: {String}, error_null: {String} } valid: { rules: { [name]: {String}, // nid_edit: "required", // text_edit: "required" }, messages: { [name]: {String}, // nid_edit: newOpt.texts.error_null, // text_edit: newOpt.texts.error_null } } onSave: {function} }
- Type:
Open Delete Dialog
-
options
- Type:
Object
- note:
{ mode: ['delete'], title: {String}, node: { id: {String}, text: {String}, nodes: {Array} }, texts: { id: {String}, text: {String}, delete: {String}, close: {String} } onSave: {function} }
- Type:
Update Node / 編輯此node
- node
- Type:
Object
- note: 傳入編輯後的新資料,並依照固定的node id 去找到舊的node進行更新
- Type:
- return
- Type:
Boolean
- note: whether this update is successful or not
- Type:
Add Node / 在parent node 下新增 new Node
- parent
- Type:
Object
- note: the node that will be added to
- Type:
- newNode
- Type:
Object
- note: the new node
- Type:
- return
- Type:
Boolean
- note: whether this addition is successful or not
- Type:
Delete Node / 刪除此node
- node
- Type:
Object
- Type:
- return
- Type:
Boolean
- note: whether this deletion is successful or not
- Type: