【项目经验】EasyUI Tree

ITOO5.0开始了，我参加了伟大的基础系统，从整体上来说，基础系统有三个职能：

         1、自己的核心职能——选课（公共选修课，专业选修课），课表；

         2、为其他系统提供真实数据；

         3、维护信息

        

        而近两三天，我一直在和我的小伙伴东辉做我们的公共选修课。而这里面，我们遇到的第一个困难就是——树。

       在之前的4.1，我们做的更多的是维护，而现在，我们要做的是开发！所以自己开发一棵树对于没有接触过着的我来说，还是有一点难度的。可是功夫不负有心人，摸着石头过河，总算是有点效果。

分享：

           

      在这里，我们用到的easyui tree，前台很简单，需要：

<ul id="tree"></ul>

这就够了，有一个可以接收后台数据的东西。

       然后就是对   jquery.ztree.css和jquery.ztree.js引用，这些都是easyui封装好的，我们可以直接用，如有需要，可以单独学习。

再就是对这个树的定义：

/*
*定义树：
*/
var tree = {
    /**
    * 所有的初始化的操作
    */
    pFunction: {
        zTree: '',
        setting:
        {
            check: {
                enable: true,
                chkboxType: { "Y": "ps", "N": "ps" }
            },
            data:
            {
                key:
                {
                    name: "Name"
                },
                simpleData:
                {
                    enable: true,
                    idKey: "ID",
                    pIdKey: "PID",
                    rootPId: "null"
                }
            }
        },
        //加载树的资源
        loadTree: function () {
            $.post("/SetCourse/QueryCollegeTree", { level: "本科" }, function (resourceInfo) {
                $.fn.zTree.init($("#tree"), tree.pFunction.setting, resourceInfo);
            });
        },
    }
};  

再就是定义数据源了，也就是我们使用mvc里面的controller或者是别的数据来源了

listTree
foreach{ var item in listTree}
{
    listTree listtree=new listTree();
    listtree.id=item.id;
    listtree.pid=item.pid;
    listtree.name=item.name
    listTree.Add(listtree);
}

这个只是简单的单表查询，还可以有两张表，其实只是吧单张表分开，也就是pid和id分开

两张表：
foreach{ var item in listTree}{
    listTree listtree=new listTree();
    listtree.id=item.id;
        listtree.pid=item.pid;
        listtree.name=item.name
        listTree.Add(listtree);
    foreach{ var item in listTree}
    {
        listTree listtree=new listTree();
        listtree.id=item.id;
        listtree.pid=item.pid;
        listtree.name=item.name
        listTree.Add(listtree);
}
     listTree.Add(listtree);
}

曾经我以为还可以有三张表组合的树，但是事实证明，那样的话需要有严格的逻辑和思路，否则会出现一个特殊的bug

       所以说，个人认为，简单点的话，我们就需要抽出第三表来存放这里的逻辑信息（如果这样实现，我们就要添加对第三张表的维护功能，酌情！），或者在表里面打上父类的外键，这样，在树的实现上，会简单很多！

总结：

一棵树，首先要有自己的viewmodel表实体；其次是自己的从属关系，即ID和PID；再是对封装好的js的调用；再再就是树的数据来源。