Foreword:
What is jsTree?
is a tree plugin for jquery. The official website is as follows:
Official Site API: https://www.jstree.com/
Chinese API: http://blog.csdn.net/qq_24472595/article/details/70053863 (This is not the official website but a netizen blog, but the basic functions are still relatively comprehensive.)
The official website has many properties and methods, which are very rich. This article does not list them one by one.
What are the features of this article?
- The first: select only the major categories;
- The second: select all;
- The third type: the selected results are traversed by province and city
Option 1: Select only major categories
Actual work scenario:
need to select a category,
- If the item is the end when it is selected, check itself, and it will be displayed on the right side of -----";
- If the item is a category when selected, the sub-nodes under the category are all selected, and the -----" is displayed on the right side.
- If a larger class is selected when selecting, the above is the same;
- If the root node is selected when selecting, check all, only the root node, -----" is displayed on the right side,
- If all the sub-items are selected when selected, the parent node is checked by default. -----" is displayed on the right,
- Finally submit, all selected nodes, -----"result area,
See picture.
css is as follows:
<link rel="stylesheet" href="http://www.resunnet.com/demo/jquery-left-to-right/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="jstree/dist/themes/default/style.css"/>
<title>jstree</title>
<style>
/*全局*/
* { margin: 0; padding: 0; }
*, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; }
body { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
ul li {
list-style: none;
}
.reasult-list ul {
padding-left: 0px;
}
.reasult-list ul li {
float: left;
margin-bottom: 15px;
margin-right: 10px;
width: 40%;
padding-left: 15px;
line-height: 32px;
border: 1px solid #00CCCC;
background: #fff;
cursor: pointer;
transition: all 0.3s;
}
.reasult-list ul li:hover {
transform: scale(0.95);
background: #E5FFFA;
}
</style>
html
<div class="container" style="margin-top: 10%; width: 600px;">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-choosePartType">
添加
</button>
<div class="panel panel-default" style="margin-top: 50px;">
<div class="panel-heading">结果区</div>
<div class="panel-body">
<div class="reasult-list" id="parts-reasult-list">
<ul></ul>
</div>
</div>
</div>
</div>
<!--模态窗-->
<div class="modal fade modal-draggable ui-draggable" id="modal-choosePartType" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header ui-draggable-handle">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title">选择-原创-柴高八斗之父-www.resunnet.com</h5>
</div>
<div class="modal-body">
<div class="row p-relative">
<!--弹窗-左侧-->
<div class="col-md-6">
<div id="tree_partType" class="tree-demo right-border"> </div>
</div>
<!--指示三角-->
<i class="fa fa-chevron-right modal-left-right-arrow"></i>
<!--弹窗-右侧-->
<div class="col-md-6" id="partType_right-selected">
<div class="reasult-list right-border">
<ul>
</ul>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-success btn-green-otoc btn-sm btn-submit">确定</button>
</div>
</div>
</div>
</div>
js in 2 steps:
Step 1: First complete the instantiation of the tree, basic configuration and data source.
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.resunnet.com/demo/jquery-left-to-right/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jstree/dist/jstree.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//jstree-配件类型-弹窗
//实例化
var UITree = function() {
var tree_partType = function() {
$('#tree_partType').jstree({
"multiple": true, //单选 true ; 父类选中子节点全勾选 false，下面 plugins 配置 checkbox
'plugins': ["changed", "wholerow","checkbox"], //配置选项：wholerow 整行； checkbox 复选框； dnd 拖拽 ；contextmenu 可反键操作；
'core': {
'data': [{
"state": {
"opened": true,
"selected": false
},
"text": "XXXX汽车服务有限公司",
"children": [{
"text": "软件部"
},
{
"text": "销售部"
},
{
"text": "行政部",
"state": {
"opened": false
},
"children": [
{
"text": "行政",
"children": [{"text": "A组",}, {"text": "B组"}]
},
{
"text": "人事"
}
]
}
]
}]
}
});
}
return {
init: function() {
tree_partType();
}
};
}();
UITree.init();
// if(App.isAngularJsApp() === false) {
// jQuery(document).ready(function() {
// UITree.init();
// });
// }
</script>Step 2: Customize js code
//页面加载时
$(function() {
var arr;
//改变
$('#tree_partType').on("changed.jstree", function (e, data) {
var temp = {};
arr = [];
//把所有节点写入temp
data.selected.forEach(function (d) {
var obj = data.instance.get_node(d)
temp[d] = obj;
})
console.log(temp)
//循环找到有子节点的,删除子节点
for (var obj in temp) {
temp[obj].children_d.forEach(function (o) {
delete temp[o]
});
}
//最后生成的对象遍历写入html
for (var obj in temp) {
arr.push('<li data-id="' + temp[obj].id + '">' + temp[obj].text + '</li>');
}
//显示右侧
$("#partType_right-selected ul").html(arr.join(''));
})
//窗口提交-结果区
$('#modal-choosePartType .btn-submit').click(function(){
$("#parts-reasult-list ul").html(arr.join(''));
$('#modal-choosePartType').modal('hide');
})
//窗口关闭-结果区
$('#modal-choosePartType').on('hide.bs.modal', function () {
$("#parts-reasult-list ul").html(arr.join(''));
})
})
Ideas:
First, the official submission method: data.selected, every time a change occurs, the selected node is fetched. Then, traverse to get this node and put it in the temp object.
forEach(function (d) {
var obj = data.instance.get_node(d)
temp[d] = obj;
})
When you pass console.log(temp), you will find out what keys and properties the official node provides you can operate on; this is very important, we are doing any operation, we must first know, how to get the object? When using plugins, we must know, what properties do they provide for us to use?
The first type: only select the main category ---------------- end
Second: choose each
As shown below:
Whether you select a class or a child node, the selection is over.
Other css is the same as html, and the changed js is as follows (the tree instantiation is also the same, only the second part of js is different .)
The idea here is simple,
- After on.(changed), do a traversal, and every time it changes, get the id + text of the currently selected node,
- Match into the array-----" and then stuff it into the specified dom (join the array before this.)
//改变
$('#tree_partType').on("changed.jstree", function (e, data) {
var i, j;
arr = []
for(i = 0, j = data.selected.length; i < j; i++) {
//获取当前节点id
var current_id = data.instance.get_node(data.selected[i]).id;
//获取当前节点文本
var currentNode_text = data.instance.get_node(data.selected[i]).text; //也可以用get_text,如使用此方法,代码后的.text去掉.
//写入数组
arr.push('<li data-id="' +current_id+ '">' + currentNode_text + '</li>');
}
//显示右侧
$("#partType_right-selected ul").html(arr.join(''));
})
//窗口提交-结果区
$('#modal-choosePartType .btn-submit').click(function(){
$("#parts-reasult-list ul").html(arr.join(''));
$('#modal-choosePartType').modal('hide');
})
//窗口关闭-结果区
$('#modal-choosePartType').on('hide.bs.modal', function () {
$("#parts-reasult-list ul").html(arr.join(''));
})