溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

我的jQuery動態(tài)表格插件二

發(fā)布時間：2020-06-01 19:19:09 來源：網(wǎng)絡(luò) 閱讀：671 作者：破狼 欄目：web開發(fā)

   本篇博客是我寫在離職后，昨天剛辭職和交接完任務(wù)，準備離開。其實我有很多不舍，但是最終還是選擇了離開，許多苦楚都埋在我的心底。哎，趁回成都找工作的機會是該好好休息一下了。 

      在上篇我的jQuery動態(tài)表格插件中介紹了插件的基本使用方法.在實際運用的時候出現(xiàn)了一些其他的需求,所以插件再次升級,增加了一些輔助功能.

1：EnterToTab:$(“selector”). EnterToTab(),是的selector中的空間可以回車變?yōu)閠ab鍵使用，方便用戶的輸入。

代碼簡析： IE：

其他瀏覽器：主要針對firefox，因為ff中的時間的鍵值碼，是一個制度屬性，所以我們不能通過和ie一樣的方式來處理，只有我們自己處理是的下一個可以focus控件focus。

  1. View Code   
  2.  
  3. $("input,select", this).not(":button").not(":disabled,:hidden").live("keypress", function(evt) {  
  4.  
  5.                     if (evt.keyCode == 13) {  
  6.  
  7.                         var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select').not(":disabled,:hidden");  
  8.  
  9.                         var index = fields.index(this);  
  10.  
  11.                         if (index > -1 && (index + 1) < fields.length) {  
  12.  
  13.                             fields.eq(index + 1).focus();  
  14.  
  15.                         }  
  16.  
  17.                         return false;  
  18.  
  19.                     }  
  20.  
  21.                 });  
  22. 復制代碼 

2：重新處理的計算列和匯總事件，在原來我們的事件直接綁定的change事件，這樣有時在我們的外部手動觸發(fā)更新的時候，不好的代碼容易出現(xiàn)循環(huán)調(diào)用，而導致內(nèi)存不足。所以事件采用了，jQuery的命名空間，change.Calculates。并提供了手動更新方法，$(“selector”).updateCalculates（）.

3:加入了事件處理，有時我們需要對控件或者樣式做一些特殊處理，但是由于table中有很多這樣的列是的我們不好定位，所以增加了一系列時間出入jQuery的table 行tr對象，以供特殊處理定位。

主要有：

addRowing:增加行前觸發(fā)事件：參數(shù)arg,屬性有cancel可以供取消增加操作，rowTemplate改變某一行的增加行模板。

addRowed:增加行以后，參數(shù)為行對象來定位，以供處理特殊的js控件，腳本執(zhí)行或者css樣式處理等等。

removeRowing:刪除行之前觸發(fā)，參數(shù)cancel，可以取消操作，row為需要刪除的行對象。

removeRowed:刪除行之后觸發(fā)的事件。還沒有想到需要什么參數(shù)，所以是一個{}對象。我覺得一般不需要什么特殊參數(shù)。

4：擴展的對html的控件支持，在上一個版本中默認支持，支持text，label，checkbox，radio，label，td，textarea的取值。其中radio取值選中value，checkbox取值為所有選中行value的“，”號分隔字符串。但是在我們的實際運用中還會用到一些特殊的js控件，如我實際中用到的Jquery EasyUi的ComboTree這些，需要上邊提供的事件addRowed中一些js處理，以及獲取值getSource中獲取值的處理，所以提供了，一個對數(shù)據(jù)取值getValue的自定義取值委托。

