1. 功能

    表格树组件,主体仍是表格,所以表格组件相应功能具全,且用法同 Table 组件。组件还依赖于 TreeTableColumn 组件,用来在指定的列展现树状结构。

  2. 参数

    参数名 参数类型 是否必须 默认值 描述
    id java.lang.String 元素 id 和 name 属性的值
    treeNodeIndex java.lang.String 表格树的序号字段对应的列名
    treeNodeName java.lang.String 表格树的树节点字段对应的列名
    contextMenu java.lang.String 右键菜单,格式为 组名:菜单荐名称:菜单项事件,如:新增:tableAddRow,删除:tableDeleteRow,清空:tableCleanRow,group1:清空所有:tableCleanRows
    id java.lang.String 可选
    rowClick java.lang.String 行单击事件
    rowDBClick java.lang.String 行双击事件
    columnClick java.lang.String 列单击事件
    columnDBClick java.lang.String 列双击事件
  3. TreeTableColumn 组件

    1. 功能

      在 TreeTable 组件中使用,该组件在指定的列展现树状结构。

    2. 参数

      参数名 参数类型 是否必须 默认值 描述
      id java.lang.String td 的 id 和 name 的值,若 CheckBox 或 Radio,则为他们的 id 和 name 的值
      tableName java.lang.String 归属 Table 组件的名称,必须与 jwcid="@TreeTable" 的 id 相同
      listener org.apache.tapestry.IActionListener 获取子节点的事件,数据以 Ajax 方式返回
      data java.util.Map 列数据,一般为Foreach里的value属性
      showCheckBox boolean true 是否需要 checkbox 或 radio
      checkBoxType java.lang.String checkbox 可选值 checkbox 或 radio,默认为 checkbox
      parentNodeId java.lang.String data 属性里父节点字段名,生成时将通过 data.get(parentNodeId) 来取值
      nodeId java.lang.String data 属性里节点字段名,生成时将通过 data.get(nodeId) 来取值
      nodeText java.lang.String data 属性里节点显示的文本字段名,生成时将通过 data.get(nodeText) 来取值
      nodeCount java.lang.String data 属性里子节点个数的字段名,生成时将通过 data.get(nodeCount) 来取值,非 0 则显示文件夹图标,否则显示文件图标
      checkBoxAction java.lang.String checkbox 的 onclick 的 JS 方法,默认只有一个参数为当前触发事件 DOM 的封装对象,在该JS方法里必须返回 true|false,为 true 则触发 checked 的控制
      textAction java.lang.String 结点文本的 onclick 的 JS 方法,默认只有一个参数为当前触发事件 DOM 的封装对象,在该 JS 方法里必须返回 true|false,为 true 则触发结点展开或收缩的控制
  4. JavaScript API

    Table 组件

  5. HTML代码

    <div jwcid="AreaPart@Part" id="AreaPart" element="div" uiid="AreaPart">
    	<div class="c_scroll c_scroll-table-20">
    		<div class="c_table">
    			<table jwcid="@TreeTable" 
    				id="AreaTreeTable" 
    				rowClick="tableRowClick" 
    				rowDBClick="tableRowDBClick" 
    				contextMenu="新增:tableAddRow,删除:tableDeleteRow,清空:tableCleanRow,group1:清空所有:tableCleanRows"
    				treeNodeIndex="index"
    				treeNodeName="node">
    				<thead>
    					<tr>
    						<th col="index" style="width:10px;">序号</th>
    						<th col="node">节点</th>
    						<th col="areaName">地州名称</th>
    						<th col="areaCode">地州编码</th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr jwcid="@Foreach" source="ognl:areas" value="ognl:area" index="ognl:rowIndex" element="tr">
    						<td ><span jwcid="@Insert" value="ognl:rowIndex"></span></td>
    						<td jwcid="@TreeTableColumn" 
    							id="areas"
    							tableName="AreaTreeTable"
    							listener="ognl:listeners.queryAreas"
    							data="ognl:area"
    							showCheckBox="true"
    							checkBoxType="checkbox" 
    							parentNodeId="parentAreaCode"
    							nodeId="areaCode"
    							nodeText="areaName"
    							nodeCount="areaCount"
    							checkBoxAction="treeCheckBoxAction(node)"
    							textAction="treeTextAction(node)">
    						</td>
    						<td><span jwcid="@Insert" value="ognl:area.areaName"></span></td>
    						<td><span jwcid="@Insert" value="ognl:area.areaCode"></span></td>
    					</tr>
    				</tbody>
    			</table>
    		</div>
    	</div>
    	<div jwcid="@NavBar" name="areanav" cond="AreaCond" part="AreaPart" listener="queryAreas" pageSize="20" count="ognl:areasCount"></div>
    </div>
    
  6. Java 代码

    public void queryAreas(IRequestCycle cycle) throws Exception {
    	IDataBus cond = createData("AreaCond");
    	
    	/** 定义节点参数 */
    	TreeParam param=TreeParam.getTreeParam(cycle);
    	/** 判断是否有节点,没次点击节点时,会将treeId的值赋给parent_id */
    	String parentId=param.getParentNodeId();
    	
    	/** 若没有上级节点,表示第一次载入,此时初始根节点 */
    	if (parentId == null) {
    		/** 模拟服务返回数据 */
    		IDataBus nodes = getNodes(cond);
    		
    		/** 设置初始数据*/
    		setAreas(nodes.getDataArray());
    		
    		/** 设置分页数据 */
    		setAreasCount(nodes.getContext().getDataCount());
    	} else {
    		/** 根据上级节点获取子节点数据*/
    		IDataBus nodes= getNodesByParent(parentId);
    		/** Ajax方式返回到客户端*/
    		getContext().setAjax(nodes);		
    	}
    }
    
    /**
     * 模拟后台服务返回数据
     * @return
     */
    public IDataBus getNodes(IDataBus cond) {
    	IDataset nodes = new DatasetList();
    	
    	/**模拟分页参数*/
    	long start = cond.getContext().getPaginStart();
    	long end = cond.getContext().getPaginEnd();
    	int dataCount = 60;
    	
    	for (int i=1; i<=dataCount; i++) {
    		if (i>=start && i<=end) {
    			IData data = new DataMap();//同JSONObject
    			data.put("areaCode", "0000" + i);
    			data.put("parentAreaCode", "0000" + (i <= 9 ? "" : String.valueOf(i).charAt(0)));
    			data.put("areaName", "南京" + i);
    			data.put("areaCount", String.valueOf(i%4));
    			nodes.add(data);
    		}
    	}
    	
    	IDataBus bus = new DataBus(new DataContext(), JSONArray.fromObject(nodes));
    	bus.getContext().setDataCount(dataCount);
    	
    	return bus;
    }
    
    /**
     * 模拟后台服务返回数据
     * @param parentId
     * @return
     */
    public IDataBus getNodesByParent(String parentId) {
    	IDataset nodes = new DatasetList();
    	int dataCount = 60;
    	for (int i=1; i<=dataCount; i++) {
    		String parentAreaCode = "0000" + (i <= 9 ? "" : String.valueOf(i).charAt(0));
    		if (parentAreaCode.equals(parentId)) {
    			IData data = new DataMap();//同JSONObject
    			data.put("areaCode", "0000" + i);
    			data.put("parentAreaCode", parentAreaCode);
    			data.put("areaName", "南京" + i);
    			data.put("areaCount", String.valueOf(i%4));
    			nodes.add(data);
    		}
    	}
    	
    	IDataBus bus = new DataBus(new DataContext(), JSONArray.fromObject(nodes));
    	bus.getContext().setDataCount(dataCount);
    	
    	return bus;
    }
    
  7. 图示

    序号 ECL 参数 参数说明
    1 元素    
    2 组件    
    2.1 标题栏    
    2.2 表格    
    2.2.1 基础外观    
    2.2.2 偶数行 even 区分奇偶行,方便用户查看单行数据。
    2.2.3 选定行 on 选择某一行,指定后续操作对象。
    2.2.4 强调行 strong 强调区分显示某一行。
    2.2.5 自动换行 wrap 需要一目了然地显示多行文本信息时,使单元格支持换行。应当尽量避免使用多行文字信息,必要时采取点击查看详情的方式来处理。
    2.2.5 表格树 level 展示层级结构的二维数据。
    2.3 树状结构菜单    
    2.4 列表    
    2.5 分页标签    
    2.6 表单    
    3 布局