JsTree 運用總結
JsTree
在運用
JsTree 的過程當中，因項目須要增加按鈕來掌握樹節點的提交
為 JStree 綁定自定義事宜
1. JS 代碼
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox-content">
<div id="typeTree"></div>
</div>
<div class="form-group">
<div class="col-sm-12 col-sm-offset-12">
<button id="btn-tree" type="submit" class="btn btn-primary pull-right">提交</button>
</div>
</div>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript">
$(document).ready(function() {
getTreeData()
});
function getTreeData() {
$.ajax({
type : "GET",
url : contpath+"equip/eqType/tree",
success : function(tree) {
loadTree(tree);
}
});
}
function loadTree(tree) {
$('#typeTree').jstree({
'core' : {
'multiple': false, // 單選和複選
'data' : tree
},
'checkbox' : {
// "keep_selected_style": false, // 是不是默許選中
// "tie_selection": false,
"three_state": false // 父子級別級聯挑選
},
"plugins" : [ "search","checkbox"]
});
$('#typeTree').jstree().open_all();
}
// 點擊按鈕提交分類樹選中節點
$('#btn-tree').on('click',function(){
var result = [];
// 獵取一切的已選中的節點信息，假如要取得悉數信息則須要開啟：full:true，直接挪用get_checked()，則只能夠獵取節點的id
var checkedVal = $('#typeTree').jstree(true).get_checked([{full:true}]);
for(var i = 0;i<checkedVal.length;i++){
// 將節點的id和text屬性值對應放到數組中
result.push({id:checkedVal[i].id,text:checkedVal[i].text});
}
parent.loadEqType(parent.treeVal,result); // 捕捉parent.treeVal，即點擊的文本框
var index = parent.layer.getFrameIndex(window.name); // 獵取窗口索引
parent.layer.close(index); //封閉窗口
});
</script>
</body>
</html>2. 頁面挪用
var treeVal;
// 引入分類樹
$('.ibox').on('click','.eqTypeName',function(){
treeVal = $(this);
layer.open({
type:2,
title:"挑選分類",
area : [ '300px', '450px' ],
content:contpath+"equip/eqType/typeTreeView"
})
});
// 分類樹多選
// treeVal 是經由過程 layer 的 parent 通報過來的
function loadEqType(treeVal,result){
//$("#eqType").val(typeId);
// 重置文本框
treeVal.val('');
// 選中的節點數為1
if(result.length == 1){
treeVal.val(result[0].text);
}else{
// 選中的節點數若大於1，用','將字符分開
for(var i = 0;i<result.length;i++){
var selectAll = result[i].text;
for(var j = 0;j < i;j++){
selectAll = treeVal.val() + ',' + result[i].text;
}
treeVal.val(selectAll);
}
}
}JStree 原生事宜
1. 當挑選轉變時觸發
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox-content">
<div id="typeTree"></div>
</div>
<div class="form-group hidden">
<div class="col-sm-12 col-sm-offset-12">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript">
$(document).ready(function() {
getTreeData()
});
function getTreeData() {
$.ajax({
type : "GET",
url : contpath+"equip/eqType/tree",
success : function(tree) {
loadTree(tree);
}
});
}
function loadTree(tree) {
$('#typeTree').jstree({
'core' : {
'data' : tree
},
"plugins" : [ "search" ]
});
$('#typeTree').jstree().open_all();
}
$('#typeTree').on("changed.jstree", function(e, data) {
if(data.node.id!=-1){
parent.loadEqType(data.node.id,data.node.text);
var index = parent.layer.getFrameIndex(window.name); // 獵取窗口索引
parent.layer.close(index);
}
});
</script>
</body>
</html>2. 頁面挪用
var TypeSelect = function(){
layer.open({
type:2,
title:"挑選分類",
area : [ '300px', '450px' ],
content:contpath+"equip/eqType/typeTreeView"
})
}
function loadEqType(typeId,typeName){
$("#eqType").val(typeId);
$("#eqTypeName").val(typeName);
}License
- 能夠拷貝、轉發，然則必需供應原作者信息，同時也不能將本項目用於商業用途。
