参考:https://www.cnblogs.com/shj-com/p/7878727.html

下载

下载该插件的地址是：http://www.bootcdn.cn/jquery.serializeJSON/

使用

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.serializejson.js"></script>

-html

<head>

　　<script type="text/javascript" src="../common/jquery-easyui-1.5.3/jquery.serializejson.min.js"></script>

</head>

<div id="distAwardDetail" class="easyui-dialog" title="编辑分红比例"

style="width: 55%; height: 300px;"

data-options="closed:true,modal:true,closable:false">

　　<div id="generalInfo" style="position: relative; margin-top: 20px;">

<div style="width: 140px; height: 30px; margin-left: 23px; text-align: left;">

<a href="#" class="easyui-linkbutton" iconCls='icon-undo'
onclick="javascript:backView()">返&nbsp;&nbsp;回</a> <a href="#"
class="easyui-linkbutton" iconCls="icon-ok"
onclick="javascript:savedDistAward();">确&nbsp;&nbsp;定</a>

</div>
<form method="post" id="distAwardform" traditional=true>
　　<table id="distTable" style="margin-left: 20px;">

　　</table>
<a href="#" class="easyui-linkbutton" iconCls="icon-add"
style="margin-left: 23px" onclick="javascript:addRow();">新&nbsp;&nbsp;增</a>
</form>

</div>

</div>

-JS

//回显

function editDistAward(){

if($("#distTable tr").length==0){

　　let rows=$("#distAwardDg").datagrid("getRows");//拿到列表数据

　　for(let i=0;i<rows.length;i++){

let $tr = $('<tr>'+
'<td>&nbsp;业绩起点(￥)(含)：</td>'+
'<td><input class="easyui-numberbox" name="assessVoList[][achieStart]"'+'value="'+rows[i].achieStart+'"'+
'id="achieStart" style="width: 200px;"'+
'data-options="onChange:updateRow,required:true, missingMessage:\'请输入业绩起点\',validType:\'length[1,11]\',min:0,max:10000000,precision:2" /></td>'+
'<td>业绩节点(￥)：</td>'+
'<td><input class="easyui-numberbox" name="assessVoList[][achieEnd]"'+'value="'+rows[i].achieEnd+'"'+
'id="achieEnd" style="width: 200px;"'+
'data-options="onChange:updateRow,required:true, missingMessage:\'请输入业绩节点\',validType:\'length[1,11]\',min:0,max:10000000,precision:2" /></td>'+
'<td>分红比例：</td>'+
'<td><input class="easyui-numberbox" name="assessVoList[][ratio]"'+'value="'+rows[i].ratio+'"'+
'id="ratio" style="width: 100px;"'+
'data-options="onChange:updateRow,required:true, missingMessage:\'请输入分红比例\',validType:\'length[1,4]\',min:0,max:100,precision:1" />%</td>'+
'<td><a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:deleteRow(this);">删除</a></td>'+
'</tr>');
let $table = $("#distTable");
$table.append($tr);
$.parser.parse($table);//重新渲染,否则easyUI样式失效
}
}
$("#distAwardDetail").dialog("open");
}

//返回时清空
function backView(){
if(backFlag==1){
$.messager.confirm("操作提示", "编辑的数据将不会保存,确定返回吗?", function (data) {
if(data) {
$("#distTable").empty();
$('#distAwardDetail').dialog('close');
backFlag=0;
}else{
return;
}
});
}else{
$("#distTable").empty();
$('#distAwardDetail').dialog('close');
}
}
//删除一行
function deleteRow(t){
backFlag=1;
$(t).parent().parent().remove();
}

//新增一行
function addRow(){
let $tr = $('<tr>'+
'<td>&nbsp;业绩起点(￥)(含)：</td>'+
'<td><input class="easyui-numberbox" name="assessVoList[][achieStart]"'+
'id="achieStart" style="width: 200px;"'+
'data-options="required:true, missingMessage:\'请输入业绩起点\',validType:\'length[1,11]\',min:0,max:10000000,precision:2" /></td>'+
'<td>业绩节点(￥)：</td>'+
'<td><input class="easyui-numberbox" name="assessVoList[][achieEnd]"'+
'id="achieEnd" style="width: 200px;"'+
'data-options="required:true, missingMessage:\'请输入业绩节点\',validType:\'length[1,11]\',min:0,max:10000000,precision:2" /></td>'+
'<td>分红比例：</td>'+
'<td><input class="easyui-numberbox" name="assessVoList[][ratio]"'+
'id="ratio" style="width: 100px;"'+
'data-options="required:true, missingMessage:\'请输入分红比例\',validType:\'length[1,4]\',min:0,max:100,precision:1" />%</td>'+
'<td><a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:deleteRow(this);">删除</a></td>'+
'</tr>');
let $table = $("#distTable");
$table.append($tr);
$.parser.parse($table);//重新渲染,否则easyUI样式失效
}

