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

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

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

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

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

版本：0.1beta

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

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

示例代码1：（从DOM节点构建）

html:<html><body><div></div></body></html>
new tbl(document.body.children[0],{data:[["row1"],["row2"]]});

示例代码2：（自创建DOM节点）

var tb = new tbl();
with (document.body) { insertBefore(tb.dom, firstChild) };
tb.bind([["row1"],["row2"]]);

示例代码3：（多字段）

var tb = new tbl(undefined, {format:[{width:"20%"},{width:"20%"},{width:"20%"},{width:"20%"},{width:"20%"}]});
with (document.body) { insertBefore(tb.dom, firstChild) };
tb.bind([["row1","data","data","data","data"],["row2","data","data","data","data"]]);

示例代码4：（列表样式，最大高度300px，无头部，无标题，无页脚，5条数据，按钮，获取行索引）

html:<html><body><div></div></body></html>
var tb = new tbl(document.body.children[0], {
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,
format: [
     { width: "90%", nancenter: true, input: {type:"text"}},
     { width: "10%", editable:true, input: { type: "button", value:"del", onclick: function () { tb.delete(tb.get_related_rowid(this));}}}
     ]
});

示例代码5：（全表编辑，单选，必须选择一行，分页）

var tb_data = [];
for (var i = 0; i < 106; i++) {
     tb_data[i] = [Math.random()>0.5?true:false, Math.random(), "1970-01-01", Math.floor(Math.random()*10), i, 0];
}
tb_data[i] = "this is group"; i++;
tb_data[i] = ["this is text"]; i++;
for (; i < 578; i++) {
     tb_data[i] = [i, Math.random(), "2017-02-01"];
}
var tb = new tbl(document.body.children[0], {
     editable:true,select:tbl.single,must_select:true,paging:true,data:tb_data,page_size:15,
     format: [
         { width: "5%", input: { type: "checkbox", check: "true" } },
         { width: "30%", name:"name", uneditable:true },
         { width: "20%", name:"date", input: { type: "date" } },
         { width: "10%", name:"select", input: {type:"select", options:[0,1,2,3,4,5,6,7,8,9]} },
         { width: "20%" },
         { width: "15%", input: {type:"radio", name:"only"}}
     ]
});

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实现的表格控件,完全免费,no jquery的更多相关文章

  1. tbl.js div实现的表格控件,完全免费,不依赖jquery

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

  2. ExtJS4.2学习(九)属性表格控件PropertyGrid（转）

    鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-15/178.html ------------- ...

  3. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  4. 如何在web中实现类似excel的表格控件

    Execl功能非常强大,内置的很多函数或公式可以大大提高对数据的加工处理能力.那么在web中有没有类似的控件呢?经过一番搜寻,发现handsontable具备了基本的excel功能支持公式,同时能对数 ...

  5. 深入浅出ExtJS 第三章 表格控件

    3.1 表格的特性简介 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能; >.表格由类Ext.grid.GridPanel定义,继承自 ...

  6. ExtJS4.2学习(10)分组表格控件--GroupingGrid（转）

    鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html ------------- ...

  7. Ext入门学习系列（五）表格控件（1）

    上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...

  8. 支持Angular 2的表格控件

    前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱.当然这其中也包括我. ...

  9. SNF快速开发平台MVC-各种级联绑定方式，演示样例程序（包含表单和表格控件）

    做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...

随机推荐

  1. 说说Android应用的persistent属性

    转载地址:http://my.oschina.net/youranhongcha/blog 摘要 在Android系统中,有一种永久性应用.它们对应的AndroidManifest.xml文件里,会将 ...

  2. 1、下载LInux版的tomcat6

    1.下载LInux版的tomcat6 http://mirror.bit.edu.cn/apache/tomcat/tomcat-6/v6.0.37/bin/apache-tomcat-6.0.37. ...

  3. jquery中如何以逗号分割字符串_百度知道

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. 编码器芯片MLX90363的使用

    文档资料 MLX90363 Datasheet MLX90363 Application Note 使用 对于编码器来说,Rotary Application模式 SPI驱动中,CS必须在8个字节都发 ...

  5. Bar Chart of Frequency of modals in different sections of the Brown Corpus

    Natural Language Processing with Python Chapter 4.8 colors = 'rgbcmyk' # red, green, blue, cyan, mag ...

  6. MySQL 5.5.x配置文件详解

    MySQL 5.5.x my.cnf参数配置优化详解 一直有耳闻MySQL5.5的性能非常NB,所以近期打算测试一下,方便的时候就把bbs.kaoyan.com升级到这个版本的数据库.今天正好看到一篇 ...

  7. Android如何监听蓝牙耳机的按键事件(转)

    源: Android如何监听蓝牙耳机的按键事件 写在前面: 直接想要代码很简单,你直接把滚动条拉到最底端就可以看到.如果想要十分地了解为什么,那就按照我规划的一步一步来理解.以下测试环境以手头上有的「 ...

  8. Eclipse 的 git 插件操作 "代码提交"以及"代码冲突"

    面向对象:曾经使用过SVN的同学. (因为Git 它 可以说是双重的SVN (本地一个服务器,远程一个服务器)),提交代码要有两次步骤,先提交到本地服务器,再把本地服务器在提交到远程服务器. 所以连S ...

  9. android Makefile把jar包打到apk里

    这个是经常的需求,我就是经常忘,关键不理解啊. 反反复复的也看看了android makefile. 太复杂了. 慢慢来吧.哎.工作十年.啥也不会.咋整? ## Copyright (C) 2008 ...

  10. ucos任务控制块详解

    Ucos实现多任务的基础包括几个方面:任务控制块,任务堆栈,中断,任务优先级,一一说起 首先,任务控制块的结构如下 //系统在运行一个任务的时候,按照任务的优先级获取任务控制块,再在任务堆栈中获得任务 ...