flexigrid 學習總結

　　最近看到了一款flexigrid表格組件，簡單美觀，在下載使用的過程中，發現缺少很多功能。《基於jQuery的GridView-Flexigrid(2)-擴展和修復》給我帶來了很大的幫助，而我在它的基礎上也做了細節的調整，由於我在grid中保存了當前加載的數據源，以及每條數據的選中狀態，所以以下方法，實現起來倒也簡潔。下面針對功能簡單做下說明:

　　1.增加獲取選中行對應的Json數據，返回Json對象數組。

　　2.增加獲取選中行的索引，返回數據。

　　3.增加選中指定行，不選中指定行等方法。

　　4.重寫行綁定事件。在動態添加行時，會觸發onRowDataBind事件，this指向行的dom對象，可以為行動態的綁定事件。

　　5.增加總行數和數據源的節點名稱配置。該項主要是由於，其本身要求后台返回的數據格式為{total:0,rows:[]}，與項目現狀不兼容，故可以直接指定節點名稱，加載數據。

　　6.增加數據源為Json對象數組的支持。該項主要是由於部分接口直接返回的數據源，無需總行數，故無需分頁。

　　7.增加隱藏和顯示grid方法。該項純屬項目需要，一份數組對應2種顯示方式，我想公用一個翻頁組件，故如此做。

　　8.重寫reload事件，增加參數支持，可以在reload時通過改變屬性配置達到修改條件得到修改后的數據源，或者加載指定頁等。

　　讓我們看看代碼是怎么寫的吧。首先是頁面html代碼

        <div id="ptable" style="margin: 10px">
            <table id="productlist"></table>
        </div>

　　下面是Js配置部分

            var option = {
                height: "auto", //flexigrid插件的高度，單位為px
                width: "auto",
                url: '/Plugs/flexigrid/sample/Handler1.ashx', //ajax url,ajax方式對應的url地址
                colModel: [
                    { text: '商品編碼', name: 'ProductID', width: 50, sortable: true, align: 'left', hide: true },
                    { text: '商品名稱', name: 'ProductName', width: 100, sortable: true, align: 'left' },
                    { text: '規格', name: 'QuantityPerUnit', width: 120, sortable: false, align: 'center' },
                    {
                        text: '單價', name: 'UnitPrice', width: 100, sortable: true, align: 'right', render: function (value, row, data, index) {
                            return "index:" + index + " value:" + value;
                        }
                    },
                    { text: '庫存', name: 'UnitsInStock', width: 100, sortable: true, align: 'left' },
                    { text: '已訂購', name: 'UnitsOnOrder', width: 100, sortable: true, align: 'left' }
                ],
                buttons: [
                  {
                      name: 'btn1', text: "獲取選中行", bclass: 'Add', handler: function () {
                          var rows = $("#productlist").flexGetCheckedRows();
                          alert(rows.join());
                      }
                  },
                  {
                      name: 'btn2', text: "選中2", bclass: 'Delete', handler: function () {
                          $("#productlist").flexCheck(1);
                      }
                  },
                  {
                      name: 'btn3', text: '不選2和3', handler: function () {
                          $("#productlist").flexUnCheck([1, 2]);
                      }
                  },
                  {
                      name: 'btn4', text: '獲取選中行數據', handler: function () {
                          var data = $("#productlist").flexGetCheckedData();
                          alert(JSON.stringify(data));
                      }
                  }, {
                      name: 'btn5', text: '顯示隱藏Grid', handler: function () {
                          var p = window.op || 1;
                          if (p === 1) {
                              $("#productlist").flexHideGird();
                              window.op = 2;
                          } else {
                              $("#productlist").flexHideGird(false);
                              window.op = 1;
                          }
                      }
                  }, {
                      name: 'btn6', text: "重新加載(10)", handler: function () {
                          $("#productlist").flexReload({
                              newp: 10
                          });
                      }
                  }
                ],
                totalProperty: "totalcount",
                rowProperty: "data",
                sortname: "ProductID",
                sortorder: "asc",
                title: "豐富的列表",
                usepager: true,
                useRp: false,
                showcheckbox: true,
                onRowDataBind: contextmenu
            };
            var grid = $("#productlist").flexigrid(option);

效果預覽
　　

測試代碼下載