快捷導(dǎo)航

基于jQuery的動(dòng)態(tài)表格插件

更新時(shí)間：2011年03月28日 23:45:18 作者：

在我的頁(yè)面處理中有時(shí)需要進(jìn)行表單處理，需要一個(gè)用戶可以添加修改多條記錄。

在這里我們需要控制用戶的輸入驗(yàn)證，表格的添加刪除，用戶輸入數(shù)據(jù)的統(tǒng)計(jì)聚合，還有相應(yīng)的計(jì)算列比如商品的總價(jià)=商品的單價(jià)*商品數(shù)量，再如，同時(shí)在用戶提交的時(shí)候我還要需要獲取提交到后臺(tái)服務(wù)端處理在存儲(chǔ)到我們的數(shù)據(jù)庫(kù)。本插件則簡(jiǎn)單的處理了這些繁瑣的事情。
插件屬性說明：
1：rowTemplate：這是插入列的模板，在模板中我們的序號(hào)這種行號(hào)標(biāo)示的需要rownum 的class。在模板中的需要唯一編號(hào)的比如我們的radiobutton的name屬性在每個(gè)td單元格需要唯一的name組，再如id這種需要唯一的屬性，需要{0}的占位符。同時(shí)在我們的表格處理中有些行為統(tǒng)計(jì)行或者數(shù)據(jù)的固定行，是不會(huì)被用戶刪除的，則需要fixed=true。以及每個(gè)輸入或者label等控件，需要回傳提取值的需要有property=“propertyname”標(biāo)示。
2：addTrigger：這是一個(gè)觸發(fā)增加行的jQuery選擇器。
3：addPosition：是插入行的插入位置，默認(rèn)在last最后，但是應(yīng)我們的需求，可能在最后是匯總行等固定行，所以還添加的三種方式：first，還有就是數(shù)值，正數(shù)表示從開始行開始計(jì)算，負(fù)數(shù)表示從最后開始計(jì)算。
4：removeTrigger：刪除標(biāo)示，它是一個(gè)數(shù)組，可以有多個(gè)刪除按鈕，同時(shí)數(shù)組的每個(gè)對(duì)象也是一個(gè)對(duì)象有selector觸發(fā)按鈕的jQuery選擇器，handler觸發(fā)的處理方式，取值有first刪除第一行,last最后一列,current當(dāng)前列，所有的刪除都是刪除非fixed=true的列。
5：同時(shí)可以通過$(selector).updateSortNum();替換所有的td 帶有rownum的行號(hào)列。其實(shí)這里我考慮可以去掉td的限制。
6：$（rowselector）.getRowObj():獲取以property為屬性的javascript行對(duì)象。
7:$(tableselector).getTableObj():獲取table的以property為屬性的javascript數(shù)組對(duì)象，是行對(duì)象的集合（數(shù)組）。
8：getSource（saveHiddentField）:獲取xml組織的屬性集，如果傳入了saveHiddentField選擇器，這會(huì)自動(dòng)賦值在saveHiddentField上。
這里有item: , root: item為每行數(shù)據(jù)xml的節(jié)點(diǎn)默認(rèn)item，root為xml根節(jié)點(diǎn)默認(rèn)root。獲取了xml，我們就可以在后臺(tái)直接解析xml，或者是用DataSet.ReadXml()直接轉(zhuǎn)化為DataTable。
8：$(inputselector).getValue():獲取控件的值：支持text，label，checkbox，radio，label，td，textarea的取值。其中radio取值選中value，checkbox取值為所有選中行value的“，”號(hào)分隔字符串。
9：Calculates：計(jì)算匯總，是一個(gè)數(shù)組對(duì)象，具有selector：匯總顯示控驗(yàn)證財(cái)務(wù)的實(shí)際支出額不能高于審批額，而審批額不能高于實(shí)際的預(yù)算額件的選擇器，column：匯總的屬性，對(duì)應(yīng)我們上面所附加的property屬性。func：為匯總處理方式：支持聚合函數(shù):sum,max,min,count,avg,以及用戶自定義函數(shù)（必須具有返回值），傳入?yún)?shù)為一個(gè)整列property取值數(shù)組Array。
10：CalculatesColumn：計(jì)算列，同樣是一個(gè)js數(shù)組，具有trigger數(shù)組，表示觸發(fā)計(jì)算的屬性property，column計(jì)算列的property，func自定義處理函數(shù)。（這里廢話幾句本想用表達(dá)式，使用eval處理自動(dòng)計(jì)算，但是覺得需要的變化太多不好控制，所以不如交給用戶實(shí)現(xiàn)一個(gè)函數(shù)作為代理委托，作為回調(diào)函數(shù)）；這里可以用來處理，商品的總價(jià)=商品的單價(jià)*商品數(shù)量，一個(gè)上面所說的驗(yàn)證財(cái)務(wù)的實(shí)際支出額不能高于審批額，而審批額不能高于實(shí)際的預(yù)算額。同時(shí)這里也可以作為驗(yàn)證的觸發(fā)器。
在這個(gè)插件中沒有數(shù)據(jù)類型的驗(yàn)證，由于驗(yàn)證的需要變化太大，太多，而且我們一級(jí)有了很多優(yōu)秀的Jquer驗(yàn)證插件，配合使用將用很實(shí)用。同時(shí)也可以自己控制：比如我的兩個(gè)簡(jiǎn)單的驗(yàn)證：

