1. 功能

    以同步或异步加载数据的方式展现树结构数据,并支持与树节点进行交互操作

  2. 参数

    参数名 参数类型 是否必须 默认值 描述 说明
    id java.lang.String 设置组件 id,也是 js 访问改组件对象的名字,例如:jwcid="id@Tree"
    listener org.apache.tapestry.
    IActionListener
    树组件加载数据的页面类方法名,用于给树组件提供数据
    showCheckBox boolean true 是否显示树叶子节点的选框 该参数为全局控制参数,单个节点是否显示选框还必须由节点数据本身的 showCheckBox 属性决定。
    checkBoxName java.lang.String null 设置树组件叶子节点选框的 name 属性,用户提交数据时再后端获取树组件已选选项 如果该参数为 null 时,树组件生成的选框的 name 属性为树组件本身的 id。
    checkBoxType java.lang.String checkbox 设置树组件选框的选框类型,只能设置为 checkbox|radio 设置为 checkbox 时显示复选框;设置为 radio 时,显示单选框。
    async boolean false 设置树组件数据是否异步加载 当该参数设置为 true 时候,每个树节点的子节点在展开时加载,每展开一次树节点都会请求一次数据。对于数据量大的树应该使用异步加载方式。
    params com.ailk.common.
    data.IData
    null 设置树组件异步加载节点数据时提交的额外业务参数 某些情况下需要在展开子节点加载数据时携带业务参数。
    checkBoxAction java.lang.String null 设置树组件选框的 click 事件 传入方法名进行调用,例如:checkBoxAction="myCheckBoxAction(nodedata)" ,nodedata为固定参数,用于在方法中获取当前节点数据。
    textAction java.lang.String null 设置树组件叶子节点的 click 事件 传入方法名进行调用,例如:textAction="myTextAction(nodedata)" ,nodedata为固定参数,用于在方法中获取当前节点数据。
    expandPath java.lang.String null 设置树组件需要展开的节点 ID 路径 需要用"-"连接符将多个节点 id 连接. 例如:"root-node1-node11",加载树时会将节点依次展开
    init boolean ture 设置是否在页面加载时是否加载Tree数据 有时候需要执行一系列其它动作后再加载树数据,可以通过treeId.init();执行加载
  3. 自定义添加树节点

    $.tree.fn.bindData(nodeid,childata);
    
    1. 参数说明

      nodeid:数据绑定节点id。
      格式:树Id○一级节点Id●二级节点Id●三级节点Id...
      值来源:<li class="unfold" id="TreeId○nation●province" > <a/> <input/> <a/> <ul>...</ul></li>
      或绑定事件 textAction 中 nodeid="TreeId○"+nodedata.dataid

      childata:绑定的 json 数据,注意格式。dataid 格式:一级节点Id●二级节点Id●当前节点Id

    2. 代码示例

      var myobj={"hunan":{
      		"text": "湖南",//显示文字
      		"showcheck": "true",//是否显示checkbox或radio
      		"id": "hunan",
      		"haschild": "false",//是否有子节点
      		"order": "1",//排序
      		"isnew":"true",//新增
      		"complete": "false",
      		"value": "hunan",//checkbox或radio值,showcheck=true时使用
      		"expand": "false",
      		"groupid": null,
      		"dataid": "nation●province●hunan",
      		"href": null,
      		"checked": "false",//checkbox或radio是否选中,showcheck=true时使用
      		"disabled": "false"
      	},"jiangsu":{
      		"text": "江苏",
      		"showcheck": "true",
      		"id": "jiangsu",
      		"order": "0",
      		"complete": "false",
      		"value": "jiangsu",
      		"expand": "false",
      		"groupid": null,
      		"dataid": "nation●province●jiangsu",
      		"href": null,
      		"checked": "false",
      		"isnew":"true",
      		"disabled": "false",
      		"haschild": "true",
      		"childNodes":{
      			"nanjing":{
      				"text": "南京",
      				"showcheck": "true",
      				"id": "nanjing",
      				"haschild": "false",
      				"order": "0",
      				"complete": "false",
      				"value": "nanjing",
      				"isnew":"true",
      				"expand": "false",
      				"groupid": null,
      				"dataid": "nation●province●jiangsu●nanjing",
      				"href": null,
      				"checked": "false",
      				"disabled": "false"
      			}
      		}
      	}};
      $.tree.fn.bindData("areaTree○nation●province",myobj);
      
  4. 示例

    1. HTML 代码

      一次性加载的同步树

      <div jwcid="mytree@Tree" listener="ognl:listeners.loadTreeData" expandPath="root"></div>
      

      分步加载的异步树

      <div jwcid="areaTree@Tree" listener="ognl:listeners.loadSimpleTree" 
      	async="true" expandPath="YUNN-0875-M0GB" 
      	textAction="areaTreeTextAction(nodedata)"
      	checkBoxAction="areaTreeCheckBoxAction(nodedata)"></div>
      
    2. Javascript 代码

      <script language="javascript">
      //<!--
      function test(){
      	//设置树每次请求数据时,携带的参数
      	mytree.setParam("BIZ_CODE","08DS");
      
      	//按默认的分隔符"-",依次展开树节点
      	mytree.expandByPath("root-node-node_about");
      	
      	//按指定的分隔符"@",依次展开树节点
      	mytree.expandByPath("YUNN@node1@node2","@");
      }
      
      function areaTreeTextAction(nodedata){
      	//当前点击节点的JSON数据
      	alert(nodedata);
      	//使用JSON方式访问nodedata的属性
      	alert(nodedata.dataid);
      }
      
      function areaTreeCheckBoxAction(nodedata){
      	//当前点击选框的JSON数据
      	alert(nodedata);
      
      	//return false,则不会进行选取
      	return false;
      }
      //-->
      </script>
      
    3. Java 代码

      一次性加载的同步树

      public void loadTreeData(IRequestCycle cycle) {
      
      	/** 定义树 */
      	TreeItem root1 = new TreeItem("root", null, "root", null ,true);
      	/** 定义根节点 */
      	TreeItem node1 = new TreeItem("node", root1, "班级视图", null ,true);
      	/** 定义根节点下的子节点1 */
      	TreeItem nod_desktop1 = new TreeItem("node_desktop", node1, "班级首页", null,null ,true);
      	/** 定义子节点1下的子节点 */
      	new TreeItem("nod_desktop_1", nod_desktop1, "首页节点1", null,null ,true);
      	new TreeItem("nod_desktop_2", nod_desktop1, "首页节点2", null,null ,true);
      	new TreeItem("nod_desktop_3", nod_desktop1, "首页节点3", null,null ,true);
      
      	/** 定义根节点下的子节点1 */
      	TreeItem node_about = new TreeItem("node_about", node1, "班级概况", null,null ,true);
      	/** 定义子节点1下的子节点 */
      	new TreeItem("node_about_1", node_about, "班级概况1", null,null ,true);
      	new TreeItem("node_about_2", node_about, "班级概况2", null,null ,true);
      	new TreeItem("node_about_3", node_about, "班级概况3", null,null,true);
      
      	/** 定义根节点下的其他子节点 */
      	new TreeItem("node_basic", node1, "基本信息", null,null ,true);
      	new TreeItem("node_staff", node1, "班级学员", null,null ,true);
      	new TreeItem("node_teacher", node1, "班级教师", null,null ,true);
      	new TreeItem("node_curricula", node1, "班级课程",null,null ,true);
      	new TreeItem("node_datum", node1, "班级资料",null,null ,true);
      	new TreeItem("node_paper", node1, "班级试卷", null,null ,true);
      	new TreeItem("node_exam", node1, "班级考卷",null,null,true);
      	new TreeItem("node_result", node1, "成绩统计",null,null ,true);
      	
      	TreeParam param=TreeParam.getTreeParam(cycle);
      
      	IData treeData=TreeFactory.buildTreeData(param, new TreeItem[]{root1});
      
      	context.setAjax(treeData);
      }
      

      分步加载的异步树

      /**
       * 简单动态树(按区域展开下级区域)
       * 动态载入树节点方法,每点一次树节点,执行一次该方法
       * @param cycle
       * @throws Exception
       */
      public void loadSimpleTree(IRequestCycle cycle) throws Exception {	
      	BaseContext ctx=getContext();
      	/** 定义节点参数 */
      	TreeParam param=TreeParam.getTreeParam(cycle);
      	
      	IData input=new DataMap();
      	input.put("method", "queryAreasByParent");
      	
      	/** 判断是否有节点,没次点击节点时,会将treeId的值赋给parent_id */
      	
      	String parent_id=param.getParentNodeId();
      	
      	/** 若没有上级节点,表示第一次载入,此时初始根节点 */
      	if (parent_id == null) {			
      		IData root = new DataMap();
      		String root_id = "YUNN";
      		
      		root.put("AREA_CODE", root_id);
      		root.put("AREA_TEXT", "全省");		
      		
      		input.put("AREA_CODE", root_id);
      		
      		IDataOutput output=ServiceFactory.call("SS_Examples_Service", ctx.createDataInput(input));
      	
      		/** 根据root_id获取子节点数量 */
      		root.put("NODE_COUNT", String.valueOf(output.getData().size()));
      		
      		ctx.setAjax(TreeFactory.buildTreeData(param, new DatasetList(root),"AREA_CODE","AREA_TEXT","NODE_COUNT"));			
      	} else {
      		
      		input.put("AREA_CODE",parent_id);
      
      		IDataOutput output=ServiceFactory.call("SS_Examples_Service", ctx.createDataInput(input));
      		
      		IDataset ds=output.getData();
      
      		
      		/** 根据上级节点获取节点数据,节点需要包含子节点数量 */
      		ctx.setAjax(TreeFactory.buildTreeData(param, ds, "AREA_CODE","AREA_TEXT","NODE_COUNT",true));		
      	}	
      }
      
    4. 图示