jQuery LigerUI 插件介紹及使用之ligerGrid

一，簡介 

ligerGrid的功能列表：

1,支持本地數據和服務器數據(配置data或者url)

2,支持排序和分頁(包括Javascript排序和分頁)

3,支持列的“顯示/隱藏”

4,支持明細行(表格內嵌)

5,支持彙總行

6,支持單元格模板

7,支持編輯表格(ligerGrid的一個特色,需要其他表單插件的支持)

8,支持樹表格(待加入)

8,支持分組(待加入)

二，第一個例子 

引入庫文件

如果不需要用到編輯功能，ligerGrid是一個單獨的插件，也就是說只需要引入plugins/ligerGrid.js和樣式css文件就可以使用(當然必須先引入jQuery)

    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>

  

加入HTML

 <div id="maingrid"></div>

準備數據源

var jsonObj = {};
jsonObj.Rows = [
    { id: 1, name: "林三", sex: "男", birthday: "1989/01/12",score:63.3 },
    { id: 2, name: "陳麗", sex: "女", birthday: "1989/01/12", score: 72.2 },
    { id: 3, name: "啊羣", sex: "男", birthday: "1981/12/12", score: 43.4 },
    { id: 4, name: "表幫", sex: "男", birthday: "1983/01/12", score: 73.2 },
    { id: 5, name: "陳麗", sex: "女", birthday: "1989/01/12", score: 74.5 },
    { id: 6, name: "成錢", sex: "男", birthday: "1989/11/13", score: 73.3 },
    { id: 7, name: "都訊", sex: "女", birthday: "1989/04/2", score: 83.2 },
    { id: 8, name: "顧玩", sex: "男", birthday: "1999/05/5", score: 93.2 },
    { id: 9, name: "林會", sex: "男", birthday: "1969/02/2", score: 73.4 },
    { id: 10, name: "王開", sex: "男", birthday: "1989/01/2", score: 33.3 },
    { id: 11, name: "劉盈", sex: "女", birthday: "1989/04/2", score: 53.3 },
    { id: 12, name: "鄂韻", sex: "男", birthday: "1999/05/5", score: 43.5 },
    { id: 13, name: "林豪", sex: "男", birthday: "1969/02/21", score: 83.6 },
    { id: 14, name: "王開", sex: "男", birthday: "1989/01/2", score: 93.7 },
    { id: 15, name: "鄂酷", sex: "男", birthday: "1999/05/5", score: 61.1 },
    { id: 16, name: "林豪", sex: "男", birthday: "1969/02/21", score: 73.3 },
    { id: 17, name: "王開", sex: "男", birthday: "1989/01/2", score: 41.6 }
];

調用ligerGrid

 

            var columns =
            [
                { display: '主鍵', name: 'id', type: 'int', mintWidth: 40, width: 100 },
                { display: '名字', name: 'name' },
                { display: '性別', name: 'sex' },
                { display: '生日', name: 'birthday', type: 'date' }
             ];
            $("#maingrid").ligerGrid({
                columns: columns,
                data: jsonObj
            });

這樣效果就出來了：

 

三，幾個重要的參數

 

1，標題：配置title和showTitle:true即可

 

            $("#maingrid").ligerGrid({
                columns: columns,
                data: jsonObj,title:'我的標題',showTitle:true
            });

2，寬度：ligerGrid會根據列自動計算出表格的寬度，當然也可以指定一個數值或者百分比來設置寬度

 

            $("#maingrid").ligerGrid({
                columns: columns,
                data: jsonObj, width: '100%'
            });

3，分頁：默認是使用分頁的，如果不想使用分頁，可以配置 userPager :false

 

            $("#maingrid").ligerGrid({
                columns: columns,
                data: jsonObj, usePager:false
            });

4，滾動條：內容有太多的行時會出現滾動體，如果不想顯示，可以通過配置isScroll設置是否出現滾動體

 

            $("#maingrid").ligerGrid({
                columns: columns,
                data: jsonObj, isScroll:false
            });

5,Column的配置

 

 

  

Dem下載：LigerUI.Demos.Grid

更多的文檔和API後面會漸漸補充,瀏覽更多的應用請訪問Demo.LigerUI.com