1. 功能

    输出 HTML table 元素,支持表格双击事件、单击事件、右键事件,支持全表及指定行的数据获取,支持表格的增、删、改操作。

    该组件必须要是标准的 HTML table 元素,格式如下:

    <table>
    	<thead>
    		<tr>
    			<th></th>
    			...
    		</tr>
    		...
    	</thead>
    	<tbody>
    		<tr>
    			<td></td>
    			...
    		</tr>
    		...
    	</tbody>
    </table>
    
  2. 参数

    参数名 参数类型 是否必须 默认值 描述
    name java.lang.String 该名称与流程配置文件名称相同
    contextMenu java.lang.String 右键菜单,格式为组:菜单荐名称:菜单项事件,如:新增:tableAddRow,删除:tableDeleteRow,清空:tableCleanRow,group1:清空所有:tableCleanRows
    rowClick java.lang.String 行单击事件
    rowDBClick java.lang.String 行双击事件
    columnClick java.lang.String 列单击事件
    columnDBClick java.lang.String 列双击事件
  3. JavaScript API

    var table = $.table.get("CustTable");//获取 JavaScript 包装的 Table 对象
    var json = table.getRowData(cols, rowIndex);//获取行数据。cols 里的数据必须是 th 元素里的 col 值,多个用","号分隔,不传或 null 则是所有的 col 值。rowIndex可以是指定的行,不传则是当前行。两个参数都不传则是取选中行的数据。
    var dom = table.getSelected(index);//获取选中行的数据,index 如果是 int 型,则返回指定列的 Dom 包装对象,如果是 string 型,则返回 th 里对应名称列的Dom包装对象,不传则返回行数据;
    var newrow = table.addRow(json, rowIndex, colcss, change, before);//在指定的rowIndex添加一行数据并返添加的tr的封装对象,rowIndex为null时为当前选中的行
    	//rowIndex:为null时为当前选中的行
    	//colcss:设置该参数后,生成的html将替换默认th上设置的colcss
    	//change:默认为undefined,设置为false后将不记录行状态信息及new样式
    	//before:设置为true时表示在指定的rowIndex行的前面增加一行,默认为在rowIndex行后增加一行。
    var updaterow = table.updateRow(json,rowIndex);//在指定的rowIndex修改行数据并返修改的tr的封装对象,rowIndex为null时为当前选中的行
    table.deleteRow(row,deleted);//删除行row,deleted默认为true,即隐藏该行,若为false则不隐藏,但会修改tr的样式为delete
    table.cleanRow();//清空当前行的内容
    table.cleanRows();//清空表格的内容
    table.getTableData(cols);//获取表格数据,可以指定列
    var flag=table.isDeleted(rowIndex);//返回true|false,判断rowIndex行是否为删除状态
    var flag=table.isNew(rowIndex);//返回true|false,判断rowIndex行是否为新增状态
    var flag=table.isUpdated(rowIndex);//返回true|false,判断rowIndex行是否为修改状态
    table.setRowCss(row,css);//设置行的样式,css支持style="..."和"new|edit|delete"
    table.getCheckedRows(testInRow);//该方法仅在 table 中只有一列 checkbox 或 radio 时可用。 返回值为数组;testInRow 为传入的回调方法,在获取到选中行后调用该方法,方法的入参为选中行编号,被选中行的 html 对象
    table.getCheckedRowDatas();//该方法仅在 table 中只有一列 checkbox 或 radio 时可用。 获取被选中行的数据 ,返回值为 $.DatasetList 类型
    
  4. 示例

    1. HTML 代码

      1. 表格区

        <table jwcid="@demo:UPCTable" 
        	name="CustTable" 
        	rowClick="tableRowClick" 
        	rowDBClick="tableRowDBClick" 
        	contextMenu="新增:tableAddRow,删除:tableDeleteRow,清空:tableCleanRow,group1:清空所有:tableCleanRows">
        	<thead>
        		<tr>
        			<th col="rowIndex" style="display:none">序号</th>
        			<th col="custId">客户标识</th>
        			<th col="custName" colcss="e_right">客户姓名</th>
        			<th col="age" style="display:none">年龄</th>
        			<th col="ageDesc" names="codeValue,codeIdx" values="age,custId" key="codeName" default="" source="[{'codeName':'1-9','codeValue':'0','codeIdx':'191'},{'codeName':'11-19','codeValue':'1','codeIdx':'192'},{'codeName':'21-29','codeValue':'2','codeIdx':'193'},{'codeName':'31-39','codeValue':'3','codeIdx':'194'}]">年龄</th>
        			<th col="birthDate">出生年月</th>
        			<th col="mobileId">手机号码</th>
        			<th col="email">邮箱地址</th>
        			<th col="createTime">创建时间</th>
        		</tr>
        	</thead>
        	<tbody>
        		<tr jwcid="@Foreach" source="ognl:custs" value="ognl:cust" index="ognl:rowIndex" element="tr">
        			<td style="display:none"><span jwcid="@Insert" value="ognl:rowIndex"></span></td>
        			<td><input jwcid="@Checkbox" name="custids" class="e_checkbox" value="ognl:cust.custId" onclick="alert(getCheckedBoxNum('custids'))"/><span jwcid="@Insert" value="ognl:cust.custId"></span></td>
        			<td class="e_right">
        				<a jwcid="@Redirect" custId="ognl:cust.custId" value="ognl:cust.custName" cols="40" onclick="queryCust($(this).attr('custId'));" />
        			</td>
        			<td style="display:none"><span jwcid="@Insert" value="ognl:cust.age"></span></td>
        			<td><span jwcid="@Insert" value="ognl:translate(birthday(), 'value', cust.age, 'text')"></span></td>
        			<td><span jwcid="@Insert" value="ognl:cust.birthDate"></span></td>
        			<td><span jwcid="@Insert" value="ognl:cust.mobileId"></span></td>
        			<td class="e_left"><span jwcid="@Insert" value="ognl:cust.email"></span></td>
        			<td><span jwcid="@Insert" value="ognl:cust.createTime"></span></td>
        		</tr>
        	</tbody>
        </table>
        
      2. 编辑区

        <div class="c_form c_form-col-2 c_form-label-5" id="createarea" >
        	<ul class="ul">
        		<li class="li">
        			<span class="label"><span class="e_required">客户姓名:</span></span>
        			<span class="e_input"><span><input type="text" name="custName" jwcid="@TextField" value="ognl:edit.custName" desc="客户姓名"/></span></span>
        		</li>
        		<li class="li">
        		<span class="label">出生年月:</span>
        			<span class="e_elements">
        				<button onclick="javascript:$.datePicker('#birthDate')" class="e_button e_button-right"><i class="e_ico-date"></i><span></span></button>
        				<span class="e_input e_input-left"><span>
        					<input type="text" name="birthDate" jwcid="@TextField" value="ognl:edit.birthDate" desc="出生年月" datatype="date" format="yyyy-MM-dd" />
        				</span></span>
        			</span>
        		</li>
        		<li class="li">
        			<span class="label">修改日期:</span>
        			<span class="e_input"><span>
        				<input type="text" name="createTime" jwcid="@DateField" value="ognl:edit.createTime" desc="修改日期" datatype="date" />
        			</span></span>
        		</li>
        		<li class="li">
        			<span class="label">年龄:</span>
        			<span class="e_select"><span><span>
        				<select jwcid="@Select" name="age" textField="codeName" valueField="codeValue" source="ognl:getStaticSelection('DEMO_CUST_AGE')" value="ognl:edit.age"></select>
        			</span></span></span>
        		</li>
        		<li class="li">
        		<span class="label">地址:</span>
        			<span class="e_elements e_elements-col-3">
        				<span class="e_select e_select-left"><span><span>
        					<select jwcid="@Select" name="province" textField="codeName" valueField="codeValue" source="ognl:getStaticSelection('DEMO_CUST_PROVINCE')" value="ognl:edit.province" onchange="changeProvince();"></select>
        				</span></span></span>
        				<span class="e_select e_select-center"><span><span jwcid="CityPart@Part" element="span">
        					<select jwcid="@Select" name="city" textField="codeName" valueField="codeValue" source="ognl:getCityByProvince('DEMO_CUST_CITY', edit.province)" value="ognl:edit.city" onchange="changeCity();"></select>
        				</span></span></span>
        				<span class="e_select e_select-right"><span><span jwcid="AreaPart@Part" element="span">
        					<select jwcid="@Select" name="area" textField="codeName" valueField="codeValue" source="ognl:getAreaByCity('DEMO_CUST_AREA', edit.city)" selected="ognl:edit.area"></select>
        				</span></span></span>
        			</span>
        		</li>
        		<li class="li">
        			<span class="label">手机号码:</span>
        			<span class="e_input"><span><input type="text" name="mobileId" jwcid="@TextField" value="ognl:edit.mobileId" /></span></span>
        		</li>
        		<li class="li">
        			<span class="label">邮箱地址:</span>
        			<span class="e_input"><span><input type="text" name="email" jwcid="@TextField" value="ognl:edit.email" /></span></span>
        		</li>
        		<li class="li">
        		<span class="label">上传附件:</span>
        			<span class="e_elements">
        				<button class="e_button-right" onclick="javascript:uploadFile('#custFile')"><i class="e_ico-upload"></i><span></span></button>
        				<span class="e_input e_input-left"><span><input jwcid="@Any" readOnly="true" type="text" id="custFile" name="custFile" value="ognl:edit.custFile" desc="上传附件"/></span></span>
        			</span>
        		</li>
        		<li class="li">
        		<span class="label">关联客户:</span>
        			<span class="e_elements">
        				<button class="e_button-right" onclick="javascript:popupPage('CustList',null,null,'选择关联客户',680,400,'popupFlow')"><i class="e_ico-check"></i><span></span></button>
        				<span class="e_input e_input-left"><span><input jwcid="@Popup" readOnly="true" value="ognl:edit.custId" text="ognl:edit.custName" name="popupFlow" afterAction="afterPopupAction()"/></span></span>
        			</span>
        		</li>
        		<li class="li col-2">
        			<span class="label">备注:</span>
        			<span class="e_textarea">
        				<span class="e_textareaTop"><span></span></span>
        				<span class="e_textareaContent"><textarea jwcid="@TextArea" name="remark" value="ognl:cust.remark" style="height:30px;"></textarea></span>
        				<span class="e_textareaBottom"><span></span></span>
        			</span>
        		</li>
        	</ul>
        	<div class="submitPlace"></div>
        	<div class="submit">
        		<button class="e_button-form" id="baddrow" name="baddrow" onclick="return addTableRow();"><i class="e_ico-add"></i><span>添加</span></button>
        		<button class="e_button-form" id="buptrow" name="buptrow" onclick="return updateTableRow();"><i class="e_ico-edit"></i><span>修改</span></button>
        		<button class="e_button-form" id="bdelrow" name="bdelrow" onclick="return deleteTableRow();"><i class="e_ico-delete"></i><span>删除</span></button>
        		<button class="e_button-form" id="balldata" name="balldata" onclick="return getTableData();"><i class="e_ico-import"></i><span>获取全表数据</span></button>
        	</div>
        </div>
        
    2. JS 代码

      /** table component event **/
      function tableRowClick() {
      	//获取选择行的数据
      	//var rowData = $.table.get("CustTable").getRowData();
      }
      function tableRowDBClick() {
      	//获取选择行的某列数据
      	var td = $.table.get("CustTable").getSelected("custId");
      
      	//刷新编辑区EditPart的数据
      	ajaxGet('CustDemo','queryCust','custId='+custId,'EditPart');
      }
      function tableColumnClick() {alert(3);}
      function tableColumnDBClick() {alert(4);}
      function tableAddRow(e) {$.table.get("CustTable").addRow(e);};
      function tableDeleteRow(e) {$.table.get("CustTable").deleteRow();};
      function tableCleanRow(e) {$.table.get("CustTable").cleanRow(e);};
      function tableCleanRows(e) {$.table.get("CustTable").cleanRows(e);};
      function addTableRow() {
      	//获取编辑区的数据
      	var custEdit = $.ajax.buildJsonData("EditPart");
      	
      	//增量修改编辑区数据,如添加'创建时间'
      	custEdit["createTime"]=new Date().format("yyyy-MM-dd HH:mm:ss");
      	custEdit["ageDesc"]=$("#age")[0].options[$("#age")[0].selectedIndex].text;
      	
      	//往表格里添加一行并将编辑区数据绑定上
      	$.table.get("CustTable").addRow(custEdit);
      }
      function updateTableRow() {
      	//获取编辑区的数据
      	var custEdit = $.ajax.buildJsonData("EditPart");
      	
      	//增量修改编辑区数据,如添加'创建时间'
      	custEdit["ageDesc"]=$("#age")[0].options[$("#age")[0].selectedIndex].text;
      	
      	//往表格里添加一行并将编辑区数据绑定上
      	$.table.get("CustTable").updateRow(custEdit);
      }
      function getTableData() {
      	var data = $.table.get("CustTable").getTableData();
      	alert(data);
      }
      
  5. 图示

    客户标识 客户姓名 年龄 出生年月 手机号码 邮箱地址 创建时间
    0000230 Sylvester Stallone 66 1946-07 13511223341 Sylvester@Expendables.com 2012-12-11
    0005458 Jason Statham 40 1972-09 13511223342 Jason@Expendables.com 2012-12-11
    0001472 Jet Li 49 1963-04 13511223343 Jet@Expendables.com 2012-12-11
    0001569 Chuck Norris 72 1940-03 13511223344 Chuck@Expendables.com 2012-12-11
    0000246 Bruce Willis 47 1955-03 13511223345 Bruce@Expendables.com 2012-12-11
    0000241 Jean-Claude Van Damme 52 1960-10 13511223346 Jean@Expendables.com 2012-12-11
    0000216 Arnold Schwarzenegger 65 1947-07 13511223347 Arnold@Expendables.com 2012-12-11
    • 客户姓名:
    • 出生年月:
    • 修改日期:
    • 年龄:
    • 地址:
    • 手机号码:
    • 邮箱地址:
    • 上传附件:
    • 关联客户:
    • 备注: