和“夫子”一起学simple：树结构

开场白：

       先啰嗦两句吧，在该系统的不断的深入开发中，发现系统中需要的树结构显示的地方很多，而且树上的事件也多种多样。我记得以前做开发的时候，定义的树结构是自己写的一些JS代码，说实话真的很麻烦。不过现在随便在Google或Baidu上一搜，会有很多高手或者开源给出的简单用法。当然了，现在既然选择了用simple作为开发的框架。那就来摸索摸索simple给出的树组件吧。现在就开始吧。

Simple之旅:

       还是先来介绍下这次要实现的内容吧。

       树结构一:在各种题型或者试卷编辑的时候都会存在“科目”的选择。当然把“科目”写成”<select>”也是可以实现的，可是在系统里“科目”已经作为字典的形式存在了。使用树的主要目的。

一：要利用字典。

二：要应用上更简单。

三：样式统一好看。

       树结构二：需要把页面分成左右两边，左边是树结构，右边是内容。点击左边的树节点触发事件，在右边的页面上响应左边的事件发生变化.

       下面就来看看我是怎么实现的吧。

       先来看下树结构一:这次先看看效果图吧：

       点击红色的地方就弹出了我们想要的树结构。首先大家要理解这里树结构里的数据是来自字段，所以我用到了dictSelect组件。下面是一些代码。

<dictSelect name="prjAct_subject" dictName="subject_level"

title="科目选择" bindingText="subject_text" bindingId="subject">

</dictSelect>

       我理解的一些属性含义：

dictName：字典的名字，刚刚也介绍了，数据来自于字典。每个字典都有一个唯一的名字。

Title：窗口显示的名字

bindingId：返回值的Id返回给页面上的谁?——SU0

bindingText：返回值的中文返回给页面上的谁?­­­——大学语文

dictType：有两个选择(list,tree),默认是tree

list如图所示：

Tree如图所示：

Draggable：窗口是否可以拖动，默认是true，可以的。

       其他的一些属性没有测试，有的测试了没看出变化就不得而知了，还希望其他知道的朋友们告诉一下。

       树结构一就先了解这么多吧，下面再来看看树结构二吧。树结构二要比树结构一麻烦些，因为它本身的功能多，待实现的内容丰富多样。而且树的显示结构完全是自定义的。从官方的Demo网站可以知道，要实现树结构需要用到<tree>组件。

       在第一张图里已经显示了我们的效果，这里就不在单独贴图出来了。直接看看代码吧。

       JSP:最简单的实现

<div id="examPaperNavTree"></div>

       JSP对应的XML:也是相当的简单：

<tree name="examPaperNavTree" containerId="examPaperNavTree">

       <treenode text="科目" opened="true"

              handleClass="com.app.online.exampaper.ExamPaperTree">

       </treenode>

</tree>

       JAVA类的实现:

public classExamPaperTree extends AbstractPlatformTree {

    @Override

    publicCollection<? extendsAbstractTreeNode> getTreenodes(finalComponentParameter compParameter, finalAbstractTreeNode treeNode)

           throwsException {

       final AbstractTreeBean treeBean = (AbstractTreeBean) compParameter.componentBean;

       final Collection<SysDict> sysDicts = SysDictUtils.getSysDictChilds(SysDictUtils.subject_level);

       final List<AbstractTreeNode> childNodes = new ArrayList<AbstractTreeNode>();

       treeNode.setJsClickCallback("$Actions.loc('/online/exampaper/exampaper.jsp');");

       for(final SysDict sysDict : sysDicts) {

           final TreeNode childNode = new TreeNode(treeBean, treeNode, sysDict.getText());

           childNode.setImage(OrgUtils.deployPath+ "css/blue/images/chart.png");

           final StringBuilder builder = new StringBuilder();

           builder.append("$Actions.loc(\"/online/exampaper/exampaper.jsp?");

           builder.append("subject__eq=");

           builder.append(sysDict.getName());

           builder.append("\");");

           childNode.setJsClickCallback(builder.toString());

           childNodes.add(childNode);

       }

       return childNodes;

    }

}

       就这么多的代码就实现了我们需要的实现。代码真的很简单，还是介绍下我可以理解的tree组件和treenode的属性吧。

containerId：大家看了代码后应该明白了，对于于JSP里DIV的id

checkboxes:显示复选框

checkboxesThreeState：复选框的级联选中

opened：是否展开该节点

dynamicLoading：动态加载，需要的时候才加载

check：是否默认选中（1代表选中）

contextMenu：关联右键菜单：（例如contextMenu=”test”）

<menu name="test">

           <menuitem title="添加"></menuitem>

           <menuitem title="删除"></menuitem>

</menu>

       OK吧。看看类里面的实现吧：

finalAbstractTreeNode treeNode：是“科目”这个节点。

treeNode.setJsClickCallback("$Actions.loc('/online/exampaper/exampaper.jsp');")：该方法可以给节点设置事件，本事件是点击后跳转到某个页面。如果是刷新右边的一个表格的话，也可以写为.$Actions[‘tablePagerName’](‘参数’);

finalCollection<SysDict> sysDicts = SysDictUtils.getSysDictChilds(SysDictUtils.subject_level);这是我获得字段的实现。

具体实现如下：

public static Collection<SysDict> getSysDictChilds(final String dictType) {

       final ArrayList<SysDict> al = new ArrayList<SysDict>();

       final SysDict sysDict = DictUtils.getSysDictByName(dictType);

       final ITableEntityManager temgr = (ITableEntityManager) sysDict.dataObjectManager;

       final IQueryEntitySet<SysDict> qs = temgr.query(new ExpressionValue("documentid=?", new Object[] { sysDict.getId() }), SysDict.class);

       SysDict tSysDict;

       while((tSysDict = qs.next()) != null) {

           al.add(tSysDict);

       }

       return al;

    }

       把它写成一个工具类，是为了开发应用的方便性。到这里就介绍完了这两种树结构。当然了，还有很多不了解的地方，以后还得仔细研究simple。

结束语:

       好吧，今天的学习就到这里吧，小弟不才，关于这个组件就只能介绍这么多了。有深入了解的朋友们，还希望你们不要吝啬你的手，在你的键盘上挥洒几下，给俺留点高见吧。