新的项目中需要使用类似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. Appium服务器端从启动到case完成的活动分析

    此文的目的主要是通过分析Appium Server打印出来的log,加深对Appium Server所扮演角色的理解. 这整一个过程是由一个Test Case开始执行到结束,测试的对象是SDK自带的N ...

  2. Android 解屏幕锁与点亮屏幕(来电时效果)

    PowerManager pm=(PowerManager) getSystemService(Context.POWER_SERVICE); //获取电源管理器对象 PowerManager.Wak ...

  3. java.util.jar.JarFile cause native heap memory leak

    最近项目中使用了JarFile 这个类 来load jar包中的 configuration,大致的情况如下 public void processJarEntries(JarFile paramJa ...

  4. npm scripts 助力前端开发,实时刷新浏览器

    用browser-sync或者lite-server来监控文件的改变,当文件改变时,就自动刷新浏览器. 用node-sass来实时编译scss文件. 用parallelshell来异步执行npm sc ...

  5. canvas sprite动画 简单封装

    function SpritCtx(img, size, pos, turnTime, totalCount, ctx) { size = size || {}; pos = pos || {}; / ...

  6. protocol buffer VS 2013编译出错

    protocol buffer 在VS2013编译会出现以下错误. 解决办法 把宏加上, 问题解决. 注: 该错误只出现在Debug版本.

  7. vim 支持gb2312

    vi  /etc/vimrc 中添加如下,并保存. set termencoding=encodingset fileencodings=utf-8,gbk,ucs-bom,cp936set shif ...

  8. 基于VC的串行通信技术应用实例

    在工业控制中,串口是常用的计算机与外部串行设备之间的数据传输通道,由于串行通信方便易行,所以应用广泛.   本文将介绍在Windows平台下串行通信的工作机制和用Visual C++设计串行通信程序的 ...

  9. php解析json数据

    <?php $data; $data.="["; for ($i=0;$i<20;$i++) { $data.="{"; $data.=" ...

  10. jquery学习 (3)文本框获取焦点之后变换样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...