參考: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()">返 回</a> <a href="#"
class="easyui-linkbutton" iconCls="icon-ok"
onclick="javascript:savedDistAward();">確 定</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();">新 增</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> 業績起點(￥)(含)：</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> 業績起點(￥)(含)：</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[][屬性名這種方式] 否則無效,有大神知道原因的話還請賜教,多謝.