lyGrid.js 正式開源,源碼可加官方羣獲取,

更新到1.2.0V版本

---

lyGrid.js 正式開源,源碼可加官方羣獲取,

詳細文檔請看 http://www.lanyuanoss.com/document.shtml

git 地址: https://gitee.com/lanyuan/lyGrid.git

lyGrid 藍緣表格插件 lyGrid.js-1.1.0v 正式開源,..歡迎到藍緣官網評論 http://www.lanyuanoss.com/lanyuanoss/1463730205140/views.shtml

lyGrid表格插件

[示例] git 地址: https://gitee.com/lanyuan/lyGrid.git

[表格基礎參數] 說明:如下參數是表格默認值,根據本身需求能夠從新設置

var grid = $("#paging").lyGrid({

l_column : [{//表格列表數據

        colkey : null,

        name : null,

        width : 'auto',

        theadClass:'',

        tbodyClass:'',

        height : 'auto',

        align : 'center',

        hide : false,

        isSort:false,

        renderData : function( rowindex ,data, rowdata, colkey)//渲染數據

            {

        //rowindex 當前行號 ,data 當前列的數據 ,rowdata 當前行json數據, colkey 當前列的colkey

            //處理當前列數據。可自定義html

                return "";

            }

        }],

        dymCol : false,//是否顯示動態列

        width : '100%', // 表格高度

        height : '100%', // 表格寬度

        theadHeight : '28px', // 表格的thead高度

        tbodyHeight : '27px',// 表格body的每一行高度

        jsonUrl : '', // 訪問後臺地址 支持靜態數組數據[{xxx},{xxx},{xxx}]

        isFixed : false,//是否固定表頭

        usePage : true,// 是否分頁

        setNumber : false,// 是否顯示序號

        local:false,//是否本地分頁,即返回全部數據,讓前端分頁

        records : 'records',// 分頁數據

        pageNow : 'pageNow',// 當前頁碼 或 當前第幾頁

        totalPages : 'pageCount',// 總頁數

        totalRecords : 'rowCount',// 總記錄數

        pagecode : '10',// 分頁時，最多顯示幾個頁碼

        async : false, // 默認爲同步

        data : {

            sidx:'',// 排序字段

            sord:''// 排序 asc / desc

        }, // 發送給後臺的數據 是json數據 例如{nama:"a",age:"100"}....

        pageSize : 10, // 每頁顯示多少條數據

        checkbox : false,// 是否顯示覆選框

        checkValue : 'id', // 當checkbox爲true時，須要設置存放checkbox的值字段 默認存放字段id的值

        trRowClick:null,//trRowClick:function(index,data)tr.rowIndex 第幾行 ,rowdata  當前行數據雙擊行事件

        beforeComplete:null,//請求數據以前,執行這個方法  beforeComplete(params); 表格全部參數

        afterComplete:null,//全部數據請求完成以後執行這個方法 afterComplete(column,currentData);//回調函數 column 字段名,當前界面的數據 currentData

        treeGrid : {

            type: 1, //1 表示後臺已經處理好父類帶children集合 2 表示沒有處理,由前端處理樹形式

            tree : false,// 是否顯示樹

            hide : false,//默認展開

            //checkParent : false,//選中子類，自動選中父類

            checkChild : false,//選中父類，自動選中子類

            name : 'name',// 以哪一個字段 的樹形式 若是是多個 name,key

            id: "id",

            pid: "pid"

        },

    // 樹形式 {tree : false,//是否顯示樹 name : 'name'}//以哪一個字段 的樹形式

});

[查詢方法] $("#search") 綁定查詢按扭 setOptionis 設置查詢參數, 具體參數請看 [表格基礎參數],全部參數均可以重設.

1

2

3

4

5

6

$("#search").click("click", function() {// 綁定查詢按扭

var searchParams = $("#searchForm").serializeJSON();

grid.setOptions({//設置參數，具體參數與表格參數一致

    data : searchParams//查詢條件數據，必須是json格式

});

});