customerFunction: null, //column:列，func：獲取Value function 

  1. 查看   
  2.  
  3. <script type="text/javascript">  
  4.  
  5.         window.FiannceBudget = new Array(); //[200, 300, 200, 300, 44];  
  6.  
  7.         window.FiannceBudget["1"] = 200;  
  8.  
  9.         window.FiannceBudget["2"] = 402;  
  10.  
  11.         window.FiannceBudget["5"] = 121;  
  12.  
  13.         window.FiannceBudget["6"] = 345;//類型6（費用2-）自用的id）的預算額。  
  14.  
  15.         window.TreeSource = [{  
  16.  
  17.             "id": -1,  
  18.  
  19.             "text": "費用1",  
  20.  
  21.             "iconCls": "icon-ok",  
  22.  
  23.             "children": [{  
  24.  
  25.                 "id": 1,  
  26.  
  27.                 "text": "公用",                  
  28.  
  29.             }, {  
  30.  
  31.                 "id": 2,  
  32.  
  33.                 "text": "自用",  
  34.  
  35.                 "state": "open" 
  36.  
  37. }]  
  38.  
  39.             },  
  40.  
  41. {  
  42.  
  43.     "id": -1,  
  44.  
  45.     "text": "費用2",  
  46.  
  47.     "iconCls": "icon-ok",  
  48.  
  49.     "children": [{  
  50.  
  51.         "id": 5,  
  52.  
  53.         "text": "公用" 
  54.  
  55.     }, {  
  56.  
  57.         "id": 6,  
  58.  
  59.         "text": "自用",  
  60.  
  61.         "state": "open" 
  62.  
  63. }]  
  64.  
  65.     }  
  66.  
  67.    
  68.  
  69. ];              
  70.  
  71. </script>  
  72. 復制代碼 

 Html前臺代碼： 

  1. View Code   
  2.  
  3. <div>  
  4.  
  5.         <table style="width: 100%;" border="1" cellpadding="0" cellspacing="0" class="TableStyle">  
  6.  
  7.             <thead>  
  8.  
  9.                 <tr>  
  10.  
  11.                     <td>  
  12.  
  13.                         序號  
  14.  
  15.                     </td>  
  16.  
  17.                     <td>  
  18.  
  19.                         費用類型  
  20.  
  21.                     </td>  
  22.  
  23.                     <td>  
  24.  
  25.                         預算額  
  26.  
  27.                     </td>  
  28.  
  29.                     <td>  
  30.  
  31.                         審批額  
  32.  
  33.                     </td>  
  34.  
  35.                     <td>  
  36.  
  37.                         差補（預算額）  
  38.  
  39.                     </td>  
  40.  
  41.                     <td style="width: 150px;">  
  42.  
  43.                         <a class="add">  
  44.  
  45.                             <img alt="增加" src="Image/add.png" style="border: 0px; width: 16px; height: 16px" />增加</a>&nbsp;&nbsp;  
  46.  
  47.                         <a class="delete" style="cursor: hand;">  
  48.  
  49.                             <img alt="刪除" src="Image/delete.png" style="border: 0px; width: 16px; height: 16px" />刪除</a>  
  50.  
  51.                     </td>  
  52.  
  53.                 </tr>  
  54.  
  55.             </thead>  
  56.  
  57.             <tbody>  
  58.  
  59.                 <asp:Literal ID="Literal1" runat="server"></asp:Literal>  
  60.  
  61.                 <tr fixed="true" xmlitem="total"><!—匯總列-à  
  62.  
  63.                     <td colspan="2" align="center" style="">  
  64.  
  65.                         合計：  
  66.  
  67.                     </td>  
  68.  
  69.                     <td>  
  70.  
  71.                         <input readonly='readonly' type="text" id="totalBudget" property='totalBudget' />  
  72.  
  73.                     </td>  
  74.  
  75.                     <td>  
  76.  
  77.                         <input readonly='readonly' type="text" id="totalReal" property='totalReal' />  
  78.  
  79.                     </td>  
  80.  
  81.                     <td>  
  82.  
  83.                         <input readonly='readonly' type="text" id="totalReduction" property='totalReduction' />  
  84.  
  85.                     </td>  
  86.  
  87.                     <td align="center">  
  88.  
  89.                     </td>  
  90.  
  91.                 </tr>  
  92.  
  93.             </tbody>  
  94.  
  95.         </table>  
  96.  
  97.     </div>  
  98.  
  99. <asp:HiddenField ID="HiddenField1" runat="server" />  
  100.  
  101.    
  102.  
  103. Jquery dynamicTable code:  
  104.  
  105. <script type="text/javascript">  
  106.  
  107.         $(function() {  
  108.  
  109.             var rowTemplate = "<tr >" +  
  110.  
  111.                     "<td style='text-align: center;'>" +  
  112.  
  113.                         "<label class='rownum' property='SortNum'>" +  
  114.  
  115.                       " </label>" +  
  116.  
  117.                     "</td>" +  
  118.  
  119.                     "<td>" +  
  120.  
  121.                         "<input property='FinanceType'   style=' width:200px;'/>" +  
  122.  
  123.                     "</td>" 
  124.  
  125.                     +  
  126.  
  127.                     "<td >" +  
  128.  
  129.                    "<input readonly='readonly' property='FinanceBudget'> " +  
  130.  
  131.                    " </td>" +  
  132.  
  133.          " <td>" +  
  134.  
  135.                      " <input type='text' class='number' property='FinanceReal' />" +  
  136.  
  137.                    " </td>" +  
  138.  
  139.                    " <td >" +  
  140.  
  141.                      " <input readonly='readonly' property='FinanceReduction'> " +  
  142.  
  143.                    " </td>" +  
  144.  
  145.                     "<td align='center' style='width:150px; text-align:center;'><a class='deleterow' style='cursor:hand;'>" +  
  146.  
  147.                                  "<img alt='刪除' src='Image/delete.png' style='border: 0px; width: 16px; height: 16px' />刪除</a></td>" +  
  148.  
  149.                 "</tr>";  
  150.  
  151.             //初始化原來頁面ComboTree  
  152.  
  153.             var ctree = $(":[property='FinanceType']");  
  154.  
  155.             ctree.each(function() {  
  156.  
  157.                 $(this).combotree({ "onBeforeSelect": function(node) { if (node.id == -1) { return false; } }, "onChange": function(newvalue, oldvalue) {  
  158.  
  159.                     $(this).val(newvalue).trigger("change");  
  160.  
  161.                 }  
  162.  
  163.                 }).combotree("loadData", TreeSource.slice(0));  
  164.  
  165.    
  166.  
  167.             });  
  168.  
  169.             //  
  170.  
  171.             var tab = $("table").dynamicTable(  
  172.  
  173.                 {  
  174.  
  175.                     addTrigger: ".add",  
  176.  
  177.                     removeTrigger: [{ selector: ".delete", handler: "first" }, { selector: ".deleterow", handler: "current"}],  
  178.  
  179.                     rowTemplate: rowTemplate,  
  180.  
  181.                     addPosition: -1,  
  182.  
  183.                     DefaultRowCount: 3,  
  184.  
  185.                     Calculates: [{ selector: "#totalBudget", column: "FinanceBudget", func: "sum" }, { selector: "#totalReal", column: "FinanceReal", func: "sum" }, { selector: "#totalReduction", column: "FinanceReduction", func: "sum"}],  
  186.  
  187.                     CalculatesColumn: [{ trigger: ["FinanceType", "FinanceReal"], column: 'FinanceBudget', func: function(o, rowobj, $tr) {  
  188.  
  189.                         var v = parseFloat(rowobj.FinanceType);  
  190.  
  191.                         v = window.FiannceBudget[v];  
  192.  
  193.                         $(o).val(v);  
  194.  
  195.                         var $FinanceReal = $tr.find(":[property='FinanceReal']");  
  196.  
  197.                         var v1 = parseFloat($FinanceReal.val());  
  198.  
  199.                         if (!isNaN(v1)) {  
  200.  
  201.                             if (v1 > v) {  
  202.  
  203.                                 $FinanceReal.val(v);  
  204.  
  205.                                 v1 = v;  
  206.  
  207.                             }  
  208.  
  209.                         } else {  
  210.  
  211.                             $FinanceReal.val(0.00); //  
  212.  
  213.                             v1 = 0;  
  214.  
  215.                         }  
  216.  
  217.                         var b = (v - v1);  
  218.  
  219.                         if (isNaN(b))  
  220.  
  221.                             b = 0;  
  222.  
  223.                         $tr.find(":[property='FinanceReduction']").val(b.toString());  
  224.  
  225.                         $($tr).parent().parent().updateCalculates(); //更新計算  
  226.  
  227.                     }  
  228.  
  229. }]  
  230.  
  231.                     ,  
  232.  
  233.                         addRowed: function(arg) {  
  234.  
  235.                             var ctree = $(":[property='FinanceType']", arg);  
  236.  
  237.                             var $FinanceBudget = $(":[property='FinanceBudget']", arg);  
  238.  
  239.                             ctree.combotree({ "onBeforeSelect": function(node) { if (node.id == -1) { return false; } }, "onChange": function(newvalue, oldvalue) {  
  240.  
  241.                                 $FinanceBudget.val(window.FiannceBudget[newvalue]);  
  242.  
  243.                                 ctree.val(newvalue);  
  244.  
  245.                                 ctree.trigger("change.CalculatesColumn");  
  246.  
  247.                             }  
  248.  
  249.                             }).  
  250.  
  251.                                   combotree("loadData", TreeSource.slice(0));  
  252.  
  253.                         }  
  254.  
  255.                     });  
  256.  
  257.             $("#Button1").bind("click", function() {  
  258.  
  259.    
  260.  
  261.                 alert(tab.getSource({ saveSelector: "#HiddenField1" }));  
  262.  
  263.             })  
  264.  
  265.             $(".number").live("keyup", function() {  
  266.  
  267.                 this.value = this.value.replace(/[^-\d\.]/g, '');  
  268.  
  269.             }).live("keydown", function(e) {  
  270.  
  271.                 if (e.which == 189) {  
  272.  
  273.                     // $(this).val(-1 * parseFloat($(this).val())).trigger("change");  
  274.  
  275.                     e.stopPropagation();  
  276.  
  277.                     e.preventDefault();  
  278.  
  279.                 } else if (e.which == 190) {  
  280.  
  281.                     if ($(this).val().indexOf(".") != -1) {  
  282.  
  283.                         e.stopPropagation();  
  284.  
  285.                         e.preventDefault();  
  286.  
  287.                     }  
  288.  
  289.                 }  
  290.  
  291.             });  
  292.  
  293.         });  
  294.  
  295.     </script>  
  296. 復制代碼 

