tbl.js div实现的表格控件,完全免费,no jquery-白红宇

tbl.js div实现的表格控件,完全免费,no jquery

阅读量：5260 次

发布时间：2019-06-14

本文共 3143 字，大约阅读时间需要 10 分钟。

html上现在有比较好用的表格控件是datatable，但是编辑、按钮等部分是收费的，只有基础功能免费。而且尺寸发生变化时需要手工刷新等繁琐操作较多。所以我开发一个免费的供大家使用。

本项目已用于“虚空服务器开发套件”。目前主要支持微软Edge浏览器，Chrome浏览器，其它未测。

tbl.js完全免费，可随意修改，欢迎fork。

tbl.js支持列表样式，增删改查，全表搜索，分组，分页功能，全表编辑，全行编辑，单选，多选，样式定制。

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

版本：0.1beta

提出bug，我会尽快修改。新年不休息。

如果不需要修改样式，可以不加载tbl.css，tbl.js会动态加载样式表。

我们来创建两行表格，从现有的DOM节点构建。

1 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:
     
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 选择改变函数设置

只读属性：