【项目经验】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的调用;再再就是树的数据来源。



原文地址:https://www.cnblogs.com/DoubleEggs/p/5747157.html