|
|
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件（MIT 许可证）。
官网：http://www.ztree.me/<div class="title"> |
- zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
- 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
- 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
- 支持 JSON 数据
- 支持静态 和 Ajax 异步加载节点数据
- 支持任意更换皮肤 / 自定义图标（依靠css）
- 支持极其灵活的 checkbox 或 radio 选择功能
- 提供多种事件响应回调
- 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
- 在一个页面内可同时生成多个 Tree 实例
- 简单的参数配置实现 灵活多变的功能
|
<!DOCTYPE html><HTML><HEAD><TITLE> ZTREE DEMO - beforeEditName / beforeRemove / onRemove / beforeRename / onRename</TITLE><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="../../../css/demo.css" type="text/css"><link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"><script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.core-3.3.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.3.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.3.js"></script><SCRIPT type="text/javascript"><!--var setting = {view: {addHoverDom: addHoverDom,removeHoverDom: removeHoverDom,selectedMulti: false},edit: {enable: true,editNameSelectAll: true},data: {simpleData: {enable: true}},callback: {beforeDrag: beforeDrag,beforeEditName: beforeEditName,beforeRemove: beforeRemove,beforeRename: beforeRename,onRemove: onRemove,onRename: onRename}};var zNodes =[{ id:1, pId:0, name:"父节点 1", open:true},{ id:11, pId:1, name:"叶子节点 1-1"},{ id:12, pId:1, name:"叶子节点 1-2"},{ id:13, pId:1, name:"叶子节点 1-3"},{ id:2, pId:0, name:"父节点 2", open:true},{ id:21, pId:2, name:"叶子节点 2-1"},{ id:22, pId:2, name:"叶子节点 2-2"},{ id:23, pId:2, name:"叶子节点 2-3"},{ id:3, pId:0, name:"父节点 3", open:true},{ id:31, pId:3, name:"叶子节点 3-1"},{ id:32, pId:3, name:"叶子节点 3-2"},{ id:33, pId:3, name:"叶子节点 3-3"}];var log, className = "dark";function beforeDrag(treeId, treeNodes) {return false;}function beforeEditName(treeId, treeNode) {className = (className === "dark" ? "":"dark");showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.selectNode(treeNode);return confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？");}function beforeRemove(treeId, treeNode) {className = (className === "dark" ? "":"dark");showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.selectNode(treeNode);return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");}function onRemove(e, treeId, treeNode) {showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);}function beforeRename(treeId, treeNode, newName) {className = (className === "dark" ? "":"dark");showLog("[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);if (newName.length == 0) {alert("节点名称不能为空.");var zTree = $.fn.zTree.getZTreeObj("treeDemo");setTimeout(function(){zTree.editName(treeNode)}, 10);return false;}return true;}function onRename(e, treeId, treeNode) {showLog("[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);}function showLog(str) {if (!log) log = $("#log");log.append("<li class='"+className+"'>"+str+"</li>");if(log.children("li").length > 8) {log.get(0).removeChild(log.children("li")[0]);}}function getTime() {var now= new Date(),h=now.getHours(),m=now.getMinutes(),s=now.getSeconds(),ms=now.getMilliseconds();return (h+":"+m+":"+s+ " " +ms);}var newCount = 1;function addHoverDom(treeId, treeNode) {var sObj = $("#" + treeNode.tId + "_span");if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;var addStr = "<span class='button add' id='addBtn_" + treeNode.id+ "' title='add node' onfocus='this.blur();'></span>";sObj.after(addStr);var btn = $("#addBtn_"+treeNode.id);if (btn) btn.bind("click", function(){var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});return false;});};function removeHoverDom(treeId, treeNode) {$("#addBtn_"+treeNode.id).unbind().remove();};function selectAll() {var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");}$(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);$("#selectAll").bind("click", selectAll);});//--></SCRIPT><style type="text/css">.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}</style></HEAD><BODY><ul id="treeDemo" class="ztree"></ul></BODY></HTML> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