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 字段名称,显示在表头
uneditable 列将不能被编辑
editable 列将总是编辑状态
nancenter 非数字居中
Atas ialah kandungan terperinci tbl.js div实现的表格控件,完全免费,不依赖jquery . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!