AppendGridJquery动态表格插件
appendGrid是什么?
appendGrid是一个Jquery动态表格插件,提供像填写电子表格数据一样在页面去输入结构化数据. 它允许你在表格里增加/删除/插入/删除行. 控制input/select/textarea 提交数据到服务器端应用比如ASP.NET/PHP/JSP. 提供许多回调和操作方法.
主要功能
易于使用 | |
Jqeury插件支持 | |
Multiple build-in input types included HTML5 input types | |
自定义输入类型 | |
支持子表 | |
Compatible with major web browsers | |
Ready for internationalization |
$(function () { // Initialize appendGrid $('#tblAppendGrid').appendGrid({ caption: 'My CD Collections', initRows: 1, columns: [ { name: 'Album', display: 'Album', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '160px'} }, { name: 'Artist', display: 'Artist', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '100px'} }, { name: 'Year', display: 'Year', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '40px'} }, { 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: '50px', 'text-align': 'right' }, value: 0 }, { name: 'RecordId', type: 'hidden', value: 0 } ] }); // Handle `Load` button click $('#btnLoad').button().click(function () { $('#tblAppendGrid').appendGrid('load', [ { 'Album': 'Dearest', 'Artist': 'Theresa Fu', 'Year': '2009', 'Origin': 1, 'Poster': true, 'Price': 168.9, 'RecordId': 123 }, { 'Album': 'To be Free', 'Artist': 'Arashi', 'Year': '2010', 'Origin': 3, 'Poster': true, 'Price': 152.6, 'RecordId': 125 }, { 'Album': 'Count On Me', 'Artist': 'Show Luo', 'Year': '2012', 'Origin': 2, 'Poster': false, 'Price': 306.8, 'RecordId': 127 }, { 'Album': 'Wonder Party', 'Artist': 'Wonder Girls', 'Year': '2012', 'Origin': 4, 'Poster': true, 'Price': 108.6, 'RecordId': 129 }, { 'Album': 'Reflection', 'Artist': 'Kelly Chen', 'Year': '2013', 'Origin': 1, 'Poster': false, 'Price': 138.2, 'RecordId': 131 } ]); }); // Handle `Serialize` button click $('#btnSerialize').button().click(function () { alert('Here is the serialized data!!\n' + $(document.forms[0]).serialize()); }); });
评论
TiamatGridjQuery表格插件
TiamatGrid是一个jQuery表格插件,它是基于jqGridView插件开发的,尽管功能没它强,却比它快主要特性:*Eventsreturnarraywiththedataselected*M
TiamatGridjQuery表格插件
0
DataTablesjQuery表格插件
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点:自动分页处理即时表格数据过滤数据排序以及数据类型自
DataTablesjQuery表格插件
0
SheetrockjQuery 表格插件
Sheetrock是个jQuery插件,用来查询,检索和显示GoogleSpreadsheets的数据。用户可以使用它来加载整个表格;或者利用类似SQL的查询来处理GoogleSpreadsheets
SheetrockjQuery 表格插件
0
TocifyBootstrap 表格插件
Tocify是Bootstrap用来创建表格的插件。要求:jQuery1.7.2+jQueryUIWidgetFactory1.8.21+支持浏览器:IE7+,Firefox4+,Chrome,Saf
TocifyBootstrap 表格插件
0
DTablejQuery 表格插件
DTable是jQuery数据表格插件,允许用户高度自定义。它使用html模版来生成表格,整个插件是基于模块的,非常容易扩展。在线演示
DTablejQuery 表格插件
0
cGridjQuery 表格插件
cGrid是一个类似于ExtGird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,双表头,分页,表格编辑,字段统一修改等。cGrid显示的数据能够通过Ajax获取或者从一个普通的
cGridjQuery 表格插件
0