Layui table 創建js

寫在前面的話：

Layui也許不是最好的一個ui，但是，簡單即是美，在這方面，layui無疑是極其優秀的，而黑鳥我，最近一直在使用賢心的這套ui，

因為做得多了，不喜歡一些常用的功能被反復的使用，因此，封裝了一個創建table的功能，很簡單，希望能給初學者們提供一點幫助。

暫時只是一個簡單的table功能，其中的創建頁碼的功能也可單獨使用。

需注意，在使用該js前需引用 Layui (猛點這個超鏈接去官網下載)，還需要引用我編寫的js文件，繼續猛點擊 LayuiHelp.js 

2017-02-24
相較於上次，本次修復了一個在創建頁碼時的bug，給出了較為詳細的使用Demo，當然，此次依舊是一個簡單的創建table的demo 

 

先睹為快：

主要的Demo代碼

<div id="Table" style="margin-left: 25%;"> </div>
    //實例化一個表格控件對象
    var thisTable = Table_Layui;
    function SelectDataByPageIndex(PageIndex) {
        //每次查詢獲得的數據集--當前頁的數據
        var Data = [
                        { Name: "張三", Sex: "1", Age: "15" },
                        { Name: "李四", Sex: "1", Age: "18" },
                        { Name: "王五", Sex: "1", Age: "26" },
                        { Name: "韓梅梅", Sex: "0", Age: "16" }
                    ];
        thisTable.SumDateCounte = 100;//總數據的行數
        thisTable.data = Data;
        thisTable.PageIndex = PageIndex;//當前頁碼
        thisTable.CreateTableFrame();//創建table
    
    }

    //編輯方法
    function Edit(index) {
        var json = Table_Layui.GetRowData(index);
        alert("有數據集了，自己處理編輯事件哦");

    }

    //刪除方法
    function Delete(index) {
        var json = Table_Layui.GetRowData(index);
        alert("我要放大招了，小心點！");
    }




    //表格控件初始化設置
    function TableOnit() {
        thisTable.TablePanel = "Table";
        thisTable.Edit = Edit;
        thisTable.Delete = Delete;
        thisTable.SelectDataByPageIndex = SelectDataByPageIndex;
        thisTable.Column = [
                { txtName: "姓名", ValueCode: "Name", width: 80 },
                { txtName: "性別",
                    ValueCode: "Sex",
                    width: 80,
                    ValueDeal: function (value) {
                        if (value == 0) {
                            return "女";
                        } else {
                            return "男";
                        }
                        return value;
                    }
                },
                { txtName: "年齡", ValueCode: "Age", width: 80 }
            ];
    }





    $(function () {
        TableOnit(); //初始化表格
        SelectDataByPageIndex(1);//初始化查詢
    })