首頁  >  文章  >  web前端  >  tbl.js div實現的表格控制,完全免費,不依賴jquery

tbl.js div實現的表格控制,完全免費,不依賴jquery

PHPz
PHPz原創
2017-03-12 17:18:222232瀏覽

html上現在有比較好用的表格控制項是datatable,但是編輯、按鈕等部分是收費的,只有基礎功能免費。而且尺寸改變時需要手動刷新等繁瑣操作較多。所以我開發一個免費的供大家使用。

本專案已用於「虛空服務器開發套件」。目前主要支援微軟Edge瀏覽器,Chrome瀏覽器,其它未測。

tbl.js完全免費,可隨意修改,歡迎fork。

tbl.js支援清單樣式,增刪改查,全表搜尋分組分頁功能,全表編輯,全行編輯,單選,多選,樣式自訂。

可以嵌入到各種容器中,例如jquery的dialog,tabs中。

版本:0.1beta

提出bug,我會盡快修改。新年不休息。

如果不需要修改樣式,可以不載入tbl.css,tbl.js會動態載入樣式表。

我們來建立兩行表格,從現有的DOM節點建構。


1 html:<html><body><p></p></body></html>
2 new tbl(document.body.children[0],{data:[["row1"],["row2"]]});

將自建立的DOM節點插入到文件body中。


1 var tb = new tbl();
2 with (document.body) { insertBefore(tb.dom, firstChild) };
3 tb.bind([["row1"],["row2"]]);

多個欄位的表格,列的寬度以百分比自適應。


1 var tb = new tbl(undefined, {format:[{width:"20%"},{width:"20%"},{width:"20%"},{width:"20%"},{width:"20%"}]});
2 with (document.body) { insertBefore(tb.dom, firstChild) };
3 tb.bind([["row1","data","data","data","data"],["row2","data","data","data","data"]]);

列表樣式,最大高度300px,無頭部,無標題,無頁腳,5條數據,按鈕,取得行索引

這種方式會有隔行的顏色變化,可以修改CSS使樣式失效。


1 html:<html><body><p></p></body></html>
2 var tb = new tbl(document.body.children[0], {
3 editable: false, maxheight: "300px", header: false, title: false, footer: false, data: [[1], [2, "remove"], ["nan - not a number", "del"], [4, "del"], [5, "del"]], page_size: 100,
4 format: [
5      { width: "90%", nancenter: true, input: {type:"text"}},
6      { width: "10%", editable:true, input: { type: "button", value:"del", onclick: function () { tb.delete(tb.get_related_rowid(this));}}}
7      ]
8 });

全表編輯,單選,必須選擇一行,分頁。

我們先初始化一個數據,tbl.js綁定的數據必須是陣列

我期望第二列在任何情況都不能被編輯。


 1 var tb_data = [];
 2 for (var i = 0; i < 106; i++) {
 3      tb_data[i] = [Math.random()>0.5?true:false, Math.random(), "1970-01-01", Math.floor(Math.random()*10), i, 0];
 4 }
 5 tb_data[i] = "this is group"; i++;
 6 tb_data[i] = ["this is text"]; i++;
 7 for (; i < 578; i++) {
 8      tb_data[i] = [i, Math.random(), "2017-02-01"];
 9 }
10 var tb = new tbl(document.body.children[0], {
11      editable:true,select:tbl.single,must_select:true,paging:true,data:tb_data,page_size:15,
12      format: [
13          { width: "5%", input: { type: "checkbox", check: "true" } },
14          { width: "30%", name:"name", uneditable:true },
15          { width: "20%", name:"date", input: { type: "date" } },
16          { width: "10%", name:"select", input: {type:"select", options:[0,1,2,3,4,5,6,7,8,9]} },
17          { width: "20%" },
18          { width: "15%", input: {type:"radio", name:"only"}}
19      ]
20 });

API:

add 末尾添加,添加一行資料必須是數組,非數組會作為組標題文字。

insert 插入資料

bind 綁定新資料來源

delete 刪除一行

clear 清理

edit 編輯一行,空白參數表示編輯整表

select 選擇一行

cancel_edit 取消編輯

cancel_select 取消選擇

select_change 選擇改變函數設定

只讀#屬性

tbl::selects 已經選擇的行

#tbl::data 資料

tbl::dom DOM節點

tbl::edits 正在編輯的行,全表編輯不適用

」建構選項:

max_height 最大高度,超過將顯示捲軸列
page_size 頁尺寸
data 初始化資料
header 是否顯示表頭
footer 是否顯示頁尾
info 是否顯示資訊
paging 是否顯示分頁
title_bar 顯示標題條
title 標題條文字
search 顯示搜尋方塊
editable  全表編輯
select 選擇的類型:0, 無法選擇. 1, 單選. 2, 多選.tbl.single == 1, tbl.multiselect == 2
select_change 設定選擇事件處理函數
must_select  必須選擇一行
format  列格式
width 寬度,可以是有效的html寬度。例如:100px or 20%.
     input 用於編輯狀態的input節點屬性,與html/input屬性相同
     name 字段名稱,顯示在表格頭
      編輯
     editable 列將隨時編輯狀態
     nancenter  非數位置中

以上是tbl.js div實現的表格控制,完全免費,不依賴jquery的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn