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