首页 新闻 会员 周边 捐助

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; }

    }
院系类

这是运行出来显示的效果:

mczxmin的主页 mczxmin | 初学一级 | 园豆:196
提问于:2014-01-22 11:51
< >
分享
最佳答案
0

我用另一种方法写的序列化,结果显示出来了,不过还是要谢谢@天天爱复制 了,多谢多谢~~~~~~~

mczxmin | 初学一级 |园豆:196 | 2014-01-22 23:06
其他回答(3)
0

你的ViewCollege类中不是有个SchoolID吗,zTree的展开事件中是可以取到ViewSchool 的ID的,然后你通过这个ID就可以查询出对应的院系,转成json格式返回就行了

收获园豆:8
Zery | 园豆:6151 (大侠五级) | 2014-01-22 13:29

好的,我试试

支持(0) 反对(0) mczxmin | 园豆:196 (初学一级) | 2014-01-22 13:35

@清风吹过的日子: 大侠,我这边出现了这样的问题,在调试的时候,我想用alert弹出选中节点的相关信息,可是expandNode事件没反应,请问这是怎么回事?

支持(0) 反对(0) mczxmin | 园豆:196 (初学一级) | 2014-01-22 14:17

@清风吹过的日子: 

function zTreeOnExpand(event, treeId, treeNode) {
    alert(treeNode.tId + ", " + treeNode.name);
};
var setting = {
    callback: {
        onExpand: zTreeOnExpand
    }
};

注意参考官方的API文档写法

支持(0) 反对(0) Zery | 园豆:6151 (大侠五级) | 2014-01-22 19:48
0

自己拼JSon,当然要按照格式去拼。这之中还能设置一些样式什么的。 json无非是一个字符串。然后传进去就行了。

expandNode事件 ,这个事件我要是没记错的话是展开节点的事件吧!

var setting = {
      callback: {
        beforeClick: beforeClick
    }
    };

//点击节点事件
function beforeClick(treeId, treeNode) {   
  alert(treeId);
} 


貌似是这个样子的。

收获园豆:4
大楚打码人 | 园豆:4313 (老鸟四级) | 2014-01-22 14:58

这个格式是正确的,用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));
        });
    };
beforeclick

其中data为回调函数返回的数据,用length测试长度显示为1,但在后台显示的数据长度为2;这是怎么回事?另外,在调试运行的时候提示“tid”未声明,如图:各位大侠,请问这是什么原因啊?

支持(0) 反对(0) mczxmin | 园豆:196 (初学一级) | 2014-01-22 16:48

@清风吹过的日子: 

  前台Length长度为1肯定没有错,返回的是一个Json的 str  ,当然长度为1,后台你肯定是反序列化后得到的数据,有2条数据,必定是2.至于tId未定义。我就不是很清楚了,tid 指的的是Tree id  还是节点ID,你在数据序列化Json的时候有这个tid吗?

支持(0) 反对(0) 大楚打码人 | 园豆:4313 (老鸟四级) | 2014-01-22 16:58

@天天爱复制:数据序列化的时候没有这个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

能帮我看看错哪了,多谢~~~~~~

支持(0) 反对(0) mczxmin | 园豆:196 (初学一级) | 2014-01-22 17:52

@清风吹过的日子:

刚在网上找了下ztree的 问题。有人给出这样的答案

tid应该是ztree自己设的id,不是你数据里的id

规则大概是树的名称+"_"+你给的id,例如“tree_501”这种形式的是tid的值,可以的话,你不妨别用序列化,自己拼写个 json得了。我自己拼写的json,调用正常。还可以去看看ztree的官方API。

支持(0) 反对(0) 大楚打码人 | 园豆:4313 (老鸟四级) | 2014-01-22 18:06

@天天爱复制: 现在我有个疑问,这个tid是这样得到的吗:就是返回数据里面再拼接出tid来吗?

[{"Code":"GJMYXY","ID":2,"Name":"国际贸易学院","OrderID":2,"ParentID":null,"SchoolID":1},{"Code":"SMKXY","ID":3,"Name":"生命科学院","OrderID":3,"ParentID":null,"SchoolID":1}]
View Code
支持(0) 反对(0) mczxmin | 园豆:196 (初学一级) | 2014-01-22 22:40
0

ajax查询,然后动态添加

收获园豆:8
[秦时明月] | 园豆:738 (小虾三级) | 2014-01-23 09:43

我用的就是ajax 查询,不过还是要谢谢各位,

支持(0) 反对(0) mczxmin | 园豆:196 (初学一级) | 2014-01-27 10:16
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册