在上一篇文章我的jQuery動態(tài)表格插件中有人問我如果在后臺處理，數(shù)據(jù)，我所以在本次demo中特別利用dataset處理成為datatable：這里的處理時存在一個靜態(tài)變量ds中。 

  1. View Code   
  2.  
  3. public partial class dynamicTableDemo1 : System.Web.UI.Page  
  4.  
  5. {  
  6.  
  7.     private static System.Data.DataSet ds;  
  8.  
  9.     protected void Page_Load(object sender, EventArgs e)  
  10.  
  11.     {  
  12.  
  13.         if (IsPostBack)  
  14.  
  15.         {  
  16.  
  17.               
  18.  
  19.         }  
  20.  
  21.     }  
  22.  
  23.    
  24.  
  25.     protected void BindTable()  
  26.  
  27.     {  
  28.  
  29.         if (ds != null && ds.Tables["item"] != null)  
  30.  
  31.         {  
  32.  
  33.             List<string> list = new List<string>();  
  34.  
  35.             foreach (System.Data.DataRow item in ds.Tables["item"].Rows)  
  36.  
  37.             {  
  38.  
  39.                 list.Add(string.Format("<tr >" +  
  40.  
  41.                     "<td style='text-align: center;'>" +  
  42.  
  43.                         "<label class='rownum' property='SortNum'>" +  
  44.  
  45.                       " </label>" +  
  46.  
  47.                     "</td>" +  
  48.  
  49.                     "<td>" +  
  50.  
  51.                         "<input property='FinanceType'   style=' width:200px;' {0}/>" +  
  52.  
  53.                     "</td>" 
  54.  
  55.                     +  
  56.  
  57.                     "<td >" +  
  58.  
  59.                    "<input readonly='readonly' property='FinanceBudget' {1}> " +  
  60.  
  61.                    " </td>" +  
  62.  
  63.          " <td>" +  
  64.  
  65.                      " <input type='text' class='number' property='FinanceReal' value='{2}' />" +  
  66.  
  67.                    " </td>" +  
  68.  
  69.                    " <td >" +  
  70.  
  71.                      " <input readonly='readonly' property='FinanceReduction' value='{3}'> " +  
  72.  
  73.                    " </td>" +  
  74.  
  75.                     "<td align='center' style='width:150px; text-align:center;'><a class='deleterow' style='cursor:hand;'>" +  
  76.  
  77.                                  "<img alt='刪除' src='Image/delete.png' style='border: 0px; width: 16px; height: 16px' />刪除</a></td>" +  
  78.  
  79.                                  "</tr>", item["FinanceType"].ToString() == "" ? "" : "value='" + item["FinanceType"] + "'", item["FinanceBudget"].ToString() == "" ? "" : "value='" + item["FinanceBudget"] + "'", item["FinanceReal"], item["FinanceReduction"]));  
  80.  
  81.             }  
  82.  
  83.             Literal1.Text = string.Join("",list.ToArray());  
  84.  
  85.         }  
  86.  
  87.     }  
  88.  
  89.    
  90.  
  91.     protected void button1_click(object sender, EventArgs e)  
  92.  
  93.     {  
  94.  
  95.         var xml = HiddenField1.Value;  
  96.  
  97.         ds = new System.Data.DataSet();  
  98.  
  99.         ds.ReadXml(new System.IO.MemoryStream(System.Text.Encoding.UTF8.GetBytes(xml)));  
  100.  
  101.         BindTable();  
  102.  
  103.     }  
  104.  
  105. }  
  106. 復制代碼 
 

