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

simplesns 发布于 2011/04/12 21:35
阅读 276
收藏 1

开场白:

       先啰嗦两句吧,在该系统的不断的深入开发中,发现系统中需要的树结构显示的地方很多,而且树上的事件也多种多样。我记得以前做开发的时候,定义的树结构是自己写的一些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。

结束语:

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

加载中
返回顶部
顶部