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资源的使用,因为免去了运行阶段进行绑定的过程.当然,使用这个标记仅仅是绑定上的优化,并不包括数据源.数据 ...
随机推荐
- 面试题 和 python 2与3的期区别
1.3 python2与python3的一些区别 大环境下的区别:python2:1,源码都含有php,Java,C,等语言的规范陋习,2,重复代码特别多. python3:源码很规范,清晰,简单 ...
- JAVA第一个程序hello world
import java.util.Scanner; public class hello { public static void main(String[] args) { System.out.p ...
- A. Free Cash
A. Free Cash time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- drozer与adb工具的安装与使用
drozer:链接: https://pan.baidu.com/s/1skTJdgh 密码: wah1 adb:链接: https://pan.baidu.com/s/1gfpIkuv 密码: n8 ...
- java在window系统的一些问题
一般的, 在windows cmd上启动 utf-8编码的java应用 会有一些字符集问题 可以修改cmd的字符集编码为utf8 , chcp 65001 java -D有空格时 区别: VM参数是 ...
- @ControllerAdvice 拦截异常并统一处理
在spring 3.2中,新增了@ControllerAdvice 注解,可以用于定义@ExceptionHandler.@InitBinder.@ModelAttribute,并应用到所有@Requ ...
- requirej入门nodeTpl使用(三)
基本语法 HTML部分 在模板中的 HTML 部分,使用定界符“<?”和“?>”作为语法的开始和结束. 在定界符内,可以书写任意JavaScript语句,如: <?for(var i ...
- gcc 4.9编译
参考 http://blog.csdn.net/hzhxxx/article/details/28634893
- http三次握手四次挥手
最近一直忙于看前端vue相关内容,后端相关内容没有跟进,文章停了3周,,,哎,还是懒吧!子曰生命在于运动,该学习还是要学的,文章嘛也还是要整理滴,不扯了--- 参考: https://blog.csd ...
- a :hover 和a:hover 区别
article a :hover { color: red;} 上面表示 article 内所有a 标签的所有子标签在hover时是红色 article a:hover { color: red; ...