Jquery动态表格插件：AppendGrid
g6d7
9年前
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()); }); });