JQuery写动态树示例代码


Posted in Javascript onJuly 31, 2013
// 业务类型树 
var settingOther = { 
edit: { 
enable: false 
}, 
// 异步加载树 
async: { 
enable: true, 
url:"initCoagencyTree.action", 
autoParam:["id", "name=n"], 
otherParam:{"otherParam":"zTreeAsyncTest"}, 
dataFilter: filter 
}, 
// 简单数据格式 
data: { 
simpleData: { 
enable: true 
} 
}, 
// 回调函数 
callback: { 
beforeClick: beforeClick, 
onClick: onClick 
} 
}; 
// 鼠标事件 
function beforeClick(treeId, treeNode, clickFlag) { 
// 普通选中 
if(clickFlag==1){ 
parent.document.getElementById("coagencyId").value=treeNode.id; 
parent.document.getElementById("parentId").value=treeNode.pId; 
parent.document.getElementById("name").value=treeNode.name; 
$("#coagencyId").attr("value",treeNode.id); 
$("#parentId").attr("value",treeNode.pId); 
}else{ 
// 取消选中 把值置空 
$("#coagencyId").attr("value",null); 
$("#parentId").attr("value",null); 
} 
return (treeNode.click != false); 
} 
// 鼠标解除节点的方法 
function onClick(event, treeId, treeNode, clickFlag) { 
// 默认执行的方法 显示节点的详细信息 
parent.showCoagencyDetail(); 
} 
// 异步加载需要是函数 
function filter(treeId, parentNode, childNodes) { 
if (!childNodes) return null; 
for (var i=0; i<childNodes.length; i++) { 
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); 
} 
return childNodes; 
} 
// 异步加载需要是函数 
function beforeAsync(treeId, treeNode) { 
return treeNode ? treeNode.level < 5 : true; 
} 
// 初始化树 
$(document).ready(function(){ 
$.fn.zTree.init($("#coagencyTree"),settingOther); 
}); 
</SCRIPT> 
<!-- 树节点id --> 
<s:hidden name="coagencyForm.coagencyId" id="coagencyId"/> 
<!-- 树节点 父id --> 
<s:hidden name="coagencyForm.parentId" id="parentId"/> 
<div class="zTreeDemoBackground left"> 
<ul id="coagencyTree" class="ztree" style="height: 640px"></ul> 
</div>
Javascript 相关文章推荐
理解 JavaScript 预解析
Oct 25 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
详解javascript事件冒泡
Jan 09 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 #Javascript
JS的千分位算法实现思路
Jul 31 #Javascript
一个JS的日期格式化算法示例
Jul 31 #Javascript
jquery实现div拖拽宽度示例代码
Jul 31 #Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 #Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 #Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 #Javascript
You might like
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
php修改数组键名的方法示例
2017/04/15 PHP
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
浅谈Python中数据解析
2015/05/05 Python
python 上下文管理器使用方法小结
2017/10/10 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python实现翻译word表格小程序
2020/02/27 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
python中取绝对值简单方法总结
2020/07/24 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
教师推荐信范文
2013/11/24 职场文书
党员转正意见怎么写
2015/06/03 职场文书
靠谱准确的求职信
2019/04/02 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python