最后在上效果圖：我的jQuery動態(tài)表格插件二

后臺數(shù)據(jù)源：

我的jQuery動態(tài)表格插件二

插件基本使用請參見：我的jQuery動態(tài)表格插件

本博客中其他jQuery資料：我jQuery系列之目錄匯總

插件下載

搜集數(shù)據(jù)源xml我的jQuery動態(tài)表格插件二

例如：customerFunction: { "age": function(o) { return o.val() + 1; } },這里定義property為age的取值方式為：其值+1。Jquery EasyUi的ComboTree那么我們可以定義為

customerFunction: { "type": function(o) { return $(o).combotree(“getValue”)} }.

5:默認行數(shù), DefaultRowCount,在我們的處理中用戶經(jīng)常會要求你能不能初始化就給我們默認幾行啊，我難得一個一個的點擊增加。如果你也有這樣的需求，那么這個屬性就可以幫助你輕松的搞定了。

6：增加了xml搜集類型的節(jié)點名自定義，在我們的某些處理中為了，搜集某些固定行的數(shù)據(jù)，但是為對xml其他節(jié)點的區(qū)分，所以，在本次的版本中增加了一個xmlitem，如xmlitem="total"設(shè)置。這個需要時來自我的一個同事的動態(tài)行，以及還有動態(tài)增加列的需要處理中。

jQuery dynamicTable版本仍會隨著用戶的需求一步一步的更新。同時也希望大家提出你的寶貴意見，你認為還需要那些功能，或者是對于代碼的重構(gòu)等等。

下面來一個jQuery EasyUi ComboTree的的demo：一個資金預算審批的例子。

先定義費用類型，和combotree的本地數(shù)據(jù)源，實際中需要我們從后臺輸出的。

  1. View Code   
  2.  
  3. if ($.browser.msie) {  
  4.  
  5.                 $(host).live("keydown", function(evt) {  
  6.  
  7.                     if (event.keyCode == 13) {  
  8.  
  9.                         event.keyCode = 9;//將鍵值13轉(zhuǎn)化為9（tab）；  
  10.  
  11.                     }  
  12.  
  13.                 });  
  14.  
  15.             }  
  16. 復制代碼 
向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手