jQuery前端table插件鎖定表頭和鎖定首列

所屬分類:UI-圖表,篩選及排序

分享到微信朋友圈
X
jQuery前端table插件鎖定表頭和鎖定首列 ie兼容8

兼容性

無法兼容所有瀏覽器,理論上支持H5的瀏覽器應該都可以(見諒)。

在IE8(H5的效果無效)、IE11、Edge、Chrome62、firefox57、360瀏覽器8.1(內核45)內測試均正常,其他瀏覽器沒裝就沒再查看。

參數說明,最終以代碼為準

v1.3 

1、cols增加dataType屬性,設為html時避免執行腳本

2、修改最后一列是否去掉右邊框的算法

v1.2 

1、常規更新

2、合并check、uncheck方法

table2.js使用說明:(具體以table2.js文件內說明為準,后續不再更新)

表格支持定寬或自適應寬度,

使用方法

layui.config({
    base: '自己項目下table2目錄'
}).use('table2', function() {
    table = layui.table2;
    //table初始化
    ......
});
  • table屬性option:

  • url:ajax請求路徑

  • method:ajax請求方法,可選get|post,默認get

  • width:容器寬度,數值

  • height:容器高度,數值|full-數值|sel-jqselectors-數值(jqselectors選擇器不支持-符號,因為需要按照-分割)。

     使用sel模式時,只需填寫table下方的容器選擇器,系統會自動剔除上方的dom高度,如果固定數值沒有,請填寫0,不能省略

  • minHeight: 表格最小高度,默認80

  • skin:皮膚,可選col|row|none,col:列邊框風格,row:行邊框風格,none:無邊框風格

  • even:隔行換色,可選true|false,默認false

  • expandRow: 行是否允許展開,可選true|false,默認false。需要配合on("expand", function(){})使用

  • singleSelect:單選行,可選true|false,默認false,可以選中多行

  • nowrap:數據是否自動換行,默認true,不自動換行,填寫true性能更高一下

  • localSort: 本地排序,默認true,不想使用本地排序,請配置成false;如果由后臺排序建議配置成false

  • loading: 請求數據時,是否顯示loading,默認true

  • cellMinWidth: 所有單元格默認最小寬度,默認60px

  • serialField:主鍵唯一字段,建議填寫,否則刪除數據的時候性能減弱,默認id,區分大小寫

  • colspanDefs:數組,合并單元格,例如:["Name", "Body"]將會按照Name和Body進行單元格合并

page: //是否分頁, 默認false, 可選true, 或則如下
{
    align: 對齊方式, 可選left | right | center, 默認left
    curr: 當前頁
    limit: 每頁顯示的數量, 默認10條
    limits: 每頁條數選擇, 默認[10, 20, 30, 40, 50, 60, 70, 80, 90]
}

屬性事件:

  • onAjaxBeforeSend(xhr):和ajax beforeSend參數一致,此時this為本次ajax請求時傳遞的options參數。

     如果返回false可以取消本次ajax請求

  • onAjaxSuccess(result):ajax成功請求數據時(table清除上次數據后),在這里可以做數據統一。

       需要返回json數據,格式為{code: 0, msg: '錯誤信息', count: 100, data: []},code為0時表示成功。

       此時this為本次ajax請求時傳遞的options參數

  • onAjaxError(xhr, textStatus, errorThrown):和ajax error參數一致,此時this為本次ajax請求時傳遞的options參數

  • onBeforeAddRow(rowindex, data): 添加行數據前返回行索引和行數據

  • onAddRow(rowindex, data): 添加行數據后返回行索引和行數據

  • onPageLimitChanged(preLimit, toLimit):當每頁條數發生變化時觸發,preLimit為之前的頁條數,toLimit為修改后條數

  • onPageJump(prePage, toPage):頁碼跳轉,進行數據請求綁定前,prePage為之前的頁碼,toPage為修改后的頁碼

  • onComplete(data):所有處理完畢(table渲染數據結束),data為onAjaxSuccess返回的result數據

  • cols:屬性

  • filed:綁定字段,需要顯示的列必填,主標題副標題可不填

  • title:標題

  • sort:排序,可選true|false,默認false

  • width:寬度,可以是定寬,百分比;不填則自適應寬度

  • rowspan:行合并

  • colspan:列合并

  • resize:拖拽寬度,默認false

  • align:對齊方式

  • style:設置head樣式,支持css所有樣式,帶小橫線的需要用引號包起來,eg:style: { "font-size": "14px" }

  • dataStyle: 設定數據樣式,只有包含field時才有效,帶小橫線的需要用引號包起來,eg:style: { "font-size": "14px" }

  • dataType: 數據格式,可選html|非html值。當為html時,會進行轉碼,其他值不做處理,有formatter時無效,自行處理

  • formatter(data, index):數據格式化,傳入一個函數比如操作列,data當前行數據,index行號從0開始