復(fù)制代碼代碼如下:

 
$(".datetime").live("focus", function() { 
WdatePicker({ readOnly: true, dateFmt: 'yyyy年MM月dd日' })//MyDate97 
}); 
$(".number").live("keyup", function() { 
this.value = this.value.replace(/[^-\d\.]/g, ''); 
}).live("keydown", function(e) { 
if (e.which == 189) { 
$(this).val(-1 * parseFloat($(this).val())).trigger("change"); 
e.stopPropagation(); 
e.preventDefault(); 
} 
}); 

上面廢話太多，下面直接demo：
哦忘了提醒一句，在這個(gè)插件中要求table遵循標(biāo)準(zhǔn)w3c，thead，tbody。在thead中我們可以自己加入表頭設(shè)置，不管多復(fù)雜的多表頭結(jié)構(gòu)。

復(fù)制代碼代碼如下:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MEFASPNET.aspx.cs" Inherits="MEFASPNET" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22> 
<html xmlns="http://www.w3.org/1999/xhtml%22> 
<head runat="server"> 
<title></title> 
<script src="JS/jquery-1.4.2.js" type="text/javascript"></script> 
<script src="JS/dynamicTable.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function m(v) { 
return v[0]+100; 
} 
$(function() { 
$("table").dynamicTable( 
{ 
addTrigger: ".add", 
removeTrigger: [{ selector: ".delete", handler: "first" }, { selector: ".deleterow", handler: "current"}], 
rowTemplate: "<tr><td class='rownum' property='sortnum'></td><td> <input type='text' property='name'/></td><td><input type='text' property='age' class='number'/></td>" 
+ "<td> <input type='radio' property='Sex' value='1' name='test{0}' style='width:10px'/>nan<br/><input type='radio' style='width:10px' value='0' name='test{0}'/>nv</td>" 
+ "<td><input type='text' property='email'/></td><td><input type='text' property='phone'/></td><td><input type='text' property='date' class='datetime'/>" + 
"<td><input property='checkbox' type='checkbox' value='1' style='width:10px'/>test1<input type='checkbox' value='2' style='width:10px'/>test2</td>" 
+ "</td><td style='text-align:center;'><a class='deleterow' style='cursor:hand;'>" 
+ "<img alt='刪除' src='Image/delete.png' style='border: 0px; width: 16px; height: 16px' />刪除</a></td></tr>", 
addPosition: -1, 
Calculates: [{ selector: "#totalage", column: "age", func: "sum"}], 
CalculatesColumn: [{ trigger: ["age", "name"],column:"date", func: function(o,rowobj) { o.value =parseFloat( rowobj.age) +parseFloat( rowobj.name); } }] 
} 
); 
}); 
</script> 
<style type="text/css"> 
.TableStyle 
{ 
width: 99%; 
height: auto; 
overflow: hidden; 
border: 1px solid #4772AB; 
border-collapse: collapse; 
background: #D8EAFF; 
margin: 2px; 
} 
.TableStyle thead td 
{ text-align:center; 
} 
.TableStyle th, td 
{ 
border: solid #4772AB; 
border-width: 0 1px 1px 0; 
padding: 2px; 
} 
.TableStyle th 
{ 
text-align: right; 
font-weight: normal; 
} 
.TableStyle td 
{ 
text-align: left; 
background: #FFFFFF; 
} 
.TableStyle .title 
{ 
width: 99%; 
font-size: larger; 
line-height: 20px; 
text-align: center; 
background: url(images/right_head.jpg) repeat-x; 
padding: 0; 
} 
table.Grid th 
{ 
width: 99%; 
height: 16px; 
overflow: hidden; 
border: 1px solid #4772AB; 
border-collapse: collapse; 
background: #D8EAFF; 
padding-left: 1px; 
font-weight: normal; 
text-align: left; 
} 
table input 
{ 
border: 0px; 
width: 98%; 
} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<table style="width: 100%;" border="1" cellpadding="0" cellspacing="0" class="TableStyle"> 
<thead> 
<tr style="text-align: center;"> 
<td rowspan="2"> 
序號(hào) 
</td> 
<td rowspan="2"> 
姓名 
</td> 
<td rowspan="2"> 
年齡 
</td> 
<td rowspan="2"> 
Sex 
</td> 
<td colspan="2"> 
聯(lián)系信息 
</td> 
<td rowspan="2"> 
日期 
</td> 
<td rowspan="2"> 
test checkbox 
</td> 
<td rowspan="2"> 
<a class="add"> 
<img alt="增加" src="Image/add.png" style="border: 0px; width: 16px; height: 16px" />增加</a>&nbsp;&nbsp; 
<a class="delete" style="cursor: hand;"> 
<img alt="刪除" src="Image/delete.png" style="border: 0px; width: 16px; height: 16px" />刪除</a> 
</td> 
</tr> 
<tr> 
<td> 
Email 
</td> 
<td> 
電話 
</td> 
</tr> 
</thead> 
<tbody> 
<tr fixed="true"><td colspan="9"></td></tr> 
</tbody> 
</table> 
<input type="text" id="totalage" /> 
<input type="button" value="getSource" onclick="alert($('table').getSource());" /> 
<input type="button" value="getObject" /> 
<div id="resultdiv"></div> 
<script type="text/javascript"> 
$("input:[value='getObject']").live("click", function() { 
var obj = $("table").getTableObj(); 
$("#resultdiv").html(""); 
for (var i = 0; i < obj.length; i++) { 
for (var o in obj[i]) { 
$("#resultdiv").html($("#resultdiv").html() + "&nbsp;&nbsp;" + o + "->" + obj[i][o]); 
} 
$("#resultdiv").html($("#resultdiv").html() + "<br/>"); 
} 
}); 
</script> 
</form> 
</body> 
</html> 

測(cè)試代碼比較亂，沒有考慮實(shí)際性質(zhì)，比如標(biāo)題日期，作為了計(jì)算列，年齡作為了統(tǒng)計(jì)列，在后臺(tái)的input匯總，敬請(qǐng)?jiān)?。有機(jī)會(huì)在好好的寫幾個(gè)Demo。
有什么bug，敬請(qǐng)大家提出，我會(huì)盡快修復(fù)。同時(shí)也謝謝各位的不舍賜教。
作者：破浪

您可能感興趣的文章: