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字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
深入理解vue路由的使用
Mar 24 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
原生js生成图片验证码
Oct 11 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
一个php作的文本留言本的例子(三)
2006/10/09 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
php jsonp单引号转义
2014/11/23 PHP
php简单日历函数
2015/10/28 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
怎样让char类型的东西转换成int类型
2013/12/09 面试题
物流专业大学生求职信范文
2013/10/28 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
解除劳动合同协议书
2014/04/14 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
小区推广策划方案
2014/06/06 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
滞留工资返还协议书
2014/10/19 职场文书
保安辞职信范文
2015/02/28 职场文书