本篇部落格是我寫在離職後，昨天剛辭職和交接完任務，準備離開。其實我有很多不舍，但是最終還是選擇了離開，許多苦楚都埋在我的心底。哎，趁回成都找工作的機會是該好好休息一下了。
1：entertotab:$(“selector”). entertotab(),是的selector中的空間可以回車變為tab鍵使用，友善使用者的輸入。
代碼簡析： ie：
if ($.browser.msie) {
$(host).live("keydown", function(evt) {
if (event.keycode == 13) {
event.keycode = 9;//将鍵值13轉化為9（tab）；
}
});
}
其他浏覽器：主要針對firefox，因為ff中的時間的鍵值碼，是一個制度屬性，是以我們不能通過和ie一樣的方式來處理，隻有我們自己處理是的下一個可以focus控件focus。
$("input,select", this).not(":button").not(":disabled,:hidden").live("keypress", function(evt) {
if (evt.keycode == 13) {
var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select').not(":disabled,:hidden");
var index = fields.index(this);
if (index > -1 && (index + 1) < fields.length) {
fields.eq(index + 1).focus();
}
return false;
2：重新處理的計算列和彙總事件，在原來我們的事件直接綁定的change事件，這樣有時在我們的外部手動觸發更新的時候，不好的代碼容易出現循環調用，而導緻記憶體不足。是以事件采用了，jquery的命名空間，change.calculates。并提供了手動更新方法，$(“selector”).updatecalculates（）.
3:加入了事件處理，有時我們需要對控件或者樣式做一些特殊處理，但是由于table中有很多這樣的列是的我們不好定位，是以增加了一系列時間出入jquery的table 行tr對象，以供特殊處理定位。
主要有：
addrowing:增加行前觸發事件：參數arg,屬性有cancel可以供取消增加操作，rowtemplate改變某一行的增加行模闆。
addrowed:增加行以後，參數為行對象來定位，以供處理特殊的js控件，腳本執行或者css樣式處理等等。
removerowing:删除行之前觸發，參數cancel，可以取消操作，row為需要删除的行對象。
removerowed:删除行之後觸發的事件。還沒有想到需要什麼參數，是以是一個{}對象。我覺得一般不需要什麼特殊參數。
4：擴充的對html的控件支援，在上一個版本中預設支援，支援text，label，checkbox，radio，label，td，textarea的取值。其中radio取值選中value，checkbox取值為所有選中行value的“，”号分隔字元串。但是在我們的實際運用中還會用到一些特殊的js控件，如我實際中用到的jquery easyui的combotree這些，需要上邊提供的事件addrowed中一些js處理，以及擷取值getsource中擷取值的處理，是以提供了，一個對資料取值getvalue的自定義取值委托。
customerfunction: null, //column:列，func：擷取value function
例如：customerfunction: { "age": function(o) { return o.val() + 1; } },這裡定義property為age的取值方式為：其值+1。jquery easyui的combotree那麼我們可以定義為
customerfunction: { "type": function(o) { return $(o).combotree(“getvalue”)} }.
5:預設行數, defaultrowcount,在我們的進行中使用者經常會要求你能不能初始化就給我們預設幾行啊，我難得一個一個的點選增加。如果你也有這樣的需求，那麼這個屬性就可以幫助你輕松的搞定了。
6：增加了xml搜集類型的節點名自定義，在我們的某些進行中為了，搜集某些固定行的資料，但是為對xml其他節點的區分，是以，在本次的版本中增加了一個xmlitem，如xmlitem="total"設定。這個需要時來自我的一個同僚的動态行，以及還有動态增加列的需要進行中。
jquery dynamictable版本仍會随着使用者的需求一步一步的更新。同時也希望大家提出你的寶貴意見，你認為還需要那些功能，或者是對于代碼的重構等等。
下面來一個jquery easyui combotree的的demo：一個資金預算審批的例子。
先定義費用類型，和combotree的本地資料源，實際中需要我們從背景輸出的。
<script type="text/javascript">
window.fianncebudget = new array(); //[200, 300, 200, 300, 44];
window.fianncebudget["1"] = 200;
window.fianncebudget["2"] = 402;
window.fianncebudget["5"] = 121;
window.fianncebudget["6"] = 345;//類型6（費用2-）自用的id）的預算額。
window.treesource = [{
"id": -1,
"text": "費用1",
"iconcls": "icon-ok",
"children": [{
"id": 1,
"text": "公用",
}, {
"id": 2,
"text": "自用",
"state": "open"
}]
},
{
"id": -1,
"text": "費用2",
"iconcls": "icon-ok",
"children": [{
"id": 5,
"text": "公用"
}, {
"id": 6,
"text": "自用",
"state": "open"
}
];
</script>
html前台代碼：
<div>
<table style="width: 100%;" border="1" cellpadding="0" cellspacing="0" class="tablestyle">
<thead>
<tr>
<td>
序号
</td>
費用類型
預算額
審批額
差補（預算額）
<td style="width: 150px;">
<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>
</tr>
</thead>
<tbody>
<asp:literal id="literal1" runat="server"></asp:literal>
<tr fixed="true" xmlitem="total"><!—彙總列-à
<td colspan="2" align="center" style="">
合計：
<input readonly='readonly' type="text" id="totalbudget" property='totalbudget' />
<input readonly='readonly' type="text" id="totalreal" property='totalreal' />
<input readonly='readonly' type="text" id="totalreduction" property='totalreduction' />
<td align="center">
</tbody>
</table>
</div>
<asp:hiddenfield id="hiddenfield1" runat="server" />
jquery dynamictable code:
$(function() {
var rowtemplate = "<tr >" +
"<td style='text-align: center;'>" +
"<label class='rownum' property='sortnum'>" +
" </label>" +
"</td>" +
"<td>" +
"<input property='financetype' style=' width:200px;'/>" +
"</td>"
+
"<td >" +
"<input readonly='readonly' property='financebudget'> " +
" </td>" +
" <td>" +
" <input type='text' class='number' property='financereal' />" +
" <td >" +
" <input readonly='readonly' property='financereduction'> " +
"<td align='center' style='width:150px; 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>";
//初始化原來頁面combotree
var ctree = $(":[property='financetype']");
ctree.each(function() {
$(this).combotree({ "onbeforeselect": function(node) { if (node.id == -1) { return false; } }, "onchange": function(newvalue, oldvalue) {
$(this).val(newvalue).trigger("change");
}
}).combotree("loaddata", treesource.slice(0));
});
//
var tab = $("table").dynamictable(
{
addtrigger: ".add",
removetrigger: [{ selector: ".delete", handler: "first" }, { selector: ".deleterow", handler: "current"}],
rowtemplate: rowtemplate,
addposition: -1,
defaultrowcount: 3,
calculates: [{ selector: "#totalbudget", column: "financebudget", func: "sum" }, { selector: "#totalreal", column: "financereal", func: "sum" }, { selector: "#totalreduction", column: "financereduction", func: "sum"}],
calculatescolumn: [{ trigger: ["financetype", "financereal"], column: 'financebudget', func: function(o, rowobj, $tr) {
var v = parsefloat(rowobj.financetype);
v = window.fianncebudget[v];
$(o).val(v);
var $financereal = $tr.find(":[property='financereal']");
var v1 = parsefloat($financereal.val());
if (!isnan(v1)) {
if (v1 > v) {
$financereal.val(v);
v1 = v;
}
} else {
$financereal.val(0.00); //
v1 = 0;
var b = (v - v1);
if (isnan(b))
b = 0;
$tr.find(":[property='financereduction']").val(b.tostring());
$($tr).parent().parent().updatecalculates(); //更新計算
,
addrowed: function(arg) {
var ctree = $(":[property='financetype']", arg);
var $financebudget = $(":[property='financebudget']", arg);
ctree.combotree({ "onbeforeselect": function(node) { if (node.id == -1) { return false; } }, "onchange": function(newvalue, oldvalue) {
$financebudget.val(window.fianncebudget[newvalue]);
ctree.val(newvalue);
ctree.trigger("change.calculatescolumn");
}).
combotree("loaddata", treesource.slice(0));
});
$("#button1").bind("click", function() {
alert(tab.getsource({ saveselector: "#hiddenfield1" }));
})
$(".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();
} else if (e.which == 190) {
if ($(this).val().indexof(".") != -1) {
e.stoppropagation();
e.preventdefault();
});
</script>
public partial class dynamictabledemo1 : system.web.ui.page
private static system.data.dataset ds;
protected void page_load(object sender, eventargs e)
{
if (ispostback)
{
}
protected void bindtable()
if (ds != null && ds.tables["item"] != null)
list<string> list = new list<string>();
foreach (system.data.datarow item in ds.tables["item"].rows)
{
list.add(string.format("<tr >" +
"<input property='financetype' style=' width:200px;' {0}/>" +
"<input readonly='readonly' property='financebudget' {1}> " +
" <input type='text' class='number' property='financereal' value='{2}' />" +
" <input readonly='readonly' property='financereduction' value='{3}'> " +
"</tr>", item["financetype"].tostring() == "" ? "" : "value='" + item["financetype"] + "'", item["financebudget"].tostring() == "" ? "" : "value='" + item["financebudget"] + "'", item["financereal"], item["financereduction"]));
literal1.text = string.join("",list.toarray());
protected void button1_click(object sender, eventargs e)
var xml = hiddenfield1.value;
ds = new system.data.dataset();
ds.readxml(new system.io.memorystream(system.text.encoding.utf8.getbytes(xml)));
bindtable();
}
最後在上效果圖：
搜集資料源xml
背景資料源：
<a href="http://files.cnblogs.com/whitewolf/dynamictable.rar">插件下載下傳</a>