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. C#代码发送邮件

    本次测试的邮箱为163邮箱 1.首相对邮箱进行一些设置(详见下图):打开设置选取客户端授权密码项,开启设置:以后在客户端登录时将使用刚刚设置的密码! 2.上干货 public static void ...

  2. MySql绿色版安装过程记录

    作为程序猿,要多动手,周末趁着有空且笔记本刚刚装了系统,所以就配置了下绿色版的MySQL. 多动手,多动手,多动手. 多总结,多总结,多总结. 以下为正文: 一.下载MySQL绿色版: 1.这个地址: ...

  3. Win8/8.1 下映像管理和恢复环境的配置

    以前遇过不少次这种问题了,抽空记下来...... 介绍两个东西: 1. dism 部署映像服务和管理工具 主要用途是枚举.安装.卸载.配置和更新 Windows 映像中的功能和程序包. 简单地说就是有 ...

  4. hibernate---一对一单向主键关联(不重要)

    比如, husband的id参考wife的id husband.java: package com.bjsxt.hibernate; import javax.persistence.Entity; ...

  5. C# 开发系列(三)

    参考:http://stackoverflow.com/questions/11248935/passing-values-to-a-put-json-request-in-c-sharp 发送htt ...

  6. [iOS Animation]-CALayer 显示动画

    显式动画 如果想让事情变得顺利,只有靠自己 -- 夏尔·纪尧姆 上一章介绍了隐式动画的概念.隐式动画是在iOS平台创建动态用户界面的一种直接方式,也是UIKit动画机制的基础,不过它并不能涵盖所有的动 ...

  7. iOS开发 改变UINavigationController的UINavigationBar的高度和背景图片

    1.改变高度 自定义UINavigationBar的新类别: //UINavigationBar+BackgoundImage.h #import <Foundation/Foundation. ...

  8. 乘方快速幂 OR 乘法快速幂

    关于快速幂这个算法,已经不想多说,很早也就会了这个算法,但是原来一直靠着模板云里雾里的,最近重新学习,发现忽视了一个重要的问题,就是若取模的数大于int型,即若为__int64的时候应该怎么办,这样就 ...

  9. HCSR04超声波传感器驱动

    HC_SR04是一款使用较为广泛的超声波测距模块,模块图如下 该模块具有四个引脚,分别为VCC GND TRIG ECHO,其中VCC GND为供电脚 TRIG为测距触发引脚,ECHO为测距输入引脚 ...

  10. easyui-01 怎么样使用easyui

    console.info();在控制台打印. 1.引入 <script type="text/javascript" src="../../jquery-easyu ...