ztree加载数据的问题
0
悬赏园豆：20
[已解决问题]
解决于 2014-03-20 14:08
最近刚开始研究zTree，碰到这样一个问题，树形结构的一级节点数据是从一个表中查询出来的，而一级节点的子节点的数据是从另外一个表中查询出来的，像这样的结构要怎么样写节点的展开事件？
public class ViewSchool { public int ID { set; get; } public string Name { set; get; } public string Code { set; get; } public string ServerIP { set; get; } public string Port { set; get; } }
下面是院系类：
public class ViewCollege { public int ID { set; get; } public string Name { set; get; } public string Code { set; get; } //排序编号 public int OrderID { set; get; } // 父类ID public int? ParentID { set; get; } public int SchoolID { set; get; } }
这是运行出来显示的效果：
最佳答案
0
我用另一种方法写的序列化，结果显示出来了，不过还是要谢谢@天天爱复制 了，多谢多谢~~~~~~~
其他回答(3)
0
你的ViewCollege类中不是有个SchoolID吗，zTree的展开事件中是可以取到ViewSchool 的ID的，然后你通过这个ID就可以查询出对应的院系，转成json格式返回就行了
收获园豆：8
好的，我试试
@清风吹过的日子: 大侠，我这边出现了这样的问题，在调试的时候，我想用alert弹出选中节点的相关信息，可是expandNode事件没反应，请问这是怎么回事？
@清风吹过的日子:
function zTreeOnExpand(event, treeId, treeNode) { alert(treeNode.tId + ", " + treeNode.name); }; var setting = { callback: { onExpand: zTreeOnExpand } };
注意参考官方的API文档写法
0
自己拼JSon，当然要按照格式去拼。这之中还能设置一些样式什么的。 json无非是一个字符串。然后传进去就行了。
expandNode事件 ，这个事件我要是没记错的话是展开节点的事件吧！
var setting = { callback: { beforeClick: beforeClick } }; //点击节点事件 function beforeClick(treeId, treeNode) { alert(treeId); }
貌似是这个样子的。
收获园豆：4
这个格式是正确的，用alert弹出的信息也是正确的，但是这里面的情况有点不一样：当执行beforeClick事件时，我后台从college表中获取数据，college表中的数据结构与school表不一样，用 zTree.addNodes方法报错，如下图：（从后台获取到的数据是正确，如下，）
[{"Code":"GJMYXY","ID":2,"Name":"国际贸易学院","OrderID":2,"ParentID":null,"SchoolID":1},{"Code":"SMKXY","ID":3,"Name":"生命科学院","OrderID":3,"ParentID":null,"SchoolID":1}]
添加到对应节点的方法如下：
function beforeClick(treeId,treeNode) { $.post("/model/School/GetCollegeNode", { code: treeNode.Code }, function (data) { // var l = new Array(data), zTree = $.fn.zTree.getZTreeObj("tree"); zTree.addNodes(treeNode, new Array(data)); }); };
其中data为回调函数返回的数据，用length测试长度显示为1，但在后台显示的数据长度为2；这是怎么回事？另外，在调试运行的时候提示“tid”未声明，如图：各位大侠，请问这是什么原因啊？
@清风吹过的日子:
前台Length长度为1肯定没有错，返回的是一个Json的 str ,当然长度为1，后台你肯定是反序列化后得到的数据，有2条数据，必定是2.至于tId未定义。我就不是很清楚了，tid 指的的是Tree id 还是节点ID，你在数据序列化Json的时候有这个tid吗？
@天天爱复制：数据序列化的时候没有这个tId,我不知道这个tid是指的那个，用FF点击进去后，显示如下：
下面是相关代码：
var zTreeObj, settingTrade = { data: { simpleData: {//获取数据时节点Id和父id对应json的属性名,rootPId 为根节点的id enable: true, idKey: "Code", pIdKey: "ID", rootPID: null }, key: { name: "Name" } }, async: { enable: true, url: "/model/School/zTree", autoParam: ["Code"], dataType: "json" // dataFilter: filter }, check: { enable: true, chkStyle: "checkbox" }, edit: { enable: true, removeTitle: "删除节点", renameTitle: "编辑节点名称", // showRemoveBtn: setRemoveBtn, showRemoveBtn: showRemoveBtn, showRenameBtn: showRenameBtn, showRemoveBtn: true, editNameSelectAll: true }, view: { nameIsHTML: true, showIcon: true, showLine: true, expendSpeed: "normal", addHoverDom: addHoverDom, removeHoverDom: removeHoverDom, selectMulti: false }, callback: { // expandNode: expandNode, // onCheckNode: onCheckNode, // beforeExpand: beforeExpand, onAsyncSuccess: onAsyncSuccess, onAsyncError: onAsyncError, // beforeDrag: beforeDrag, beforeRemove: beforeRemove, // beforeEditName: beforeEditName, beforeRename: beforeRename, onRename: onRename, // onCheck: onCheck, beforeClick: beforeClick //onCheckNode: onCheckNode // onClick: onClickTrade } }; $(function () { zTreeObj = $.fn.zTree.init($("#tree"), settingTrade); }); function beforeRemove(treeId, treeNode) { if (confirm("确认删除" + treeNode.Name + "吗？")) { var param = treeNode.Code; $.post("/model/School/DelFirstNode", { code: param }, function (data) { if (data.success) { alert("删除节点成功！"); } }) } else { return false; } }; function onAsyncSuccess(event, treeId, treeNode, msg) { }; function onAsyncError() { alert(" 数据加载失败"); }; function beforeExpand(treeId, treeNode) { if (!treeNode.isAjaxing) { // nodes = zTree.getCheckedNodes(true), var startTime = new Date(); treeNode.times = 1; ajaxGetNodes(treeNode, "refresh"); return true; } else { alert("zTree正在加载数据，请稍后展开节点。。。"); return false; } }; function showRemoveBtn(treeId, treeNode) { return true; }; function showRenameBtn(treeId, treeNode) { return true; }; function beforeRename(treeId, treeNode, newName, isCancel) { if (newName.length == 0) { alert("节点名称不能为空！"); var zTree = $.fn.zTree.getZTreeObj("tree"); setTimeout(function () { zTree.editName(treeNode) }, 10); return false; } return true; // $.post("/model/School/reNameNode", { code: treeNode.Code, name: newName }, function (data) { // if (data.success) { // alert("修改名称成功！"); // } // }) }; function onRename(e, treeId, treeNode, isCancle) { alert("编辑了节点" + treeNode.Name); $.post("/model/School/reNameNode", { code: treeNode.Code, name: treeNode.Name }, function (data) { if (data.success) { alert("修改名称成功！"); LoadDiv("#divSchoolList", "/model/School/List"); } }) }; function addHoverDom(treeId, treeNode) { var sObj = $("#" + treeNode.ID + "_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(treeId); zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.ID, name: "new node" + newCount }); $.ajax({ url: '/model/School/AddNode', //url action是方法的名称 // data: { id: (100 + newCount), pid: treeNode.id, name: "new node" + newCount },\ data: { id: treeNode.ID, name: "new node" + newCount }, type: 'POST', success: function (data) { //异常完成后，刷新父节点及下面所有子节点 zTree.reAsyncChildNodes(treeNode, "refresh"); } }); newCount++; return false; }); }; function removeHoverDom(treeId, treeNode) { $("#addBtn_" + treeNode.ID).unbind().remove(); }; function onCheckNode(event, treeId, treeNode) { // alert(treeNode.Name); expandNode(new Array(treeNode)); }; function beforeClick(treeId, treeNode) { // alert(treeNode.Code); $.post("/model/School/GetCollegeNode", { code: treeNode.Code }, function (data) { //alert(); // var l = new Array(data), zTree = $.fn.zTree.getZTreeObj("tree"); // zTree.addNodes(parentNode, newNodes); //alert(treeNode.id); zTree.addNodes(treeNode, new Array(data)); }); }; };
能帮我看看错哪了，多谢~~~~~~
@清风吹过的日子:
刚在网上找了下ztree的 问题。有人给出这样的答案
tid应该是ztree自己设的id，不是你数据里的id
规则大概是树的名称+"_"+你给的id，例如“tree_501”这种形式的是tid的值，可以的话，你不妨别用序列化，自己拼写个 json得了。我自己拼写的json，调用正常。还可以去看看ztree的官方API。
@天天爱复制: 现在我有个疑问，这个tid是这样得到的吗：就是返回数据里面再拼接出tid来吗？
[{"Code":"GJMYXY","ID":2,"Name":"国际贸易学院","OrderID":2,"ParentID":null,"SchoolID":1},{"Code":"SMKXY","ID":3,"Name":"生命科学院","OrderID":3,"ParentID":null,"SchoolID":1}]
0
ajax查询,然后动态添加
收获园豆：8
我用的就是ajax 查询，不过还是要谢谢各位，