前言:
jsTree是什么?
是jquery的一个树形插件。官网如下:
官方站点API :https://www.jstree.com/
中文API: http://blog.csdn.net/qq_24472595/article/details/70053863(这个不是官网是一个网友博客,但是基础功能写得还比较全面。)
官网有很多属性和方法,非常丰富。此文不一一罗列。
本文有哪几个功能点?
- 第一种:只选大类;
- 第二种:所有都选;
- 第三种:选中结果按省市区遍历
第一种:只选大类
实际工作场景:
需要选择类别,
- 如果选择时,该项是末端,则勾选本身,-----》右侧显示;
- 如果选择时,该项是大类,则该大类下面的子节点都选中,-----》右侧显示,
- 如果选择时,选择了更大的类,则以上雷同;
- 如果选择时,选择了根节点,则勾选所有,仅根节点,-----》右侧显示,
- 如果选择时,该子项全部选中,则父类节点默认勾中。-----》右侧显示,
- 最后提交,所有选中节点,-----》结果区,
见图吧。
css如下:
<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分2步:
第一步:首先将树的实例化完成,基础配置和数据源。
<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>
第二步:自定义js代码
//页面加载时
$(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(''));
})
})
思路:
首先 官方提交的方法:data.selected,每次发生改变changed时,取到已经选中的节点。然后,遍历得到这个节点,放到temp对象中。
forEach(function (d) {
var obj = data.instance.get_node(d)
temp[d] = obj;
})
通过 console.log(temp) 时,你会发现,官方的节点提供了哪些可以给你操作的键和属性;这点很重要,我们在做任何操作,首先得要知道,如何获取对象?而在插件使用时,必须要知道,它们提供了那些属性供我们使用?
第一种:只选大类----------------end
第二种:每项都选
如下图所示:
不管你选的是类,还是子节点,选中就过去了。
其他css和html一致,改动的js如下(树实例化也相同,仅为js的第二部分不同。)
这里思路很简单,
- 在on.(changed)后,做一个遍历,每次改变,就去取到当前选择节点的id + 文本,
- 赛到数组中-----》然后塞到指定dom中(在这之前将数组join下。)
//改变
$('#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(''));
})