自己動手----基於jQuery的表格控件

 控件效果圖：

一、功能說明

1、使用簡單、擴展方便。
2、表格樣式可自定義，只需修改相應的CSS樣式即可。
3、支持行點擊事件自定義。
4、支持復選框選擇行。
5、執行列排序（支持數字、日期時間、英文、漢字等）。
6、支持自定義行按鈕及按鈕事件（如編輯、刪除按鈕等）
7、支持自定義數據的顯示樣式（根據當前數據或當前行數據）
8、支持分頁顯示數據，且在插件內部實現分頁處理。

二、使用說明

該插件的使用，基本只需兩個步驟即可，一個是表格的聲明（創建），然后就是數據的加載。

1、表格的聲明（創建）

            var objTable = new HyTable({
                columns: [
                    {name: '姓名', mapping: 'username', type: 'string', width: '100', allowSort: true, renderer: function(val){return val;}}
                ],                      //(array)列信息
                emptyMsg: "暫無數據",   //(string)無數據時的提示信息
                renderTo: "",           //(string)表格容器，必須是HTML元素的ID屬性值
                model: 'remote',       //(string)模式，遠程(remote)or本地(local)
                url: '',                //(string)遠程模式的獲取數據的url地址
                allowPaging: true, (bool)//是否分頁
                pageSize: 20,            //(int)每頁顯示的行數
                checkSelected: false,    //(bool)復選框選擇
                selectedField: "",      //(string)復選框選中字段
                stripeRows: false,      //(bool)是否啟用隔行變色 默認不啟用
                onRowClick: null        //(function)行點擊事件
            });
        

2、表格數據的加載

            objTable.loadData(1,data);//第一個參數為加載頁的頁索引，第二個參數有兩種情況，1：如果參數內容是JSON對象，則表示是查詢的查詢條件，如果是數據，則表示直接加載本地數據到表格中。
        

三、各參數意義（API）

columns：	參數類型：json數組 表格的列定義 { name:'列頭名稱', mapping:'code', //(string)映射JSON數據中的鍵名稱 width:'100', //(string)列寬度，可數字或百分比等 allowSort:true, //(bool)是否排序 type:'string/int/float/datetime/action', //(string)數據類型或列類型，前四個為數據類型，為action表示為操作列，放置按鈕用 renderer:function(val,json){return "內容前加文字"+val;}, //(function)列渲染函數function，參數為當前單元格的值及當前行的數據 content:[{text:'修改',code:'edit',handler:function(data),renderer:function(data){return false or true;}}] //按鈕列的按鈕，可為JSON數組表示多個或一個按鈕 //handler 為當前按鈕的點擊事件，參數為JSON格式的當前行數據。 //renderer 為控制當前按鈕是否顯示的事件，可選，參數為JSON格式的當前行數據，主要用於根據當前行數據決定是否顯示該按鈕用。返回false則表示按鈕不顯示，返回true則顯示。 }
emptyMsg：	參數類型：string 數據為空時，顯示的提示文字，如：暫無數據。
renderTo：	參數類型：string 表格的父級容器，為HTML元素的ID屬性值
model：	參數類型：string （默認為“remote”）表格數據加載模式，值為“remote”則表示從遠程加載表格數據，為“local”則表示從本地加載數據
url：	參數類型：string （僅在model="remote"時有效）遠程數據加載地址
allowPaging：	參數類型：bool （默認為“true”）是否分頁顯示數據，僅遠程加載表格數據才支持分頁。
pageSize：	參數類型：int （默認為“20”，僅在allowPaging=true時有效）每頁顯示的記錄數
checkSelected：	參數類型：bool （默認為“false”）是否啟用復選框選擇數據，啟用后，可使用getSelected()方法獲取選中的數據，多條以逗號間隔
selectedField：	參數類型：string （僅在checkSelected=true時有效）選中數據時，用以標識數據的主鍵字段
stripeRows：	參數類型：bool （默認為“false”）是否啟用表格隔行變色效果
onRowClick：	參數類型：function(json) 行點擊時觸發的事件，方法參數為JSON格式的當前點擊行數據。可使用（json.字段名）獲取數據

四、開發思路

主要是在開發該插件時的想法及部分注意事項，方便后期同事維護該插件。

1、表格生成過程：創建表格(主要為列頭）（綁定列排序點擊事件等）--> 加載數據 （綁定行點擊事件、復選框選中、行中按鈕定義、單元格數據顯示）

2、loadData(1,data)方法的第二個參數，如果是遠程加載數據，則該參數內容為查詢條件的JSON格式。查詢數據時，將查詢條件組織成JSON格式，然后調用該方法即可。

3、插件在獲取分頁數據時，會自動往后台傳入start及end兩個參數，即獲取數據的起始行及結束行，
如每頁顯示20條，則獲取第5頁數據時，會傳入start=80,end=100這兩個參數，這也方便oracle數據庫獲取數據。

4、定義按鈕操作列時，code字段不能為空，該字段主要是綁定按鈕事件時，查詢按鈕用。

另外，在插件中所在的JS文件中，我還放置了一個簡單的將JSON格式數據加載到表單中的方法$(obj).loadForm(data)，其中data為JSON格式數據。
該功能與jQuery中的serializeArray()方法相反，serializeArray()方法將一個指定HTML元素中的輸入項的值序列化為JSON對象，
而loadForm(data)方法則是將JSON對象賦值到指定HTML元素中的輸入項。

DEMO下載地址：http://115.com/file/e7sxriym#jQuery.HyTable表格Demo.rar

注：該控件僅是在工作中按需要所嘗試開發的產品，個人學習成果，不喜請勿噴。