jQuery动态表格插件 AppendGrid
AppendGrid是一个jQuery动态表格插件，提供像填写电子表格数据一样在页面去输入结构化数据。 它允许用户在表格里增加/删除/插入/删除行，控制input/select/textarea 提交数据到服务器端应用比如ASP.NET/PHP/JSP，还提供许多回调和操作方法.
效果图如下：
实现步骤有：
一、引入相关插件：
主要是红体字这两个。
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.18.0.css" />
<link href="css/jquery.appendGrid-development.css" rel="stylesheet" /> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/qunit/qunit-1.18.0.js"></script>
<script type="text/javascript" src="js/jquery.appendGrid-development.js"></script>
二、初始化表格参数
var gColumns = [
{ name: 'ID', type: 'hidden' },
{ name: 'Album', display: 'Album', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '160px' } },
{ name: 'Artist', display: 'Artist', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '120px' } },
{ name: 'Year', display: 'Year', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '50px' } },
{ name: 'Origin', display: 'Origin', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Hong Kong', 2: 'Taiwan', 3: 'Japan', 4: 'Korea', 5: 'US', 6: 'Others' } },
{ name: 'Poster', display: 'With Poster?', type: 'checkbox' },
{ name: 'Price', display: 'Price', type: 'text', ctrlAttr: { maxlength: 10 }, ctrlCss: { width: '60px', 'text-align': 'right' }, value: 0 },
], gData = [
{ 'ID': 1, 'Album': 'Dearest', 'Artist': 'Theresa Fu', 'Year': '2009', 'Origin': 1, 'Poster': true, 'Price': 168.9 },
{ 'ID': 2, 'Album': 'To be Free', 'Artist': 'Arashi', 'Year': '2010', 'Origin': 3, 'Poster': true, 'Price': 152.6 },
{ 'ID': 3, 'Album': 'Count On Me', 'Artist': 'Show Luo', 'Year': '2012', 'Origin': 2, 'Poster': false, 'Price': 306.8 },
{ 'ID': 4, 'Album': 'Wonder Party', 'Artist': 'Wonder Girls', 'Year': '2012', 'Origin': 4, 'Poster': true, 'Price': 108.6 },
{ 'ID': 5, 'Album': 'Reflection', 'Artist': 'Kelly Chen', 'Year': '2013', 'Origin': 1, 'Poster': false, 'Price': 138.2 }
三、对表格ｉｄ进行操作
var $grid = $('#tblAppendGrid'); ／／此为写在JS代码上的。
四、创建一个调用表格
<body>
<table id="tblAppendGrid"></table>
</body>
五、完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>appendGrid Test Basic 01</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.18.0.css" />
<link href="css/jquery.appendGrid-development.css" rel="stylesheet" /> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/qunit/qunit-1.18.0.js"></script>
<script type="text/javascript" src="js/jquery.appendGrid-development.js"></script>
<script type="text/javascript">
// Prepare common variables
var gColumns = [
{ name: 'ID', type: 'hidden' },
{ name: 'Album', display: 'Album', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '160px' } },
{ name: 'Artist', display: 'Artist', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '120px' } },
{ name: 'Year', display: 'Year', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '50px' } },
{ name: 'Origin', display: 'Origin', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Hong Kong', 2: 'Taiwan', 3: 'Japan', 4: 'Korea', 5: 'US', 6: 'Others' } },
{ name: 'Poster', display: 'With Poster?', type: 'checkbox' },
{ name: 'Price', display: 'Price', type: 'text', ctrlAttr: { maxlength: 10 }, ctrlCss: { width: '60px', 'text-align': 'right' }, value: 0 },
], gData = [
{ 'ID': 1, 'Album': 'Dearest', 'Artist': 'Theresa Fu', 'Year': '2009', 'Origin': 1, 'Poster': true, 'Price': 168.9 },
{ 'ID': 2, 'Album': 'To be Free', 'Artist': 'Arashi', 'Year': '2010', 'Origin': 3, 'Poster': true, 'Price': 152.6 },
{ 'ID': 3, 'Album': 'Count On Me', 'Artist': 'Show Luo', 'Year': '2012', 'Origin': 2, 'Poster': false, 'Price': 306.8 },
{ 'ID': 4, 'Album': 'Wonder Party', 'Artist': 'Wonder Girls', 'Year': '2012', 'Origin': 4, 'Poster': true, 'Price': 108.6 },
{ 'ID': 5, 'Album': 'Reflection', 'Artist': 'Kelly Chen', 'Year': '2013', 'Origin': 1, 'Poster': false, 'Price': 138.2 }
], gI18n = {
append: '!append!',
removeLast: '!removeLast!',
insert: '!insert!',
remove: '!remove!',
moveUp: '!moveUp!',
moveDown: '!moveDown!',
rowDrag: '!rowDrag!',
rowEmpty: '!rowEmpty!'
}, gButtonClasses = {
append: 'ap-pend',
removeLast: 'remove-Last',
insert: 'in-sert',
remove: 're-move',
moveUp: 'move-Up',
moveDown: 'move-Down',
rowDrag: 'row-Drag'
}, gSectionClasses = {
caption: 'cap-tion',
header: 'head-er',
body: 'bo-dy',
footer: 'foot-er'
};
// Start the test
QUnit.test('appendGrid.basic01', function (assert) {
// Declare variables for testing
var eValid = false, eValues, eInitRows = 2, eDataLoaded = false, eCaption = 'My CD Collections', eIdPrefix = 'hello';
// Check isReady
var $grid = $('#tblAppendGrid');
assert.notOk($grid.appendGrid('isReady'), 'Method: isReady=false');
// Create the grid
$grid.appendGrid({
caption: eCaption,
captionTooltip: eCaption,
columns: gColumns,
initRows: eInitRows,
idPrefix: eIdPrefix,
i18n: gI18n,
buttonClasses: gButtonClasses,
sectionClasses: gSectionClasses,
dataLoaded: function () {
eDataLoaded = true;
}
});
assert.ok($grid.appendGrid('isReady'), 'Method: isReady=true');
assert.equal($grid.appendGrid('getRowCount'), eInitRows, 'Option: initRows');
// Check grid layout
assert.equal($('thead td.caption', $grid).text(), eCaption, 'Caption text.');
// Check idPrefix
assert.ok(null != document.getElementById(eIdPrefix + '_rowOrder'), 'Option: idPrefix');
// Load data
assert.notOk($grid.appendGrid('isDataLoaded'), 'Method: isDataLoaded=false');
$grid.appendGrid('load', gData);
assert.ok($grid.appendGrid('isDataLoaded'), 'Method: isDataLoaded=true');
assert.equal($grid.appendGrid('getRowCount'), gData.length, 'Loading data.');
assert.ok(eDataLoaded, 'Load data event.');
// Check i18n
assert.equal($grid.find('tfoot button.append').attr('title'), gI18n.append, 'Option: i18n.append');
assert.equal($grid.find('tfoot button.removeLast').attr('title'), gI18n.removeLast, 'Option: i18n.removeLast');
assert.equal($grid.find('tbody tr td.last button.insert')[0].title, gI18n.insert, 'Option: i18n.insert');
assert.equal($grid.find('tbody tr td.last button.remove')[0].title, gI18n.remove, 'Option: i18n.remove');
assert.equal($grid.find('tbody tr td.last button.moveUp')[0].title, gI18n.moveUp, 'Option: i18n.moveUp');
assert.equal($grid.find('tbody tr td.last button.moveDown')[0].title, gI18n.moveDown, 'Option: i18n.moveDown');
// Check button classes
assert.ok($grid.find('tfoot button.append').hasClass(gButtonClasses.append), 'Option: buttonClasses.append');
assert.ok($grid.find('tfoot button.removeLast').hasClass(gButtonClasses.removeLast), 'Option: buttonClasses.removeLast');
assert.ok($grid.find('tbody tr td.last button.insert').hasClass(gButtonClasses.insert), 'Option: buttonClasses.insert');
assert.ok($grid.find('tbody tr td.last button.remove').hasClass(gButtonClasses.remove), 'Option: buttonClasses.remove');
assert.ok($grid.find('tbody tr td.last button.moveUp').hasClass(gButtonClasses.moveUp), 'Option: buttonClasses.moveUp');
assert.ok($grid.find('tbody tr td.last button.moveDown').hasClass(gButtonClasses.moveDown), 'Option: buttonClasses.moveDown');
// Check section classes
assert.ok($grid.find('thead td.caption').parent().hasClass(gSectionClasses.caption), 'Option: sectionClasses.caption');
assert.ok($grid.find('thead td.first').parent().hasClass(gSectionClasses.header), 'Option: sectionClasses.header');
assert.ok($grid.find('tbody tr:first').hasClass(gSectionClasses.body), 'Option: sectionClasses.body');
assert.ok($grid.find('tfoot tr:first').hasClass(gSectionClasses.footer), 'Option: sectionClasses.footer');
// Check row data
assert.equal($grid.appendGrid('getCtrlValue', 'Artist', 1), gData[1].Artist, 'Method: getCtrlValue 1');
assert.equal($grid.appendGrid('getCtrlValue', 'Origin', 2), gData[2].Origin, 'Method: getCtrlValue 2');
// Check whole row data
eValid = true;
eValues = $grid.appendGrid('getRowValue', 3);
for (var c = 0; c < gColumns.length; c++) {
var colName = gColumns[c].name;
if (eValues[colName] != gData[3][colName]) {
eValid = false;
break;
}
}
assert.ok(eValid, 'Method: getRowValue');
// Insert 1 row before 3th row (index = 2)
$grid.appendGrid('insertRow', 1, 2);
eValues = $grid.appendGrid('getRowOrder');
assert.deepEqual(eValues, [1, 2, 6, 3, 4, 5], 'Method: insertRow');
// Remove 4th row (index = 3)
$grid.appendGrid('removeRow', 3);
eValues = $grid.appendGrid('getRowOrder');
assert.deepEqual(eValues, [1, 2, 6, 4, 5], 'Method: removeRow');
});
</script>
</head>
<body> <table id="tblAppendGrid"></table> </body>
</html>
所需资源详见 github ：https://github.com/shenxiaolinZERO/jquery.appendGrid.git
jQuery动态表格插件 AppendGrid的更多相关文章
- 001_ jQuery的表格插件dataTable详解
一. 1.启用id为"datatable1"标签的html的表格jQuery库 $("#datatable1").dataTable( ) Reference: ...
- jquery DataTables表格插件的使用(网页数据表格化及分页显示)
DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤. 多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据. 那么在Bootstrap下如何使用Data ...
- jQuery dataTable 表格插件的后台分页与界面展示
效果: html部分: {include file="Public:inner_header" /} <nav class="breadcrumb"> ...
- JQuery动态表格
功能实现:点击添加按钮,表格增加一行并给其name属性赋予的值,方便获取 点击删除,自动删除这一行 JQuery中定义一个count变量 var count = 1; function add() { ...
- jQuery Datatable 表格插件
Datatable 总体来说很好用,可以实现即时搜索和排序.但是只能用于数据量较少的情况下,如果数据量超过1K建议还是用表格加翻页,不然会很慢. datatable 中文网 http://datat ...
- jquery动态表格，动态添加表格行
转载收藏于:https://www.cnblogs.com/zhangqs008/archive/2013/05/09/3618459.html 效果图: Html:<html> &l ...
- 黄聪：jquery.bootgrid表格插件有的属性（visibleInSelection、cssClass、headerCssClass、headerAlign）不能识别的解决办法
主要是属性大小写问题,修改jquery.bootgrid.js文件,在function loadColumns()方法里面添加下面的语句就好了 data.headerAlign = data.head ...
- jquery开发表格插件项目之知识点累积 二
$.addClass() 增加样式 $.removeClass() 去除样式 $.toggleClass() 单击增加样式,再单击取消样式 $.hasClass() 判断是否存在样式,存在返回true ...
- jquery开发表格插件项目之知识点累积
js设置节点的属性与属性值用setAttribute(),获取节点的属性和属性值用getAttribute(). jquery 中使用attr 就可以获取及设置元素属性. 在设置checkbox状态时 ...
随机推荐
- matlab 文件遍历
function MyGetFiles(F)path=F;filelist=dir(fullfile(path,'*.JPG'));n=length(filelist);for i=1:n f=str ...
- vld,Bounds Checker,memwatch,mtrace,valgrind,debug_new几种内存泄露检测工具的比较,Valgrind Cheatsheet
概述 内存泄漏(memory leak)指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况,在大型的.复杂的应用程序中,内存泄漏是常见的问题.当以前分配的一片内存不再需要使用或无法访问时,但是却 ...
- 【BZOJ】【1251】序列终结者
Splay 还是splay序列维护,这题我WA了的原因是:在Push_up的时候,当前子树的max我是直接取的L.R和v[x]的最大值,但是如果没有左/右儿子,默认是会访问0号结点的mx值,而这个值没 ...
- 数据库实例: STOREBOOK > 表空间 > 编辑 表空间: UNDOTBS1
ylbtech-Oracle:数据库实例: STOREBOOK > 表空间 > 编辑 表空间: UNDOTBS1 表空间 > 编辑 表空间: UNDOTBS1 1. 一般 ...
- 游戏:贪吃虫（GreedyMaggot）
该游戏类似于贪吃蛇,但可以在二维平面上以任意方向前进.当吃到食物手,食物会从虫头向虫尾移动,移到虫尾后,贪吃虫长度会增加.本来给它取名为贪吃蛆的,并且工程的英文名Maggot就是蛆的意思,后来想想有点 ...
- Android Studio体验(一)--Window版本安装
如果说之前看见有人用Android Studio你还是不屑一顾的话,那么现在该改变态度了,正如我一样,之前一直习惯于Android内置ADT插件的捆绑Ecliple,现在Android Studio发 ...
- C#代码审查工具 StyleCop
SourceAnalysis (StyleCop)的终极目标是让所有人都能写出优雅和一致的代码,因此这些代码具有很高的可读性. SourceAnalysis (StyleCop)不是代码格式化(代码美 ...
- 转】未指定 INSTANCESHAREDWOWDIR 命令行值。如果指定INSTANCESHAREDDIR 值，则必须指定该值 .
插入光盘后不要用autorun的安装,使用命令行安装!cd进安装光盘的根目录,输入命令:setup.exe /INSTALLSHAREDDIR="D://Program Files//Mic ...
- Android ProgressBar具体解释以及自己定义
版本号:1.0 日期:2014.5.16 版权:© 2014 kince 转载注明出处 这一次主要说一下Android下的进度条.为什么是它呢,由于最近被其各种美轮美奂的设计所倾倒,计划逐渐 ...
- hdu1874 畅通project续(求最短路径)
畅通project续 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...