JStree的使用总结
来源:互联网 发布:美国宏观经济数据 编辑:程序博客网 时间:2024/05/22 07:50
最近的前端工作用到一个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"] });
$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))//转化为jsonfor循环找你需要添加的那个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的学习总结,后面学到新的将继续补充。。。
- JStree的使用总结
- jstree使用总结
- JQuery的JSTree使用
- jstree的使用
- Jstree的使用
- JsTree的使用demo
- 【学习】jstree的使用
- JSTree的使用
- jsTree的使用
- jquery jstree 插件的使用
- jstree的简单使用例子
- jstree的基本使用例子
- jstree的基本使用例子
- jstree的简单使用例子
- jstree的简单使用例子
- jstree使用
- jsTree使用
- JSTree使用
- Spring+SpringMVC+MyBatis三大框架整合的SSM
- 关于方法名是否可以很详细的思考
- 【素数 && 快速幂】UVA
- SpringBoot中的WebSocket广播
- 基于tensorflow的简单BP神经网络的结构搭建
- JStree的使用总结
- Andorid版本更新
- 阿里巴巴的一个笔试题
- Spring整合Web项目原理
- hdu6188-贪心
- const用法总结
- Activity的四种launchMode
- 注解@PostConstruct 与 @ PreDestory 的作用
- 本题要求实现一个函数,对给定的正整数N,打印从1到N的全部正整数。