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

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

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

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

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

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

版本：0.1beta

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

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

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

1 html:<p></p>
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:<p></p>
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 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 <p><a href="http://www.php.cn/js/js-weixinapp-api.html" target="_blank">API</a>:</p><p>add 末尾添加，添加一行資料必須是數組，非數組會作為組標題文字。 </p><p>insert <a href="http://www.php.cn/code/5336.html" target="_blank">插入資料</a></p><p>bind 綁定新資料來源</p><p>delete <a href="http://www.php.cn/php/php-tp-remove.html" target="_blank">刪除</a>一行</p><p><a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a> 清理</p><p>edit 編輯一行，空白參數表示編輯整表</p><p>select 選擇一行</p><p>cancel_edit 取消編輯</p><p>cancel_select 取消選擇</p><p>select_change 選擇改變<a href="http://www.php.cn/wiki/145.html" target="_blank">函數</a>設定</p><p>只讀<a href="http://www.php.cn/wiki/169.html" target="_blank">#屬性</a>：</p><p>tbl::selects 已經選擇的行</p><p>#tbl::data 資料</p><p>tbl::dom DOM節點</p><p>tbl::edits 正在編輯的行，全表編輯不適用</p><p>」建構選項：</p><p>max_height 最大高度，超過將顯示捲軸列<br> page_size 頁尺寸<br> data 初始化資料<br> header 是否顯示表頭<br> footer 是否顯示頁尾<br> info 是否顯示資訊<br> paging 是否顯示分頁<br> title_bar 顯示標題條<br> title 標題條文字<br> search 顯示搜尋方塊<br> editable  全表編輯<br> select 選擇的類型:0, 無法選擇. 1, 單選. 2, 多選.tbl.single == 1, tbl.multiselect == 2<br> select_change 設定選擇<a href="http://www.php.cn/code/5690.html" target="_blank">事件處理</a>函數<br> must_select  必須選擇一行<br> format  列格式<br> width 寬度，可以是有效的html寬度。例如：100px or 20%.<br>     input 用於編輯<a href="http://www.php.cn/code/8243.html" target="_blank">狀態</a>的input節點屬性，與html/input屬性相同<br>     name 字段名稱，顯示在表格頭<br>      編輯<br>     editable 列將隨時編輯狀態<br>     nancenter  非數位置中</p>

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