1. 功能介绍

    动态表格(tableedit)组件是一个纯javascript组件,它提供了在呈现数据的同时能对数据进行简单的新增修改等批量操作的功能。

  2. 主要特性

    1. 对表格数据进行新增和编辑。
    2. 进行操作后批量更新。
  3. 代码片段

    1. HTML写法(参考quickstart/web/examples/component/TableEdit.html)

      <table id="DeptTable">
      	<thead>
        		<tr>
        			<!--
        				1、定义列名与输入框的对应关系,比如文档框为DEPART_ID,对应列名为col_DEPART_ID
        				2、X_TAG为必须字段,该标记表示记录编辑提交后需要做的操作,如:0:新增 1:删除 2:修改
        				3、对于下拉列表的编辑,由于下拉列表存在值和文本,故列也需要对应有值和文本,下拉列表需要定义两列匹配
        				4、下拉列表对应的列名匹配规则为:下拉列表名字(如:DEPRT_KIND_CODE)匹配下拉值(如:col_DEPART_KIND_CODE)列,下拉列表的文本匹配紧跟下拉文本(下拉文本需要通过点击下拉选项时设置转换)
        			-->
        			<th id="col_X_TAG" style="display:none">TAG</th>
        			<th id="col_DEPART_ID">部门标识</th>
      			<th id="col_DEPART_CODE">部门编码</th>
        			<th id="col_DEPART_NAME">部门名称</th>
      			<th id="col_DEPART_KIND_CODE" style="display:none">部门类型</th>
      			<th id="col_DEPART_KIND">部门类型</th>
        			<th id="col_ORDER_NO">部门排序</th>
        			<th id="col_DEPART_TEXT">部门描述</th>
        		</tr>
      	</thead>
      	<tbody>
      		<tr jwcid="@Foreach" source="ognl:infos" value="ognl:info" element="tr">
      			<td style="display:none"></td>
      			<td><span jwcid="@Insert" value="ognl:info.DEPART_ID" raw="true"/></td>
      			<td><span jwcid="@Insert" value="ognl:info.DEPART_CODE" raw="true"/></td>
      			<td><span jwcid="@Insert" value="ognl:info.DEPART_NAME" raw="true"/></td>
      			<td style="display:none"><span jwcid="@Insert" value="ognl:info.DEPART_KIND_CODE" raw="true"/></td>
      			<td><span jwcid="@Insert" value="ognl:@com.linkage.component.util.Utility@getStaticValue(page, 'TD_M_DEPARTKIND', new java.lang.String[]{'EPARCHY_CODE','DEPART_KIND_CODE'}, 'DEPART_KIND', new java.lang.String[]{visit.epachyId,info.DEPART_KIND_CODE})" raw="true"/></td>
      			<td><span jwcid="@Insert" value="ognl:info.ORDER_NO" raw="true"/></td>
      			<td><span jwcid="@Insert" value="ognl:info.DEPART_TEXT" raw="true"/></td>
      		</tr>
      	</tbody>
      </table>
      
    2. Javascript写法(参考quickstart/web/examples/component/TableEdit.html)

      /** 初始化,DeptPart为指定的表格ID */
      function init() {
      	/* 构造表格控件 */
      	tableedit = new TableEdit("DeptTable",false,myOnClickMethod);
      	//构造参数为:new TableEdit(tableID["指定表格ID"]
      			,encode[“在设置CellValue的时候是否将html编码,默认为false”]
      			,myOnClickMethod["自定义的列点击触发事件"]);
      }
      
      
      /** 
      	自定义的列点击触发事件的上下文是它所属的TableEdit实例
      	e为必须的固定参数,它是一个经过封装的js event对象
      **/
      function myOnClickMethod(e){
      	var td=e.target; //e.target是事件触发的元素对象,在表格中通常是点击中的那个单元格td
      	var row=td.parentNode; //要获取当前点击中的tr,使用parentNode来获取
      	/**使用TableEdit的原型方法getCell来获取当前行对应的列,
      		"DEPART_CODE"是要获取的列的cellName,它通常是对应的th的ID值不包括"col_"在内的字符串**/
      	var cell=this.getCell(row,"DEPART_CODE"); 
      	var cellValue=cell.firstChild.nodeValue; //获取cellValue
      	alert(cellValue);
      	/**使用TableEdit的原型方法getRowData来获取当前行对应的DataMap字符串格式数据 **/
      	var rowData=this.getRowData(row,""X_TAG,DEPART_ID,DEPART_CODE,DEPART_NAME,DEPART_KIND_CODE,ORDER_NO,DEPART_TEXT");
      	alert(rowData);
      	
      }
      
      
      /** 新增一条记录,对应表格新增按钮 */
      function createDept(obj) {
      	/* 校验所有的输入框 */
      	if (!verifyAll(obj)) return false;
      	/* 校验表格中是否已有该部门标识 */
      	if (!tableedit.checkRow('DEPART_ID')) return false;
      	
      	/* 新增表格行 */
      	tableedit.insertRow();
      }
      /** 修改一条记录,对应表格修改按钮 */
      function updateDept(obj) {
      	/* 校验表格是否选中 */
      	if (!tableedit.verifyTable()) return false;
      	/* 校验所有的输入框 */
      	if (!verifyAll(obj)) return false;
      	/* 校验表格中是否已有该服务标识 */
      	if (!tableedit.checkRow('DEPART_ID', true)) return false;
      	/* 要验证多个标识可以用","号分开 比如:*/
      	if (!tableedit.checkRow('DEPART_ID,DEPART_CODE', true)) return false;
      	/* 这样只有在部门标识和部门编码在已有数据中都不存在时才能通过验证 */
      	
      	/* 修改表格行 */
      	tableedit.updateRow();
      }
      /** 删除一条记录,对应表格删除按钮 */
      function deleteDept(obj) {
      	/* 校验表格是否选中 */
      	if (!tableedit.verifyTable()) return false;
      	/* 删除表格行 */
      	tableedit.deleteRow();
      }
      /** 提交批量增删改的表格记录 */
      function fillDept() {
      	var dept_code = getElement("DEPART_ID");
      	var order_no = getElement("ORDER_NO");
      	if (dept_code.value != "") {
      		if (order_no.value == "") order_no.value = parseInt(tableedit.table.rows.length) * 10;
      	}
      }
      /** submit depts */
      function submitDepts(obj) {
      	if (!window.confirm("确定提交吗?")) return false;
      	/* 将指定列拼成串,后台将串解析生成数据 */
      	getElement("X_CODING_STR").value = tableedit.encodeTable("X_TAG,DEPART_ID,DEPART_CODE,DEPART_NAME,DEPART_KIND_CODE,ORDER_NO,DEPART_TEXT");
      	/** 也可以使用getTableData方法来获取IDataset字符串格式的数据 **/
      	getElement("X_CODING_STR").value = tableedit.getTableData("X_TAG,DEPART_ID,DEPART_CODE,DEPART_NAME,DEPART_KIND_CODE,ORDER_NO,DEPART_TEXT");
      	/** 提交操作,用AJAX局部刷新提交 */
      	ajaxSubmit(this, 'submitDepts', null, 'DeptPart');
      	/* 执行完提交动作后重新初始化init()方法,否则AJAX局部刷新后,tableedit将不存在了 */
      	this.afterAction= "init()";
      }
      
    3. JAVA(PAGE)写法(参考quickstart/view/examples/component/TableEdit.java)

      <table id="DeptTable">
      	<thead>
        		<tr>
        			<!--
        				1、定义列名与输入框的对应关系,比如文档框为DEPART_ID,对应列名为col_DEPART_ID
        				2、X_TAG为必须字段,该标记表示记录编辑提交后需要做的操作,如:0:新增 1:删除 2:修改
        				3、对于下拉列表的编辑,由于下拉列表存在值和文本,故列也需要对应有值和文本,下拉列表需要定义两列匹配
        				4、下拉列表对应的列名匹配规则为:下拉列表名字(如:DEPRT_KIND_CODE)匹配下拉值(如:col_DEPART_KIND_CODE)列,下拉列表的文本匹配紧跟下拉文本(下拉文本需要通过点击下拉选项时设置转换)
        			-->
        			<th id="col_X_TAG" style="display:none">TAG</th>
        			<th id="col_DEPART_ID">部门标识</th>
      			<th id="col_DEPART_CODE">部门编码</th>
        			<th id="col_DEPART_NAME">部门名称</th>
      			<th id="col_DEPART_KIND_CODE" style="display:none">部门类型</th>
      			<th id="col_DEPART_KIND">部门类型</th>
        			<th id="col_ORDER_NO">部门排序</th>
        			<th id="col_DEPART_TEXT">部门描述</th>
        		</tr>
      	</thead>
      	<tbody>
      		<tr jwcid="@Foreach" source="ognl:infos" value="ognl:info" element="tr">
      			<td style="display:none"></td>
      			<td><span jwcid="@Insert" value="ognl:info.DEPART_ID" raw="true"/></td>
      			<td><span jwcid="@Insert" value="ognl:info.DEPART_CODE" raw="true"/></td>
      			<td><span jwcid="@Insert" value="ognl:info.DEPART_NAME" raw="true"/></td>
      			<td style="display:none"><span jwcid="@Insert" value="ognl:info.DEPART_KIND_CODE" raw="true"/></td>
      			<td><span jwcid="@Insert" value="ognl:@com.linkage.component.util.Utility@getStaticValue(page, 'TD_M_DEPARTKIND', new java.lang.String[]{'EPARCHY_CODE','DEPART_KIND_CODE'}, 'DEPART_KIND', new java.lang.String[]{visit.epachyId,info.DEPART_KIND_CODE})" raw="true"/></td>
      			<td><span jwcid="@Insert" value="ognl:info.ORDER_NO" raw="true"/></td>
      			<td><span jwcid="@Insert" value="ognl:info.DEPART_TEXT" raw="true"/></td>
      		</tr>
      	</tbody>
      </table>
      
    4. JAVA(BEAN)写法(参考quickstart/bean/examples/component/ExamplesBean.java)

      ExamplesDAO dao = new ExamplesDAO(pd, AppFactory.CENTER_CONNECTION_NAME);
      IData pdepart = queryDept(pd, parent_depart_id);
      
      for (int i=0; i<dataset.size(); i++) {
      	IData data = (IData) dataset.get(i);
      	/* 获取操作标记 */
      	String x_tag = (String) data.get("X_TAG");
      	/* 0表示新增 */
      	if ("0".equals(x_tag)) {
      		String depart_id = (String) data.get("DEPART_ID");
      		String depart_frame = pdepart.get("DEPART_FRAME") + depart_id;
      		
      		data.put("AREA_CODE", pdepart.get("AREA_CODE"));
      		data.put("RSVALUE2", pdepart.get("RSVALUE2"));
      		data.put("PARENT_DEPART_ID", parent_depart_id);
      	data.put("USER_DEPART_ID", depart_id);
      	data.put("DEPART_FRAME", depart_frame);
      	data.put("VALIDFLAG", "0");
      	data.put("DEPART_LEVEL", String.valueOf(depart_frame.length() * 10 / depart_id.length()));
      	data.put("START_DATE", common.getSysTime());
      	data.put("UPDATE_STAFF_ID", pd.getContext().getStaffId());
      	data.put("UPDATE_DEPART_ID", pd.getContext().getDeptId());
      	data.put("UPDATE_TIME", common.getSysTime());
      	
      		dao.insert("TD_M_DEPART", data);
      	}
      	/* 1表示删除 */
      	if ("1".equals(x_tag)) dao.delete("TD_M_DEPART", data);
      	/* 2表示修改 */
      	if ("2".equals(x_tag)) dao.save("TD_M_DEPART", data);
      }