zTree简单封装
2015-10-18 22:28
274 查看
项目中需要多处以树状的形式体现组织结构。zTree是个很好的插件api文档完善。
代码对zTree做了初步封装,节省同事学习时间。
代码对zTree做了初步封装,节省同事学习时间。
/**** 树初始化:$.fn.initTree(treeContentId, initTreeUrl, AsyncUrl) treeContentId: 用于展现 zTree 的 DOM 容器ID initTreeUrl:初始化树url AsyncUrl:异步加载树url return:zTree 获取选中节点:$.fn.initTree.getSlectedNode() return:treeNode 树节点点击事件回调函数function zTreeOnAsyncSuccess(event, treeId, treeNode) treeNode: 被点击的节点 JSON 数据对象 return:null 树异步加载成功回调函数function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) treeNode: 进行异步加载的父节点 JSON 数据对象 msg:异步获取的节点数据,主要便于用户调试使用 return:null ****/ (function ($) { var zTree; $.fn.initTree = function (treeContentId, initTreeUrl, AsyncUrl) { var setting = { async : { enable : true, url : getUrl, type : "post", dataType : "json", contentType : "application/x-www-form-urlencoded;charset=UTF-8", autoParam : ["areaid"], dataFilter : filter, }, view : { selectedMulti : false, showIcon : false }, check : { enable : false, chkStyle : "checkbox", chkboxType : { "Y" : "s", "N" : "s" } }, data : { key : { name : "name" }, simpleData : { enable : true, pIdKey : "pid", idKey : "areaid" } }, edit : { drag : { isCopy : false, isMove : false }, enable : true, editNameSelectAll : true, showRemoveBtn : false, showRenameBtn : false }, callback : { onClick : zTreeonClickEvent, onAsyncSuccess : zTreeOnAsyncSuccessEvent } }; function getUrl(treeId, treeNode) { if (treeNode == undefined) { return initTreeUrl; } else { return AsyncUrl; } } function filter(treeId, parentNode, childNodes) { if (parentNode == undefined) { if (childNodes.data.pid == undefined) { //无pid,加载企业树,只有一级 var data = childNodes.data; var treedata = [{ "id" : "-1", "pId" : "-2", "name" : "全部", open : true } ]; data = $.makeArray(data); $.each(data, function (index, item) { item.pId = -1; item.isParent = false; treedata.push(item); }); } else { //有pid,加载区域树,有多级 var treedata = childNodes.data; treedata = $.makeArray(treedata); $.each(treedata, function (index, item) { item.open = true; item.isParent = true; }); } } else { var treedata = childNodes.data.rows; treedata = $.makeArray(treedata); $.each(treedata, function (index, item) { item.isParent = true; }); } return treedata; } $.fn.zTree.init($("#" + treeContentId), setting); zTree = $.fn.zTree.getZTreeObj(treeContentId); return zTree; }; function zTreeonClickEvent(e, treeId, treeNode) { try { zTreeonClick(e, treeId, treeNode); } catch (e) { return; } return; } function zTreeOnAsyncSuccessEvent(event, treeId, treeNode, msg) { try { zTreeOnAsyncSuccess(event, treeId, treeNode, msg); } catch (e) { return; } return; } /*获取一个选中区域数据*/ $.fn.initTree.getSlectedNode = function () { var nodes = zTree.getSelectedNodes(); var treeNode = nodes[0]; //点击文本选中,优先级低 if (nodes.length > 1) { layer.alert("请选择一个区域"); return false; } if (nodes.length == 0) { layer.alert("请选择区域"); return false; } if (nodes.length == 1) { return treeNode; } } })(jQuery);
相关文章推荐
- 三言两语。。。
- 资锥佐足罪赘灼左
- Linux10.11-10.18)学习笔记(
- 高仿网易云音乐客户端的Home页面切换Tabhost-IT蓝豹
- linux 操作系统下登录qq的几种方式
- Linux10.11-10.18)学习笔记(
- 椎棕桌啄纵爪柞砖
- Kafka剖析:Kafka背景及架构介绍
- 轨迹
- 纵柞罪嘴卒抓阻子
- Android: 使用JitPack发布你的Github开源库
- linux 分区挂载
- 2015第42周日
- 结对编程 计算器运算
- 夺命雷公狗jquery---5可见选择器
- eclipse Working Set设置
- 椎邹罪字阻自族子
- 系统集成知识点整理(五)质量管理
- java4Android(24)hashCode()/toString()
- 超炫ViewPager实现欢迎页面动画效果-IT蓝豹