溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇博客是我寫在離職后，昨天剛辭職和交接完任務，準備離開。其實我有很多不舍，但是最終還是選擇了離開，許多苦楚都埋在我的心底。哎，趁回成都找工作的機會是該好好休息一下了。
在上篇我的jQuery動態表格插件中介紹了插件的基本使用方法.在實際運用的時候出現了一些其他的需求,所以插件再次升級,增加了一些輔助功能.
1：EnterToTab:$(“selector”). EnterToTab(),是的selector中的空間可以回車變為tab鍵使用，方便用戶的輸入。
代碼簡析： IE：
其他瀏覽器：主要針對firefox，因為ff中的時間的鍵值碼，是一個制度屬性，所以我們不能通過和ie一樣的方式來處理，只有我們自己處理是的下一個可以focus控件focus。
- View Code
- $("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
- 查看
- <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前臺代碼：
- View Code
- <div>
- <table style="width: 100%;" border="1" cellpadding="0" cellspacing="0" class="TableStyle">
- <thead>
- <tr>
- <td>
- 序號
- </td>
- <td>
- 費用類型
- </td>
- <td>
- 預算額
- </td>
- <td>
- 審批額
- </td>
- <td>
- 差補（預算額）
- </td>
- <td style="width: 150px;">
- <a class="add">
- <img alt="增加" src="Image/add.png" style="border: 0px; width: 16px; height: 16px" />增加</a>
- <a class="delete" style="cursor: hand;">
- <img alt="刪除" src="Image/delete.png" style="border: 0px; width: 16px; height: 16px" />刪除</a>
- </td>
- </tr>
- </thead>
- <tbody>
- <asp:Literal ID="Literal1" runat="server"></asp:Literal>
- <tr fixed="true" xmlitem="total"><!—匯總列-à
- <td colspan="2" align="center" style="">
- 合計：
- </td>
- <td>
- <input readonly='readonly' type="text" id="totalBudget" property='totalBudget' />
- </td>
- <td>
- <input readonly='readonly' type="text" id="totalReal" property='totalReal' />
- </td>
- <td>
- <input readonly='readonly' type="text" id="totalReduction" property='totalReduction' />
- </td>
- <td align="center">
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <asp:HiddenField ID="HiddenField1" runat="server" />
- Jquery dynamicTable code:
- <script type="text/javascript">
- $(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>" +
- " <td >" +
- " <input readonly='readonly' property='FinanceReduction'> " +
- " </td>" +
- "<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>
- 復制代碼
在上一篇文章我的jQuery動態表格插件中有人問我如果在后臺處理，數據，我所以在本次demo中特別利用dataset處理成為datatable：這里的處理時存在一個靜態變量ds中。
- View Code
- 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 >" +
- "<td style='text-align: center;'>" +
- "<label class='rownum' property='SortNum'>" +
- " </label>" +
- "</td>" +
- "<td>" +
- "<input property='FinanceType' style=' width:200px;' {0}/>" +
- "</td>"
- +
- "<td >" +
- "<input readonly='readonly' property='FinanceBudget' {1}> " +
- " </td>" +
- " <td>" +
- " <input type='text' class='number' property='FinanceReal' value='{2}' />" +
- " </td>" +
- " <td >" +
- " <input readonly='readonly' property='FinanceReduction' value='{3}'> " +
- " </td>" +
- "<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>", 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();
- }
- }
- 復制代碼
最后在上效果圖：
后臺數據源：
插件基本使用請參見：我的jQuery動態表格插件
本博客中其他jQuery資料：我jQuery系列之目錄匯總
插件下載
搜集數據源xml
例如：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的本地數據源，實際中需要我們從后臺輸出的。
- View Code
- if ($.browser.msie) {
- $(host).live("keydown", function(evt) {
- if (event.keyCode == 13) {
- event.keyCode = 9;//將鍵值13轉化為9（tab）；
- }
- });
- }
- 復制代碼
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
