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状态时 ...

随机推荐

《mahout实战》
<mahout实战> 基本信息原书名:Mahout in action 作者: (美)Sean Owen Robin Anil Ted Dunning Ellen Fr ...
跟我学Spring3（9.1）：Spring的事务之数据库事务概述
原文出处: 张开涛 9.1 数据库事务概述事务首先是一系列操作组成的工作单元,该工作单元内的操作是不可分割的,即要么所有操作都做,要么所有操作都不做,这就是事务. 事务必需满足ACID(原子性.一致 ...
【BZOJ】【1968】【AHOI2005】COMMON 约数研究
数论原谅我这么傻逼的题都不会做…… 或许写成数学公式的形式比较容易想到解法? $$ans=\sum_{i=1}^n \sum_{d|i} 1$$ ……是不是感觉很水呀……是吧……改成先枚举d再枚举 ...
Objective-C:协议protocol
六.协议(protocol) 关键字:@optional.@required (1)是一个类共享的一个方法列表 (2)它声明了一系列的方法而不进行实现 (3)遵从某个协议,就是需要实现协议中的方法 ( ...
OpenCV学习(37) 人脸识别(2)
在前面一篇教程中,我们学习了OpenCV中基于特征脸的人脸识别的代码实现,我们通过代码 Ptr<FaceRecognizer> model = createEigenFaceR ...
[12] 扇形体(Fan)图形的生成算法
顶点数据的生成 bool YfBuildFunVertices ( Yreal radius, Yreal degree, Yreal height, Yuint slices, YeOriginPo ...
第六章字节码执行方式--解释执行和JIT
注:主要参考自<分布式java应用:基础与实践><深入理解Java虚拟机(第二版)> 1.两种执行方式: 解释执行(运行期解释字节码并执行) 强制使用该模式:-Xint 编译为 ...
第一章 Java工具类目录
在这一系列博客中,主要是记录在实际开发中会常用的一些Java工具类,方便后续开发中使用. 以下的目录会随着后边具体工具类的添加而改变. 浮点数精确计算第二章 Java浮点数精确计算 crc32将任意 ...
Longest Valid Parentheses leetcode java
题目: Given a string containing just the characters '(' and ')', find the length of the longest valid ...
mobile移动网页开发常用代码模板
index.html <!DOCTYPE HTML> <html> <head>  <meta http-equ ...

jQuery动态表格插件 AppendGrid

jQuery动态表格插件 AppendGrid的更多相关文章

随机推荐

热门专题