tableIns方法:

  • reload:重新加載

  • getSelectedRows:獲取選中行,返回數組,數據格式每個包含一個index,data,index為選中行序號,

      從0開始,data為當前行數據,單選時注意使用list[0]

  • getData:獲取table所有數據

  • on(event, callback):事件綁定。event字符串,可選如下,callback為函數

  • tool返回函數function(evt, obj),evt為事件,obj包含index,data,tr,del,update,index為tr行號,

      tr為dom對象,data為數據(只監聽包含event的click事件)

  • sort返回函數(initSort),initSort對象包含:sortField排序字段,sortType排序方式,可選asc|desc

  • expand返回函數(rowindex, data, container): 行展開時回調,rowindex:行數據前返回行索引,data行數據,

      container為容器,需要返回一個字符串

  • check返回函數(index, row):行選中,index為tr行號,row為tr(jquery對象)

  • uncheck返回函數(index, row):行取消選中,index為tr行號,row為tr(jquery對象)

可全局配置參數:

table2.options:屬性包含如下

  • expandRow: false,

  • nowrap: true,

  • minHeight: 80,

  • singleSelect: false,

  • localSort: true,

  • loading: true,

  • cellMinWidth: 60,

  • serialField: "id"

注意:

1、進行拖拽后,表格將不再自適應寬度

2、cols中同時設置style和dataStyle時align無效。并且不建議設置max-width,首先對td無效,再者禁止換行時數據和表頭有1px之差

3、建議所有列書寫一個minWidth,因為當數據允許換行時(nowrap=true時),表頭可能會被換行,不好看

相比laytable優點:

- 數據可以換行,自適應寬度;可以合并單元格

- 瀏覽器大小改變時table可以自適應

- 固定列可以滾動,實現3個滾動條的同步

- 行可以展開,查看詳情

相比laytable不足:

- 不支持模板,這個我實在不會

- 不支持行內編輯

- checkbox沒有layui-table好看

- 沒有進行嚴格的測試,不知道里面有多少坑(要求嚴格的項目慎用)

- 沒有什么高級的寫法,內部實現大多采用字符串方式,不如laytable使用模板高大上

- laytable和layui自成一體,系統化程度高

- 等等吧

很高興認識了layui,希望layui越來越好(^-^)

相關插件-圖表,篩選及排序

基于echarts雙y軸折線圖實時更新

雙y軸折線圖陰影圖漸變效果混合實時更新
  圖表
 17236  104

百度ets動態添加數據

通過點擊不同按鈕,進行ajax請求對ets進行數據填充.
  圖表
 16743  133

layui使用datatableajax請求json渲染數據

基于layui,datatable.js。將datatable擴展成可以使用layui的調用方式調用的插件。當然如果想單獨使用的話,將layui擴展去掉即可,可自行百度layui。
  圖表
 44029  169

支持ie8的圓形統計比例圖

動態統計,支持ie8以及以上版本的ie瀏覽器,其他的瀏覽器
  圖表
 35595  194

討論這個項目(0)回答他人問題或分享插件使用方法獎勵jQ幣

取消回復
  短信接口
河北时时彩投注站