中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

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

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

我的jQuery動態表格插件

發布時間：2020-06-09 13:37:36 來源：網絡 閱讀：722 作者：破狼 欄目：web開發

  在我的頁面處理中有時需要進行表單處理，需要一個用戶可以添加修改多條記錄。在這里我們需要控制用戶的輸入驗證，表格的添加刪除，用戶輸入數據的統計聚合，還有相應的計算列比如商品的總價=商品的單價*商品數量，再如，同時在用戶提交的時候我還要需要獲取提交到后臺服務端處理在存儲到我們的數據庫。本插件則簡單的處理了這些繁瑣的事情。

插件屬性說明：

1：rowTemplate：這是插入列的模板，在模板中我們的序號這種行號標示的需要rownum 的class。在模板中的需要唯一編號的比如我們的radiobutton的name屬性在每個td單元格需要唯一的name組，再如id這種需要唯一的屬性，需要{0}的占位符。同時在我們的表格處理中有些行為統計行或者數據的固定行，是不會被用戶刪除的，則需要fixed=true。以及每個輸入或者label等控件，需要回傳提取值的需要有property=“propertyname”標示。

2：addTrigger：這是一個觸發增加行的jQuery選擇器。

3：addPosition：是插入行的插入位置，默認在last最后，但是應我們的需求，可能在最后是匯總行等固定行，所以還添加的三種方式：first，還有就是數值，正數表示從開始行開始計算，負數表示從最后開始計算。

4：removeTrigger：刪除標示，它是一個數組，可以有多個刪除按鈕，同時數組的每個對象也是一個對象有selector觸發按鈕的jQuery選擇器，handler觸發的處理方式，取值有first刪除第一行,last最后一列,current當前列，所有的刪除都是刪除非fixed=true的列。

5：同時可以通過$(selector).updateSortNum();替換所有的td 帶有rownum的行號列。其實這里我考慮可以去掉td的限制。

6：$（rowselector）.getRowObj():獲取以property為屬性的javascript行對象。

7:$(tableselector).getTableObj():獲取table的以property為屬性的javascript數組對象，是行對象的集合（數組）。

8：getSource（saveHiddentField）:獲取xml組織的屬性集，如果傳入了saveHiddentField選擇器，這會自動賦值在saveHiddentField上。

這里有item: , root: item為每行數據xml的節點默認item，root為xml根節點默認root。獲取了xml，我們就可以在后臺直接解析xml，或者是用DataSet.ReadXml()直接轉化為DataTable。

8：$(inputselector).getValue():獲取控件的值：支持text，label，checkbox，radio，label，td，textarea的取值。其中radio取值選中value，checkbox取值為所有選中行value的“，”號分隔字符串。

9：Calculates：計算匯總，是一個數組對象，具有selector：匯總顯示控驗證財務的實際支出額不能高于審批額，而審批額不能高于實際的預算額件的選擇器，column：匯總的屬性，對應我們上面所附加的property屬性。func：為匯總處理方式：支持聚合函數:sum,max,min,count,avg,以及用戶自定義函數（必須具有返回值），傳入參數為一個整列property取值數組Array。

10：CalculatesColumn：計算列，同樣是一個js數組，具有trigger數組，表示觸發計算的屬性property，column計算列的property，func自定義處理函數。（這里廢話幾句本想用表達式，使用eval處理自動計算，但是覺得需要的變化太多不好控制，所以不如交給用戶實現一個函數作為代理委托，作為回調函數）；這里可以用來處理，商品的總價=商品的單價*商品數量，一個上面所說的驗證財務的實際支出額不能高于審批額，而審批額不能高于實際的預算額。同時這里也可以作為驗證的觸發器。

在這個插件中沒有數據類型的驗證，由于驗證的需要變化太大，太多，而且我們一級有了很多優秀的Jquer驗證插件，配合使用將用很實用。同時也可以自己控制：比如我的兩個簡單的驗證：

