新的项目中需要使用类似appendGrid的控件,当然开始时是不知道这个控件的,开始是想做成如下这样

这其实是Bugfree的搜索栏,并且我也说不好我要做的这个东西应该叫什么,大体可以说是动态的添加或删除一组输入控件,我用的是MVC框架,因为水平有限,时间有限,所以首先想到的是jquery插件,网上搜了一下,因为不知道搜什么关键词更准确,所以我就一个一个的看,看了很多也没有合适的,后来在中国开源社区(http://www.oschina.net/p/appendgrid)中看到了这个插件,虽说和我开始想做的不一样,不过功能是一样的

都可以实现动态添加和删除输入框,具体可以访问这个插件的官网http://appendgrid.apphb.com/

试用了一下,前台还好说,怎么向后台传数据困扰了我好一会,最后还是采用了官网的Server-side Handling,同时结合了Stack Overflow上的这篇文章http://stackoverflow.com/questions/22376112/jquery-appendgrid-with-mvc4-controller,

前台的传参方式如下,就是用js的序列化,然后post方式提交form,后台就按照官网说的做就可以接收数据了

<script type="text/javascript">
$('#dialog_Save-button').button().click(function () {
var oData = $(document.forms[0]).serialize()
alert(oData);
$.ajax({
type: 'post',
url: "/configuration/NewFilter",
data: oData,
success: alert("Record UdpateSucessfully.")
});
});
</script>

  

如果您对我的文章感兴趣欢迎留言,如果有更好的解决方案欢迎指导

appendGrid的使用的更多相关文章

  1. appendGrid

    appendGrid appendGrid的使用

  2. jQuery动态表格插件 AppendGrid

    AppendGrid是一个jQuery动态表格插件,提供像填写电子表格数据一样在页面去输入结构化数据. 它允许用户在表格里增加/删除/插入/删除行,控制input/select/textarea 提交 ...

  3. 分享12款 JavaScript 表格控件(DataGrid)

    JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...

  4. 12款 JavaScript 表格控件(DataGrid)

    JavaScript 表格控件可以操作大数据集的 HTML表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以很 ...

  5. JavaScript表格插件库

    DataTables https://datatables.net/ Handsontable https://handsontable.com/ JsGrid http://js-grid.com/ ...

随机推荐

  1. HDU4530:小Q系列故事——大笨钟

    Problem Description 饱尝情感苦恼的小Q本打算隐居一段时间,但仅仅在3月25号一天没有出现,就有很多朋友想念他,所以,他今天决定再出来一次,正式和大家做个告别. 小Q近来睡眠情况很差 ...

  2. Lucene中string docvalues使用utf-16的优化

    原来的string docvalues使用utf-8编码,载入时转码花费大量时间,我们把转码实现从new String(bytes, "UTF-8")改用lucene的bytesR ...

  3. ubuntu 安装eclipse

    安装步骤: 一.下载客户端: 解压放到,/opt/Java/eclipse目录下,解压方法参考上一篇文章<ubuntu 配置Java jdk> 二.打开eclipse: 打开终端,输入,c ...

  4. HDU5327

    #include <iostream> #include <stdio.h> #include <cstring> using namespace std; int ...

  5. DEDECMS织梦列表页每隔N行文章添加一条分隔线

    这是给一个朋友做模板的时候,用到的一个小小的技巧,今天正好用上了,以前看到有人问过不知道解决没有,今天整理了一下,本想保存在自己的电脑里,后来一想,不如咱们一起共享一下,也是对织梦的感恩,有好东西就来 ...

  6. "javascript:void(0)"用法

    1.window.open(''url'') 2.用自定义函数 <script> function openWin(tag,obj) { obj.target="_blank&q ...

  7. PHP 关于文件操作的简单介绍

    文件操作一直是Web程序员头疼的地方,而文件操作在CMS这样的系统中又是必须的.如今,PHP文件操作的函数内容已经非常强大,文件这部分也是学习PHP非常重要的一部分,希望大家不要忽略.这篇文章会简单介 ...

  8. oracle死锁模拟

    环境介绍: 用户test01 创建表tab01,用户test02创建表tab02.Test01 更新tab01不提交,test02 更新表tab02不提交.然后test01 更新test02下的表ta ...

  9. iOS开发知识点:理解assign,copy,retain变strong

    一..h和.m文件的变化说明 1.对于.h头文件,主要是将属性定义由retain变为strong @property (retain, nonatomic) 变为 @property (strong, ...

  10. SQL Server附加数据库拒绝访问

    打开要附加的数据库文件所在的文件夹,即扩展名为mdf的文件所在的文件夹,如下图所示:   右键单击mdf文件,选择“属性”,如下图所示:   单击“安全”选项卡,如下图所示:   单击“编辑”按钮,如 ...