获取数据

let obj=$('#distAwardform').serializeJSON();//转为json对象
obj=obj.assessVoList;

let json = JSON.stringify(obj);//转为json字符串

ps:

input的那么属性一定要assessVoList[][属性名这种方式] 否则无效,有大神知道原因的话还请赐教,多谢.

jQuery动态添加元素,并提交json格式数据到后台的更多相关文章

  1. ajax 提交 json格式数据到后台

    例子:$.ajax({ type: 'POST', url: "/ROOT/modify.do", contentType: "application/json" ...

  2. 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  3. Android 如何通过Retrofit提交Json格式数据

    本文将介绍如何通过retrofit库post一串json格式的数据.首先post的json数据格式如下: { "Id": "string", "Dev ...

  4. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

  5. Django day11(一) ajax 文件上传 提交json格式数据

    一: 什么是ajax? AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互 ...

  6. 向Solr数据集提交Json格式数据（Scala，Post）

    import scalaj.http.Http class SolrAdd () {// 方法接受两个参数,dataType为数据集名称,jsonString为数据json字符串 def postTo ...

  7. 【Web】前台传送JSON格式数据到后台Shell处理

    1.js中的json对象和字符串之间的转化:http://www.oschina.net/code/snippet_175925_6288 代码片段: var obj = JSON.parse(des ...

  8. jQuery获取JSON格式数据方法

    getJSON方法: jQuery.getJSON(url,data,success(data,status,xhr)) $("button").click(function(){ ...

  9. ASP.NET Hashtable输出JSON格式数据

    最近在开发Windows8 Metro App,使用JavaScript和HTML开发环境.所以操作数据绑定都是使用JSON格式数据.后台使用的是ASP.NET,因为项目相对较小,所有后台没有使用数据 ...

随机推荐

  1. cygwin运行git submodule init出错error while loading shared libraries的解决

    installing the Devel\gettext package should solve your problem. git-submodule requires that. Unfortu ...

  2. 8、泛型程序设计与c++标准模板库2.4列表容器

    列表容器主要用于存放链表,其中的链表是双向链表,可以从任意一端开始遍历.列表容器是需要按顺序访问的容器.另外,列表容器不支持随机访问迭代器,因此某些算法不能适合于列表容器.列表容器还提供了另一种操作- ...

  3. 截止JDK1.8版本,java并发框架支持锁包括?

    读写锁 自旋锁 乐观锁

  4. struts2的package和result的标签的属性

    package的属性 1.name: 配置package元素时必须指定name属性,这是引用该包的唯一标识. 2.extends: 可选属性,指定该包继承的父包,子包可以从一个或多个父包中继承到拦截器 ...

  5. JavaScript中的真和假,==和===, 不等

    咋JS中,下面这些值表示 “假”: "" (empty string) 0,-0,NaN (invalid number) null, undefined false 除了上面这些 ...

  6. 第二周作业-影评、靶机和攻击机的安装与配置、kali的配置、DNS解析

    教材作业 第一章作业一 <黑客军团>第2季第1集影评 本文只分析与黑客攻击有关的情节,不谈其他. 开头,男主通过ssh以root身份远程连接到了一台服务器,并在其上执行了名为fuxsocy ...

  7. 阿里云 Ubuntu 服务器 安装 pymssql

    我是按照官方的说明文档: http://www.pymssql.org/en/stable/intro.html#getting-started 一步一步操作的,但是没有成功,在网上搜索了很多信息,最 ...

  8. 2017-10-6 清北刷题冲刺班a.m

    1.角谷猜想 #include<iostream> #include<cstdio> #include<cstring> #define maxn 10010 us ...

  9. 解读人：朱月琴，Hippocampal proteomic alteration in triple transgenic mouse model of Alzheimer’s disease and implication of PINK 1 regulation in donepezil treatment

    文章中文名:阿尔茨海默病三联转基因小鼠模型的海马蛋白质组学改变及Donepezil治疗中PINK 1调节的意义 发表时间:(2019年4月) IF:3.95 单位:澳门大学,威斯康星大学,暨南大学,广 ...

  10. Oracle表连接（转）

    表之间的连接 Join是一种试图将两个表结合在一起的谓词,一次只能连接2个表,表连接也可以被称为表关联.在后面的叙述中,我们将会使用”row source”来代替”表”,因为使用row source更 ...