$(".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：

哦忘了提醒一句，在這個插件中要求table遵循標準w3c，thead，tbody。在thead中我們可以自己加入表頭設置，不管多復雜的多表頭結構。

  1. View Code   
  2.  
  3. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MEFASPNET.aspx.cs" Inherits="MEFASPNET" %>   
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>   
  6. <html xmlns="http://www.w3.org/1999/xhtml%22>   
  7. <head runat="server">   
  8.     <title></title>   
  9.  
  10.     <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>   
  11.  
  12.     <script src="JS/dynamicTable.js" type="text/javascript"></script>   
  13.  
  14.     <script type="text/javascript">   
  15.         function m(v) {   
  16.             return v[0]+100;   
  17.         }   
  18.         $(function() {   
  19.             $("table").dynamicTable(   
  20.                 {   
  21.                     addTrigger: ".add",   
  22.                     removeTrigger: [{ selector: ".delete", handler: "first" }, { selector: ".deleterow", handler: "current"}],   
  23.                     rowTemplate: "<tr><td class='rownum' property='sortnum'></td><td> <input type='text' property='name'/></td><td><input type='text' property='age' class='number'/></td>"   
  24.                     + "<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>"   
  25.                                 + "<td><input type='text' property='email'/></td><td><input type='text' property='phone'/></td><td><input type='text' property='date' class='datetime'/>" +   
  26.                                 "<td><input property='checkbox' type='checkbox' value='1'  style='width:10px'/>test1<input type='checkbox' value='2' style='width:10px'/>test2</td>"   
  27.                                 + "</td><td style='text-align:center;'><a class='deleterow' style='cursor:hand;'>"   
  28.                                  + "<img alt='刪除' src='Image/delete.png' style='border: 0px; width: 16px; height: 16px' />刪除</a></td></tr>",   
  29.                     addPosition: -1,   
  30.  
  31.                     Calculates: [{ selector: "#totalage", column: "age", func: "sum"}],   
  32.                     CalculatesColumn: [{ trigger: ["age", "name"],column:"date", func: function(o,rowobj) { o.value =parseFloat( rowobj.age) +parseFloat( rowobj.name); } }]   
  33.                 }   
  34.     );   
  35.  
  36.         });   
  37.     </script>   
  38.  
  39.     <style type="text/css">   
  40.         .TableStyle   
  41.         {   
  42.             width: 99%;   
  43.             height: auto;   
  44.             overflow: hidden;   
  45.             border: 1px solid #4772AB;   
  46.             border-collapse: collapse;   
  47.             background: #D8EAFF;   
  48.             margin: 2px;   
  49.         }   
  50.         .TableStyle thead td   
  51.         {  text-align:center;   
  52.             }   
  53.         .TableStyle th, td   
  54.         {   
  55.             border: solid #4772AB;   
  56.             border-width: 0 1px 1px 0;   
  57.             padding: 2px;   
  58.         }   
  59.         .TableStyle th   
  60.         {   
  61.             text-align: right;   
  62.             font-weight: normal;   
  63.         }   
  64.         .TableStyle td   
  65.         {   
  66.             text-align: left;   
  67.             background: #FFFFFF;   
  68.         }   
  69.         .TableStyle .title   
  70.         {   
  71.             width: 99%;   
  72.             font-size: larger;   
  73.             line-height: 20px;   
  74.             text-align: center;   
  75.             background: url(p_w_picpaths/right_head.jpg) repeat-x;   
  76.             padding: 0;   
  77.         }   
  78.         table.Grid th   
  79.         {   
  80.             width: 99%;   
  81.             height: 16px;   
  82.             overflow: hidden;   
  83.             border: 1px solid #4772AB;   
  84.             border-collapse: collapse;   
  85.             background: #D8EAFF;   
  86.             padding-left: 1px;   
  87.             font-weight: normal;   
  88.             text-align: left;   
  89.         }   
  90.         table input   
  91.         {   
  92.             border: 0px;   
  93.             width: 98%;   
  94.         }   
  95.     </style>   
  96. </head>   
  97. <body>   
  98.     <form id="form1" runat="server">   
  99.     <table style="width: 100%;" border="1" cellpadding="0" cellspacing="0" class="TableStyle">   
  100.         <thead>   
  101.             <tr style="text-align: center;">   
  102.                 <td rowspan="2">   
  103.                     序號   
  104.                 </td>   
  105.                 <td rowspan="2">   
  106.                     姓名   
  107.                 </td>   
  108.                 <td rowspan="2">   
  109.                     年齡   
  110.                 </td>   
  111.                 <td rowspan="2">   
  112.                     Sex   
  113.                 </td>   
  114.                 <td colspan="2">   
  115.                     聯系信息   
  116.                 </td>   
  117.                 <td rowspan="2">   
  118.                     日期   
  119.                 </td>   
  120.                 <td rowspan="2">   
  121.                     test checkbox   
  122.                 </td>   
  123.                 <td rowspan="2">   
  124.                     <a class="add">   
  125.                         <img alt="增加" src="Image/add.png" style="border: 0px; width: 16px; height: 16px" />增加</a>&nbsp;&nbsp;   
  126.                     <a class="delete" style="cursor: hand;">   
  127.                         <img alt="刪除" src="Image/delete.png" style="border: 0px; width: 16px; height: 16px" />刪除</a>   
  128.                 </td>   
  129.             </tr>   
  130.             <tr>   
  131.                 <td>   
  132.                     Email   
  133.                 </td>   
  134.                 <td>   
  135.                     電話   
  136.                 </td>   
  137.             </tr>   
  138.         </thead>   
  139.         <tbody>   
  140.         <tr fixed="true"><td colspan="9"></td></tr>   
  141.         </tbody>   
  142.     </table>   
  143.     <input type="text" id="totalage" />   
  144.     <input type="button" value="getSource" onclick="alert($('table').getSource());" />   
  145.     <input type="button" value="getObject" />   
  146. <div id="resultdiv"></div>   
  147.     <script type="text/javascript">   
  148.         $("input:[value='getObject']").live("click", function() {   
  149.             var obj = $("table").getTableObj();   
  150.             $("#resultdiv").html("");   
  151.             for (var i = 0; i < obj.length; i++) {   
  152.                 for (var o in obj[i]) {   
  153.                     $("#resultdiv").html($("#resultdiv").html() + "&nbsp;&nbsp;" + o + "->" + obj[i][o]);   
  154.                 }   
  155.                 $("#resultdiv").html($("#resultdiv").html() + "<br/>");   
  156.             }   
  157.         });   
  158.     </script>   
  159.  
  160.     </form>   
  161. </body>   
  162. </html>  
  163. 復制代碼  
  164.    

我的jQuery動態表格插件

我的jQuery動態表格插件

測試代碼比較亂，沒有考慮實際性質，比如標題日期，作為了計算列，年齡作為了統計列，在后臺的input匯總，敬請原諒。有機會在好好的寫幾個Demo。

有什么bug，敬請大家提出，我會盡快修復。同時也謝謝各位的不舍賜教。

我的Jquery系列還有： 

我jQuery系列之目錄匯總

demo和文件下載

向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
公安县| 盖州市| 武穴市| 同江市| 丽江市| 聊城市| 柯坪县| 英超| 长岛县| 长武县| 兰西县| 邵东县| 盐山县| 固镇县| 天等县| 莫力| 扎鲁特旗| 合水县| 油尖旺区| 惠安县| 东平县| 五华县| 麻城市| 光山县| 漳州市| 铁力市| 海晏县| 青川县| 平武县| 巢湖市| 酉阳| 巫溪县| 连江县| 河间市| 高州市| 兴城市| 盐亭县| 兴海县| 乐平市| 涪陵区| 康马县|