html上現在有比較好用的表格控制項是datatable，但是編輯、按鈕等部分是收費的，只有基礎功能免費。而且尺寸發生變化時需要手工刷新等繁瑣操作較多。所以我開發一個免費的供大家使用。 本項目已用於“虛空伺服器開發套件”。目前主要支持微軟Edge瀏覽器，Chrome瀏覽器，其它未測。 tbl.js完全 ...
html上現在有比較好用的表格控制項是datatable，但是編輯、按鈕等部分是收費的，只有基礎功能免費。而且尺寸發生變化時需要手工刷新等繁瑣操作較多。所以我開發一個免費的供大家使用。
本項目已用於“虛空伺服器開發套件”。目前主要支持微軟Edge瀏覽器，Chrome瀏覽器，其它未測。
tbl.js完全免費，可隨意修改，歡迎fork。
tbl.js支持列表樣式，增刪改查，全表搜索，分組，分頁功能，全表編輯，全行編輯，單選，多選，樣式定製。
可以嵌入到各種容器中，比如jquery的dialog，tabs中。
版本：0.1beta
提出bug，我會儘快修改。新年不休息。
如果不需要修改樣式，可以不載入tbl.css，tbl.js會動態載入樣式表。
我們來創建兩行表格，從現有的DOM節點構建。
1 html:<html><body><div></div></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><div></div></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 欄位名稱，顯示在表頭
uneditable 列將不能被編輯
editable 列將總是編輯狀態
nancenter 非數字居中
項目/源碼：
github：https://github.com/FettLuo/tbl.js
