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:<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
tbl.js div实现的表格控件,完全免费,不依赖jquery的更多相关文章
- tbl.js div实现的表格控件,完全免费,no jquery
html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚 ...
- ExtJS4.2学习(九)属性表格控件PropertyGrid（转）
鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-15/178.html ------------- ...
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...
- 如何在web中实现类似excel的表格控件
Execl功能非常强大,内置的很多函数或公式可以大大提高对数据的加工处理能力.那么在web中有没有类似的控件呢?经过一番搜寻,发现handsontable具备了基本的excel功能支持公式,同时能对数 ...
- 深入浅出ExtJS 第三章 表格控件
3.1 表格的特性简介 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能; >.表格由类Ext.grid.GridPanel定义,继承自 ...
- ExtJS4.2学习(10)分组表格控件--GroupingGrid（转）
鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html ------------- ...
- Ext入门学习系列（五）表格控件（1）
上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...
- 支持Angular 2的表格控件
前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱.当然这其中也包括我. ...
- SNF快速开发平台MVC-各种级联绑定方式，演示样例程序（包含表单和表格控件）
做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...
随机推荐
- [iOS]C语言技术视频-02-程序分支结构(if...else)
下载地址: 链接: http://pan.baidu.com/s/1dREc2 密码: egbt
- 使用eclipse和maven一步一步配置web项目
http://www.blogjava.net/kevonz/archive/2012/07/08/382542.html
- iOS多页面传值方式之单例传值singleton
// 要实现单例传值,那就必须得新建一个类做为单例 提供创建该类对象的类方法(因为是要在alloc开辟内存空间后赋值).所有在.h文件中声明该方法 + (instancetype)defaultUII ...
- (简单) POJ 3268 Silver Cow Party，Dijkstra。
Description One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to atten ...
- [iOS Animation]-CALayer 图层几何学
图层几何学 不熟悉几何学的人就不要来这里了 --柏拉图学院入口的签名 在第二章里面,我们介绍了图层背后的图片,和一些控制图层坐标和旋转的属性.在这一章中,我们将要看一看图层内部是如何根据父图层和兄弟图 ...
- mysql trouble shooting---- 从库停止同步lock_wait_timeout_exceeded_try_restarting_transaction
问题描述: 数据库从库停止同步. 问题分析: show slave status\G;(也可使用show full processlist) 显示 某个update语句出错,Lock wait tim ...
- spring中依赖注入与aop讲解
一.依赖注入 这个属于IOC依赖注入,也叫控制反转,IOC是说类的实例由容器产生,而不是我们用new的方式创建实例,控制端发生了改变所以叫控制反转. 1 2 3 4 5 6 7 8 9 10 11 1 ...
- Mac下安装包管理平台Homebrew（Mac 10.12）
在终端上输入: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/maste ...
- css（一）-- 概述以及引入方式
概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...
- 为什么jQuery要返回jQuery.fn.init对象
作者:zccst jQuery = function( selector, context ) { // The jQuery object is actually just the init con ...