新的项目中需要使用类似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. spring mvc使用ClassPathXmlApplicationContext或FileSystemXmlApplicationContext和XmlWebApplicationContext类的操作其中 XmlWebApplicationContext是专为Web工程定制的。

    一.简单的用ApplicationContext做测试的话,获得Spring中定义的Bean实例(对象).可以用: ApplicationContext ac = new ClassPathXmlAp ...

  2. MyBatis报错

    1.错误描写叙述 2014-11-2 15:03:11 org.apache.catalina.core.StandardEngine start 信息: Starting Servlet Engin ...

  3. LVS图解 ---阿里

    LVS在大规模网络环境中的应用   1. SLB总体架构   LVS本身是开源的,我们对它进行了多方面的改进,并且也已开源-https://github.com/alibaba/LVS.     接下 ...

  4. Android(java)学习笔记216:多线程断点下载的原理(Android实现)

    之前在Android(java)学习笔记215中,我们从JavaSE的角度去实现了多线程断点下载,下面从Android角度实现这个断点下载: 1.新建一个Android工程: (1)其中我们先实现布局 ...

  5. vsftp配置主动模式和被动模式

    配置文件:/etc/vsftpd/vsftpd.conf 主动模式配置方法: 主动式连接使用的数据通道 connect_from_port_20=YES 支持数据流的被动式连接模式 pasv_enab ...

  6. Have trouble in your life

    当你烦恼的时候不知道如何是好时,你可以下载此程序,可以帮助你化解烦恼! 下载地址: http://pan.baidu.com/s/1i3FtxHF

  7. AmazeUI 模态框封装

    /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div class="am-modal am-modal-alert" tabin ...

  8. Electron

    跨平台桌面app开发 Appjs hex nwjs electron 官网:http://electron.atom.io/ 中文文档:https://github.com/atom/electron ...

  9. JAVA中的finalize()方法

    [转]JAVA中的finalize()方法 今天早上看Thinking in java的[第四章 初始化和清除].[  清除:终结和垃圾回收]的时候, 看到了这个东西. 用于清理滴... 当然,这个方 ...

  10. MVC使用Exception过滤器自定义处理Action的的异常

    1.继承FilterAttribute ,IExceptionFilter自定义处理 /// <summary> /// 登录错误自定义处理 /// </summary> pu ...