新的项目中需要使用类似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. paip.输入法编程----删除双字词简拼

    paip.输入法编程----删除双字词简拼 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net/at ...

  2. PHP开发安全之近墨者浅谈(转)

    ==过滤输入/输出转义 过滤是Web应用安全的基础.它是你验证数据合法性的过程.通过在输入时确认对所有的数据进行过滤,你可以避免被污染(未过滤)数据在你的程序中被误信及误用.大多数流行的PHP应用的漏 ...

  3. 在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别--转

    其中,在地址栏按回车又分为两种情况.一是请求的URI在浏览器缓存中未过期,此时,使用Firefox的firebug插件在浏览器里显示的HTTP请求消息头如下: Host    192.168.3.17 ...

  4. Linux 套接字编程中要注意的细节

    隐患 1.忽略返回状态 第一个隐患很明显,但它是开发新手最容易犯的一个错误.如果您忽略函数的返回状态,当它们失败或部分成功的时候,您也许会迷失.反过来,这可能传播错误,使定位问题的源头变得困难. 捕获 ...

  5. 《Android开发艺术探索》读书笔记 (7) 第7章 Android动画深入分析

    本节和<Android群英传>中的第七章Android动画机制与使用技巧有关系,建议先阅读该章的总结 第7章 Android动画深入分析 7.1 View动画 (1)android动画分为 ...

  6. Java基础知识强化17:JAVA不可以将所覆盖的方法的访问权限变得比父类的小

    首先我们看一下下面的代码如下: interface I { void go(); } abstract class A implements I { } class C extends A { voi ...

  7. python运算符使用规律

    #conding=utf-8 #优先级使用规律#1.一般情况下是左右结合print 4+6+5*6+6 #2.出现赋值的时候一般是右结合a=8+91print a #优先级记忆口诀'''函数寻址下标1 ...

  8. 使用phpmailer发送邮件(以QQ邮箱为例)

    <?php   include("class/class.phpmailer.php"); //下载phpmailer并include两个文件  include(" ...

  9. JY02-HTML/CSS-京东01 定位是很粗暴的页面布局方法

    1.学习重点 1. 独立完成开发前的准备工作 1.1 配置开发环境 已使用sublime,webstorm,,,vscode,ato,Hbuilder 1.2 建立项目文件 项目文件名/ css.js ...

  10. 用angular来思考问题How do I “think in AngularJS” if I have a jQuery background?

    [翻译]How do I “think in AngularJS” if I have a jQuery background? 1. 不要先设计页面,然后再使用DOM操作来改变它的展现 在jQuer ...