b334985497 b334985497
关注数: 17 粉丝数: 1 发帖数: 37 关注贴吧数: 1
研究了2天的zTree,在这里发一下其与数据库的动态交互 公司做项目要用到树结构,花了点时间研究api,这里把这2天的成果发一下,因为想到自己,算是个菜鸟吧,有时候好多问题都让自己揪心,所以这里发一下,希望对有需要的人有所帮助 var authority ='1,1';//用户操作的权限 var zNodes; //树节点,json格式,异步加载可设置为null或[] var zTreeObj; //树对象 var className = 'dark'; var urlStr = '/admin/showTreeNode.shtml'; //zTree树加载异步处理的url地址 var urlStrOption = '';//对于树节点的增删改和移动操作ajax异步处理的url地址 //var params = '';//ajax异步处理需要传入到服务端的数据 //树结构载入时的属性 var setting = { async: { enable: true, url : getTempUrl }, check: { //设置 zTree 的节点上是否显示 checkbox / radio ,默认为false enable: true }, callback: {//回调函数,在这里可做一些回调处理 onAsyncSuccess: zTreeOnAsyncSuccess, beforeEditName: beforeEditName, beforeRemove: beforeRemove, beforeRename: beforeRename, onRemove: onRemove, onRename: onRename, beforeDrag: beforeDrag, onDrop: onDrop }, //获取数据时节点Id和父id对应json的属性名,rootPId 为根节点的id data: { simpleData: { enable : true, idKey : "treenodeId", pIdKey : "treenodeParentid", rootPId: 0 }, //显示节点名称时对应的json数据里面的属性 key: { name: "treenodeName" } }, //不显示图片 view: { showIcon: false, addHoverDom: addHoverDom, removeHoverDom: removeHoverDom, selectedMulti: false, fontCss: getFontCss }, //可以修改zTree edit: { enable: true, editNameSelectAll: true, showRenameBtn: true, renameTitle : "编辑节点", removeTitle : "删除节点", //允许拖拽 drag: { autoExpandTrigger: true, prev: dropPrev, inner: false, next: dropNext } } }; //修改节点之前触发的函数 function beforeEditName(treeId, treeNode) { className = (className === "dark" ? "":"dark"); var zTree = $.fn.zTree.getZTreeObj("permission_tree"); zTree.selectNode(treeNode); return confirm("确认进入 节点-- " + treeNode.treenodeName + " 的编辑状态吗?"); } //删除节点之前触发的函数 function beforeRemove(treeId, treeNode) { className = (className === "dark" ? "":"dark"); var zTree = $.fn.zTree.getZTreeObj("permission_tree"); zTree.selectNode(treeNode); return confirm("确认删除 节点 -- " + treeNode.treenodeName + " 吗?"); } //用于捕获删除节点之后的事件回调函数。 //如果用户设置了 beforeRemove 回调函数,并返回 false,将无法触发 onRemove 事件回调函数。 function onRemove(e, treeId, treeNode) { //操作数据库,删除相应节点并返回到本页面
callback里面定义的参数没用了 var setting = { async: { enable: true, url:"/admin/showTreeNode.shtml", autoParam:["treenodeId"], dataFilter: filter }, //获取数据时节点Id和父id对应json的属性名,rootPId 为根节点的id data: { simpleData: { enable : true, idKey : "treenodeId", pIdKey : "treenodeParentid", rootPId: 0 }, callback: { onClick: zTreeOnClick, beforeClick: zTreeBeforeClick, onAsyncError: zTreeOnAsyncError, onAsyncSuccess: zTreeOnAsyncSuccess, beforeAsync: zTreeBeforeAsync }, //显示节点名称时对应的json数据里面的属性 key: { name: "treenodeName" } } }; function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) { alert("异步加载出错!"); }; function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) { alert("异步加载成功!"); }; function filter(treeId, parentNode, childNodes) { if (!childNodes) return null; alert(childNodes[0].treenodeName); return childNodes; } function zTreeBeforeAsync(treeId, treeNode) { alert("异步加载开始!"); return true; }; function zTreeBeforeClick(treeId, treeNode, clickFlag) { alert(11); return true; }; function zTreeOnClick(event, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("permission_tree"); zTree.reAsyncChildNodes(treeNode,"refresh"); } $(document).ready(function(){ $.fn.zTree.init($("#permission_tree"), setting); }); 是采用的异步加载,单击父节点时把父节点id传到后台数据库查询返回其对应的子节点,然后显示,callback里面定义的函数一个都没起作用呢,求大神赐教
1 下一页