ztree的数据绑定
ztree用法
(1)首先引用ztree的css和js
<link type="text/css" rel="stylesheet" href="zTree/zTreeStyle.css" />
<script type="text/javascript" src="zTree/jquery.ztree.all-3.5.js"></script>
(2) 定义一棵树
<ul id="treeDemo" class="ztree" style="margin-top:0; width:100%; height:auto;"></ul>
(3)将查询的数据放到树种(数据需要有ID parentId name 为查出数据的字段名称)
3.1
var zNodes = ""; //json
function load() {
$.ajax({
type : 'POST',
url : $.el.Register.AppUrl + "path",// 查询数据
dataType : 'json',
async : false,
success : function(data) {
var json = eval(data); // 数组
zNodes = "[";
$.each(json, function(index, item) {
zNodes += "{id:" + json[index].id
+ ",pId:" + json[index].parentid
+ ",name:'" + json[index].name
+ "'}";
if (index != json.length - 1)
zNodes += ",";
});
zNodes += "]";
},
error : function(e) {
}
});
}
zNodes = eval(zNodes);
$.fn.zTree.init($("#treeDemo"), setting, zNodes);// 树初始化
现在数据绑定在树上
3.2 避免数据重复绑定 先摧毁树 再次初始化 查询数据 对初始化树的数据进行勾选
var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
zTreeObj.destroy();
$.fn.zTree.init($("#treeDemo"), setting, zNodes);// 权限树初始化
$.ajax({
type : "POST",
url : $.el.Register.AppUrl + "path",
data : {
条件
},
dataType : 'json',
async : false,
success : function(data) {
var json = eval(data); // 数组
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
$.each(json, function(index, item) {
id = json[index].id;
var node = treeObj.getNodeByParam("id", id);
treeObj.checkNode(node, true, false);
});
},
error : function(error) {
}
});
ztree的数据绑定的更多相关文章
- zTree的后台数据绑定
前台js: var treeNodes; $.ajax({ async: false, cache: false, type: 'POST', contentType: "applicati ...
- [译]聊聊C#中的泛型的使用(新手勿入) Seaching TreeVIew WPF 可编辑树Ztree的使用(包括对后台数据库的增删改查) 字段和属性的区别 C# 遍历Dictionary并修改其中的Value 学习笔记——异步 程序员常说的「哈希表」是个什么鬼?
[译]聊聊C#中的泛型的使用(新手勿入) 写在前面 今天忙里偷闲在浏览外文的时候看到一篇讲C#中泛型的使用的文章,因此加上本人的理解以及四级没过的英语水平斗胆给大伙进行了翻译,当然在翻译的过程中发 ...
- z-tree的使用
1.参考资料 1)官网:http://www.treejs.cn/v3/api.php 2)z-tree码云:https://gitee.com/zTree/zTree_v3 2.下载解压 案例演示: ...
- UWP中新加的数据绑定方式x:Bind分析总结
UWP中新加的数据绑定方式x:Bind分析总结 0x00 UWP中的x:Bind 由之前有过WPF开发经验,所以在学习UWP的时候直接省略了XAML.数据绑定等几个看着十分眼熟的主题.学习过程中倒是也 ...
- MVVM模式和在WPF中的实现(二)数据绑定
MVVM模式解析和在WPF中的实现(二) 数据绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- vue双向数据绑定原理探究(附demo)
昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...
- ztreeDeptSelect 基于jquery和ztree的部门选择插件
插件介绍 首先我们来看插件的功能演示(效果): 插件准备好后.前台只需编写html: <input type="text" class="deptName" ...
- 【Win 10应用开发】分阶段进行数据绑定
使用x:Bind扩展标记进行数据绑定,是在编译阶段完成,至于说性能优化方面,大概主要是优化CPU资源的使用,因为免去了运行阶段进行绑定的过程.当然,使用这个标记仅仅是绑定上的优化,并不包括数据源.数据 ...
随机推荐
- Bootstrap FileInput 上传 中文 API 整理
Bootstrap FileInput 上传 中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看 会用就行 自己都不知道每个值是干嘛用的就问 ...
- CSS3中的vh、vw及其应用场景
需求:我们项目的需求是 一.vh vw vw和vh是相对于视口(viewport)的宽度和高度.由于现在移动设备的屏幕尺寸之差别,如果仍然根据屏幕的物理分辨率来设计网页,效果很难统一,因此html ...
- Linux安全加固--精简启动项
1.关闭不必要的服务 1.1.centos6.x服务操作命令 1.1.1.常用命令 查看服务开启或关闭状态: [root@localhost ~]# chkconfig --list aegis 0: ...
- POJ-1128-Frame Stacking
链接:https://vjudge.net/problem/POJ-1128 题意: 每张图片上面画了一些边框,给出这些边框叠在一起后的图片,图片边框一定是由一个字母表示并且每条边至少三个字符,输入保 ...
- springmvc接收各种参数
转载:https://blog.csdn.net/lutinghuan/article/details/46820023
- vue(5)联动+tab页
来自:https://juejin.im/post/5a0c191f6fb9a04514639419 1.联动 新增 <input v-model="msg" /> & ...
- jdk的环境配置
今天在网上找了关于jdk配置的教程,发现比较繁琐,因此更新下jdk的简单配置教程 注意:jdk的安装必须正确,绝对不允许将jdk和jdr安装在同一层目录!!(建议在java目录下新建jdk和jdr目录 ...
- my16_sql_thread执行慢导致主从延迟高的一个情景
现象:从库延迟高,查看slave status发现sql_thread执行语句的速度比主库慢,这样的延迟会一直高下去,下面是排查的一些过程1. 检查了从库的配置,磁盘的写入速度的确没有主库高2. io ...
- vue--钩子函数1
最近在学习自定义指令,这里做个整理 vue允许注册自定义指令,在2.0中,代码复用和抽象的主要形式是组件.然而有的情况下仍需要对普通DOM元素进行底层操作,这时就会用到自定义指令. 全局指令direc ...
- Android中的时间格式的校验
public class MainActivity extends Activity implements OnClickListener{ private Button btn1; private ...