1. 功能介绍

    实现静态数,树结构数据是一次加载的,适应于数据量不是很大的树形结构展现,提供灵活的换图标功能,可以换一套皮肤风格,也可以针对某些节点换图标,也可以添加上checkbox选中树的节点,还可以搜索树节点。

  2. 参数说明

    参数名 参数类型 是否必须 默认值 描述
    treeData com.linkage.appframework.data.TreeItem   构建树需要的节点信息
    expandAl boolean类型   false 是否全部展开所有节点,默认是false
    checkbox boolean类型   false 是否需要checkbox
    iconDir java.lang.String类型     树图标目录,可动态定制树图标
    expand boolean类型   true 是否展开根节点
    search boolean类型   false 是否带节点搜索功能
    folder boolean   true 树结点是否需要文件夹图标,满足不同风格需求,为false时树结点只有+-图标
  3. 注意事项

    1. wade:Tree为一次加载所有数据,数据模型采用数据结构TreeItem;
    2. wade:Tree已覆盖wade:WebFxTree的功能,故wade:WebFxTree已经移除,直接将wade:WebFxTree改为wade:Tree既能直接使用
    3. 若设置了checkbox="true"属性,还需要在TreeItem中设置TreeNodeParam来定制checkbox的名称、值、点击动作、是否选中等参数
    4. TreeNodeParam常用用法包括:
      1. new TreeNodeParam(String checkboxName, String checkboxValue)
      2. new TreeNodeParam(String checkboxName, String checkboxValue, String checkedValue)
      3. new TreeNodeParam(String checkboxName, String checkboxValue, String checkedValue, String checkboxAction)
      4. new TreeNodeParam(String checkboxName, String checkboxValue, boolean checked)
      5. new TreeNodeParam(String checkboxName, String checkboxValue, boolean checked, boolean disabled)
      6. new TreeNodeParam(String checkboxName, String checkboxValue, String checkboxAction, boolean checked, boolean disabled)
      注:如果需要设置为单选框(radio),上述的每个方法的第一个参数加入TreeNodeParam.RADIO即可,默认为复选框(checkbox) 如:new TreeNodeParam(TreeNodeParam.RADIO, String checkboxName, String checkboxValue)显示为单选框
      其中:checkboxName表示checkbox名称,checkboxValue表示checkbox值,checkedValue表示若和checkboxValue一致表示选中,checkboxAction表示点击checkbox的动作,checked表示是否选中(可替代checkedValue),disabled表示是否禁止
    5. TreeNodeParam与TreeItem的绑定,当设置checkbox="true"需要,如:
      1. new TreeItem("node1", node, "成绩统计","redirectTo..");
      2. new TreeItem("node1", node, "成绩统计","redirectTo..", new TreeNodeParam("cknames", "1", "1", "alert(this.value)"));
      其中,1中不需要设置checkbox="true",故不需要绑定TreeNodeParam来设置checkbox参数,而2中绑定了TreeNodeParam并设置了checkbox的名称、值、选中值、动作等
    6. TreeItem结构说明
      参数一:节点名称
      参数二:上级节点对象
      参数三:节点标题
      参数四:节点点击时的JavaScript方法
      参数五:树节点参数,一般用于复选框,如new TreeNodeParam("menus", checkboxValue, checkedValue),若不设置则不会出现复选框,一般复选框都是按层次展现,不论怎么灵活设置,一个节点下面必须统一的,即:必须带有复选框或者不带有复选框
      参数六:树排序,默认按树生成的顺序排
      参数七:定制节点图标,如:"component/images/tree/dept/icoFile.gif",如果只需定义整体图标风格,设置wade:Tree的iconDir属性即可
      注:
      设置树的图标有两种方式,可以设置组件的iconDir=" component/images/tree/dept/"来定制树图片目录位置的统一风格,若要定制每个节点使用不同的图片,可以通过TreeItem的参数七来定制
  4. 代码片段

    1. 页面代码

      <div
      	jwcid="@wade:Tree"
      	treeData="ognl:treeItem"
      	checkbox="true"
      	expandAll="true"
      />
      
      触发指定节点(展开或关闭)
      1. 触发根节点:Wade.component.tree.treeRootClick(getElement('TREE_' + 'menu_APP1000'));
      2. 触发树节点:Wade.component.tree.treeNodeClick(getElement('TREE_' + 'menu_APP1000'));
      注:menu_APP1000表示TreeId
      删除指定节点
      1. 删除指定节点和它下面所有子节点:Wade.component.tree.removeTreeNode('TREE_menu_APP1000');
      2. 删除指定节点下面所有子节点但是不指定删除节点本身:Wade.component.tree.treeNodeClick(getElement('TREE_' + 'menu_APP1000'));
  5. 效果演示