最近的前端工作用到一个ui库中封装的结构,叫jstree,其主要功能就是数据的展示,选择,编辑,因为在网上找的资料东一块西一块的,对新手学习很不方便,所以把我最近的学到的总结下。
首先说jstree的结构,它有固定的结构组成,且只是别关键字,树的结构关键字分别为plugins,core,data. 其中plugins类似于c语言中的包含,可以包含样式,选择框,图片等,而core主要功能是控制树的形状,单选多选等等,data顾名思义就是填充数据的,这个数据可以直接书写,那样的就是静态的树,还有用json返回的方式填充,那样的可以实现动态的树(还有好几种填充方式,可查api)
当然在data中也是需要识别格式的,data的关键字为id, text,children这三个关键字是树形成的必要条件,展示时显示的是text,传递的可以是id也可以是text,树的控制关键字是state,他的作用是可以控制某些节点默认不可点击,选中等。
这个在json串返回时格式一定要设置好,不然还需要自己手动转换,那样会变的很复杂,下面也会讲到如何将不符合需求json手动转换为符合需求的。
下面是我自己写的一个静态的jstree:
-
$('#tree_2').jstree({
-
'plugins': [ "themes","checkbox"],
-
'core': {
-
"themes" : {
-
"theme": "classic",
-
"dots": true,
-
"icons": false
-
},
-
'data': [
-
{
-
"id":"00",
-
"text": "工作台",
-
"state": {
-
"selected": true,
-
"disabled": true,
-
},
-
},
-
{
-
"id":"01",
-
"text":"企业管理",
-
"children": [{
-
"id":"0101",
-
"text": "企业信息管理",
-
}, {
-
"id":"0102",
-
"text": "企业证照管理",
-
},
-
]
-
},
-
{
-
"id":"02",
-
"text":"商品管理",
-
"children":[{
-
"id":"0201",
-
"text":"生产企业商品管理"
-
},{
-
"id":"0202",
-
"text":"商品溯源",
-
},{
-
"id":"0203",
-
"text":"商品分布",
-
},
-
]
-
},
-
{
-
"id":"03",
-
"text":"企业管理",
-
"children":[{
-
"id":"0301",
-
"text":"企业信息查询",
-
},{
-
"id":"0302",
-
"text":"企业证照服务",
-
},
-
]
-
},
-
{
-
"id":"04",
-
"text":"个人中心",
-
"state": {
-
"selected": true,
-
"disabled": true,
-
},
-
"children":[{
-
"id":"0401",
-
"text":"修改密码",
-
"state": {
-
"selected": true,
-
"disabled": true,
-
},
-
},{
-
"id":"0402",
-
"text":"修改绑定手机",
-
"state": {
-
"selected": true,
-
"disabled": true,
-
},
-
},{
-
"id":"0403",
-
"text":"锁屏",
-
"state": {
-
"selected": true,
-
"disabled": true,
-
},
-
},{
-
"id":"0404",
-
"text":"退出",
-
"state": {
-
"selected": true,
-
"disabled": true,
-
},
-
},
-
]
-
},
-
]
-
},
-
});
请注意格式,children 是用[ ],data 中的每个元素是{ }.
上段代码是个权限功能的分配选择,默认工作台和个人中心选择且不可点击,请注意当根节点选中且默认不可点击时,子节点会默认选中,但是可以点击,如果想要让子节点不可点击,必须在子节点继续设置。我的工作就遇到这种情况,返回的json不会有这个state数据设定,所以我需要自己加这个属性。
这个是填充json的jstree:
-
$('#powerTree').jstree({
-
'core': {
-
'data': $scope.filter.data,
-
"themes": {
-
"theme": "classic",
-
"dots": true,
-
"icons": false
-
},
-
},
-
"plugins": ["themes", "json_data", "search", "checkbox"]
-
});
[javascript] view plain copy print?
- <code class="language-javascript"> $scope.filter.data中存储的接口返回的json串,上例是个多选树,"multiple": false,可以控制单选多选</code>
$scope.filter.data中存储的接口返回的json串,上例是个多选树,"multiple": false,可以控制单选多选
$scope.filter.data中存储是接口返回的json串,上例是个多选树,"mutiple":false,可以控制节点单选多选
这个是查询后台返回数据然后填充到树,但是默认是要选中的,后台没有选中这个关键字,所以首先想到的就是加入关键字,思想是这样的,首先将json串转化为字符串,然后在末尾添加关键字字符串,然后再转回json串。
首先是数据读入json对象,然后选则第一个
-
var str=JSON.stringify(result[0].RoleJson.Menu[i]);//转化字符串
-
var str1=str.substring(0,str.length-1)+',"state": {"selected": true,"disabled": true}}';//尾部有},所以取子串再添加
-
$scope.filter.data.push(JSON.parse(str1))//转化为json
for循环找你需要添加的那个id,然后按上面的步骤转化,但是这样做确实很麻烦,所以就有了下面的一种方法,在介绍下面填充方式首先要介绍树的类似监听的函数
$('#powerTree').on("changed.jstree", function(e, data){};
这个函数是选择后触发的函数,当你改变了选择时他会自动监听,当然不只这一个函数,这里用到了加载时用到的函数
$('#powerTree').bind("loaded.jstree", function (e, data){};
这个函数是在加载树的时候默认的某些操作执行。所以我们可以在这个函数中做很多操作。下面说如何在这样的函数中执行某些节点选中。
$('#powerTree').jstree('check_node',['17','18']);//中括号中是可以选中的某些节点的id,这个可以多选也可以多选。
所以我们就可以直接在初始化的时候默认选中,但是这个只是选中,没法不可点击,所以想要做到选中且不可点击,还是需要前面那个方法
下面的是完整的代码:
-
$('#powerTree').bind("loaded.jstree", function (e, data) {
-
for (var i = $scope.filter.data1.length - 1; i >= 0; i--) {
-
$("#powerTree").jstree('check_node',[$scope.filter.data1[i].id]);
-
}
-
});
这就可以实现默认选中。
可以我的业务并不选中就ok了,还需要赋予各个角色的权限的查询并且编辑,上面的是父账号的权限查询的,然后下面有子账号,由父账号的权限往下分配,查询到的子账号的权限需要在父账号的目录中选中,其实有上面的基础知识了很简单,一个借口查子权限,得到id,然后查父账号填充树显示,但是我遇到了一个很蛋疼的问题是,我用的是模态框显示的树,每次查询后预加载后第一个是ok的,但是后面再掉树的时候还是那个树,每次都一样,后来才知道树的预加载只会加载一次,如果还是原来的树就一直是哪个样子,当时我很纠结,每次只有第一个是好的,其他的都和第一个一样,那就等于没做,所以我就又想到用原来的老办法,打开json转为字符串添加关键字的办法,但是太复杂所以放弃了,后来发现只需要删除树的结构,再次加载下就ok了,无语整个下午。
删除树的代码如下:
$('#powerTree').jstree("destroy")
这个东西很重要,我后来又做了一个动态的编辑树,就是在树中加节点时,每次加后都没法显示出来,只有重新刷新才能显示,其实就是树没有刷新,但是你不将这个原来的树删除,就算新的数据返回了,你的树还是不变,所以只能删除后再掉接口从新填充数据才会显示编辑后的树。
当然,在树种还有其他的一些操作,比如刚加载时树是折叠成一个标签的,所以显示起来就很难看,所以有一个展开全部节点的方法,代码如下:
$('#powerTree').jstree('open_all');
这段代码可以展开树的所有节点,如果节点过多就会显得很臃肿,不美观,当然我们也可以选择展开某一层或者第一层,代码如下:
-
$("#manageOfficeTree").bind("loaded.jstree", function (e, data) {
-
data.instance.open_node($scope.filter.manageOffices[0]);
-
});
在open_node里的参数是你要打开某层的根节点的id,当然不建议写死,所以用json中的数据来选择就可初始化展开某层节点
如下图
以上为这段时间的jstree的学习总结,后面学到新的将继续补充。。。