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资源的使用,因为免去了运行阶段进行绑定的过程.当然,使用这个标记仅仅是绑定上的优化,并不包括数据源.数据 ...
随机推荐
- springmvc htmlEscape标签的作用
有些东西自己不知道就想要弄明白 唉 做项目 看人家项目中用到啦 不会 不知道 就百度啦 整理了一下 方便自己记忆 一.SpringMVC 表单元素标签 如下: <form:textarea ...
- 在服务器上使用 gradle 打包 android 源码
安装 android-tools mkdir ~/android && cd ~/android wget https://dl.google.com/android/reposi ...
- 记录下自己安装cuda以及cudnn
之前已经装过一次了,不过没有做记录,现在又要翻一堆博客安装,长点记性,自己记录下. 环境 ubuntu16.04 python2.7 商家送过来时候已经装好了显卡驱动,所以省去了一大麻烦. 剩下的就是 ...
- linux 学习2 (基于ubuntu)
一.远程管理命令 关机/重启 shutdown reboot(重启) halt(直接关机) 查看或配置网卡信息 ifconfig ping 远程登录和复制文件 ssh ping 1. 关机/重 ...
- Vue.js-----轻量高效的MVVM框架(十一、使用slot分发内容)
#单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...
- spring事务的传播性
<!--配置事务传播特性 --><tx:advice id = "txAdvice" transaction-manager = "txManage&q ...
- JAVA中的for循环
在Java程序中,要“逐一处理”――或者说,“遍历”――某一个数组或Collection中的元素的时候,一般会使用一个for循环来实现(当 然,用其它种类的循环也不是不可以,只是不知道是因为for这个 ...
- UGUI RectTransform 矩形变换
UGUI游戏对象基本都有这个组件. float radius; radius = GetComponent<RectTransform>().sizeDelta.x; radius = ( ...
- 错误 chamfermatching.cpp:969:30: error: the compiler can assume that the address of ‘annotate_img’
修改 ./build/modules/contrib/CMakeFiles/opencv_contrib.dir/flags.make文件,删掉-Werror=address,然后重新make
- Linux常用操作命令介绍
Linux常用操作命令介绍 重要概念 CPU:就像人的大脑,主要负责相关事情的判断以及实际处理的机制.查询指令:cat /proc/cpuinfo 内存:大脑中的记忆区块,将皮肤.眼睛等所收集到的信 ...