[刷新表格] 具體參數請看 [表格基礎參數] 中 var grid = lyGrid({......

1

grid.loadData();

[設置複選框值] grid 是表格對象,具體參數請看 [表格基礎參數] 中 checkValue : 'id', // 當checkbox爲true時，須要設置存放checkbox的值字段 默認存放字段id的值

1

checkValue : 'id', // 當checkbox爲true時，須要設置存放checkbox的值字段 默認存放字段id的值

[獲取複選框值] grid.getSelectedCheckbox() 獲取選擇的行的Checkbox值,值是一個數組,[id1,id2,id3,id4....]

1

2

3

var ck = grid.getSelectedCheckbox(); ---> [1,2,3,4] //是數組

ck = ck..join(",") ---> 1 //是字符串

console.log(ck) --> 1 //是字符串

[獲取行數據] grid.selectRow(),// 獲取選中行數據，當前行的全部json數據，包括隱藏和非隱藏的數據,返回一個list數組對象

1

2

3

var row = grid.selectRow();

//例如選中了兩個

---> [{id:1,name:'小明'},{id:2,name:'小紅'}] //是對象的list

[上移一行] grid.lyGridUp();當前選中的行會向上移動一行.

1

grid.lyGridUp();

[下移一行] grid.lyGridDown();當前選中的行會向下移動一行.

1

grid.lyGridDown();

[獲取當頁數據] var c = grid.getCurrentData(); 獲取當前頁的全部數據, 是json 數組對象

1

var c = grid.getCurrentData();

[獲取表頭數據] var c = grid.getColumn();//獲得你定義表格頭 l_column 的數據

1

var c = grid.getColumn()

[導出數據] grid.exportData(url);//傳入導出url地址. 發送到後臺的參數是 exportData=表格頭對象數據 + 查詢條件參數

1

grid.exportData(url);

[動態顯示錶頭] 基礎參數設置 dymCol : false,//是否顯示動態列 默認爲false

1

2

3

4

5

6

7

var localData = [{"id":179,"methods":"資源管理-修改資源","accountName":"admin","module":"系統管理","userIP":"0:0:0:0:0:0:0:1",

"description":"執行成功!","operTime":1447128013000,"logType":"0","actionTime":"18"}.....

var grid = $("#paging").lyGrid({

l_column : [{....}]{//表格列表數據

          dymCol : false,

       ......

[當前行回調] 定義一個數組對象,基礎參數設置 renderData : function( rowindex ,data, rowdata, colkey)//渲染數據

1

2

3

4

5

6

7

8

9

10

var grid = $("#paging").lyGrid({

l_column : [{.. 在某一列設置渲染函數

            renderData : function( rowindex ,data, rowdata, colkey)//渲染數據

            {

                  //rowindex 當前行號 ,data 當前列的數據 ,rowdata 當前行json數據, colkey 當前列的colkey

                  //處理當前列數據。可自定義html

                    return "";

             }

          }....]//表格列表數據

            ......

[前端分頁] 定義一個數組對象,基礎參數設置 localData:localData,local:true

1

2

3

4

5

6

7

8

var localData = [{"id":179,"methods":"資源管理-修改資源","accountName":"admin","module":"系統管理","userIP":"0:0:0:0:0:0:0:1",

"description":"執行成功!","operTime":1447128013000,"logType":"0","actionTime":"18"}.....

var grid = $("#paging").lyGrid({

l_column : [{....}]{//表格列表數據

          jsonUrl:localData,

          local:true,//表示前端分頁

       ......

[回調方法] var grid_c=lyGrid(parm,function(obj){}) obj 是當前表格對象, parm 是表格的基礎參數

1

2

3 var grid = $("#paging").lyGrid({ beforeComplete:function(conf){

var s = "加載以前觸發,當前表格配置參數 "+JSON.stringify(conf);

          layer.alert(s);

     },

     afterComplete:function(column,currentData){

         var s = "加載以後觸發,當前頁數據是 "+JSON.stringify(currentData);

         layer.alert(s);

   }

})