js对象定义，表格数据转成json上传提交

来源：互联网发布：期货软件大赢家编辑：程序博客网时间：2024/05/16 18:20

添加页面js:

<script type="text/javascript">/**新建一个缘分图片对象**/function createFateImg(imgUrl,linkType,link,orderNum ,valid){   var obj = new Object;   obj.imgUrl =imgUrl;  obj.linkType = linkType;   obj.link = link;   obj.orderNum = orderNum; obj.valid = valid;  obj.toDataHtml = function(){     var dataHtml = '<tr>'+'<td align="center"> <img src="'+ this.imgUrl +'" width="300px" height="100px"/></td>'+'<td align="center"> <input type="text" style="text-align: center; width:99%;" value="'+  this.linkType + '"/></td>'+'<td align="center"> <input type="text" style="text-align: center; width:99%;" value="'+  this.link + '"/></td>'+'<td align="center"> <input type="text" style="text-align: center; width:99%;" value="'+  this.orderNum + '"/></td>'+'<td align="center"> <input type="text" style="text-align: center; width:99%;" value="'+  this.valid + '"/></td>'+'<td align="center"> <a href="#" onclick="removeSelf(this)">删除</a></td>'+'</tr> ';   return dataHtml; };return obj;  }  /**上传图片，并将图片和输入的文字作为一条记录显示到父窗口，对应于添加按钮的点击事件**/function updateFateImgToServer(){$("#addTip",$.pdialog.getCurrent()).text("");var fileElements = [];var linkType = $("#linkType",$.pdialog.getCurrent()).find("option:selected").text();var link = $("#link",$.pdialog.getCurrent()).val();var orderNum = $("#orderNum",$.pdialog.getCurrent()).val();fileElements.push("fateImg");//提交表单$.ajaxFileUpload({url : 'updateFateImgToServer.do',  //uploadHeadPhotosecureuri : false,fileElementId :fileElements,dataType : 'json',success : function(data, status) {$("#addTip",$.pdialog.getCurrent()).text("添加广告位记录成功");var img1 = new createFateImg(data.returnValue,linkType,link,orderNum ,'1');  //data.returnValue是返回上传后图片路径var dataHtml = img1.toDataHtml();$("#fateImgList",navTab.getCurrentPanel()).append(dataHtml);//关闭对话框$.pdialog.closeCurrent(); //这行js就是执行完以上的js之后关闭该dialog弹出框 },error : function(data, status, e) {$("#addTip",$.pdialog.getCurrent()).text("添加广告位记录失败");}});}</script>

删除一行的js:（对应于删除链接的点击事件）

/**把这一行记录删除**/function removeSelf(obj){$(obj).parent().parent().remove();}

提交整个表格数据，转成json上传服务器，对应立即上线按钮：

/**更新表格上所有数据到服务器**/function submitDataToServer(){var fateImgs = [];$("#fateImgList tr").each(function(i ,trObj){var tds = $(trObj).children();var imgUrl = tds.eq(0).find("img").attr("src");var type = tds.eq(1).find("input").val();var href = tds.eq(2).find("input").val();var sort = tds.eq(3).find("input").val();var valid = tds.eq(4).find("input").val();var fateImg = new createFateImg(imgUrl,type,href,sort ,valid);  fateImgs.push(fateImg);//alert(imgUrl + " : " + type + " : " + href + " : " + sort + " : "+valid);});var dataLists = JSON.stringify(fateImgs);//提交json字符串$.ajax({type: "POST",url : 'submitFateImgList.do',data : {"dataLists" : dataLists},secureuri : false,dataType : 'json',success : function(data, status) {var valueObj = data.message;$("#success",navTab.getCurrentPanel()).html(valueObj);},error : function(data, status, e) {alertMsg.info(e);}});}

效果图1：

效果图2、

1 0