如何使用jquery对表格数据进行增加、保存、删除操作代码详解
程序员文章站
2022-04-26 18:21:18
...
我们往往不是通过提交表单来处理这些数据,因为如果在后台去遍历处理这些大量的数据是非常繁琐的;比较好的做法是在前台页面中将数据以对象形式保存在json中,然后在后台直接将json转换成我们需要的对象,这样我们的直接可以处理对象了!
添加按钮
<input name="button" type="button" value="添加" onClick="addRowForPswdBasicFillTemplate('pswd_basic_fill_template')">
table id是pswd_basic_fill_template
添加方法
function addRowForPswdBasicFillTemplate(tid){ var applyAreaOptionStr = $('#applyAreaOptionStr').val(); //这里是对select框的一些初始化 did = tid; var tr = $("<tr></tr>").attr("bgcolor","#FFFFFF"); tr.append($("<td></td>").html("<input type='radio' name='radio' value='checkbox'></td>")); tr.append($("<td></td>").html("")); tr.append($("<td></td>").html("<input type='text' name='index_name' id='index_name' />")); tr.append($("<td></td>").html("")); tr.append($("<td></td>").html("<select name='apply_Area' id='apply_Area'>"+applyAreaOptionStr+"</select>")); tr.append($("<td></td>").html("<select name='index_species' id='index_species'>"+$("#indexSpeciesHtml").val()+"</select>")); tr.append($("<td></td>").html("<textarea maxlength='500' rows='3' cols='20' name='formula' id='formula'/>")); tr.append($("<td></td>").html("<input type='text' name='cap' id='cap' size='5'/>")); tr.append($("<td></td>").html("<input type='text' name='base_value' id='base_value' size='5'/>")); tr.append($("<td></td>").html("<input type='hidden' id='orgid' name='orgid' /> <select name='assessOrg' id='assessOrg'>"+$("#assessOrgHtml").val()+"</select>")); tr.appendTo($("#"+tid)); setRowNumber_1(tid); //保存编号,上移下移操作会用到 ,先不关注 }
保存按钮
<input name="button" type="button" value="保存" onClick="savePswdBasicFillTemplate('pswd_basic_fill_template')">
保存方法
function savePswdBasicFillTemplate(tid){ did = tid; var result = getPswdBasicFillTemplate(); //封装数据操作,请仔细看 if(result){ /* if(pswd_basic_fill_template.length<1){ showInfo("请添加基础数据标准"); return; } */ for(var i=0;i<pswd_basic_fill_template.length;i++){ pswd_basic_fill_template[i]=JSON.stringify(pswd_basic_fill_template[i]); } $.post("<c:url value='/secbasicFillTemplate/save'/>",{"tempLateList":"["+pswd_basic_fill_template+"]"}, function(data) { if("false"==data){ showInfo("请先保存基础信息!"); }else{ //delAllTr("pswd_basic_fill_template"); //删除行 showInfo("保存成功!") if(did!="fjsjbz"){ changeTaskType(tid); } } }); } } //基础填报模版 var pswd_basic_fill_template = {}; //要删除的tableId var did = "pswd_basic_fill_template"; //获取模板值 function getPswdBasicFillTemplate(){ pswd_basic_fill_template=[]; var trs=eval("$(\"#"+did + " tbody tr\")"); var result=true; $.each(trs,function(i,tr){ var order = $(tr).find("td:nth-child(2)").text(); var indexCode = $(tr).find("input[name='index_code']").val(); var indexName = $(tr).find("input[name='index_name']").val(); var indexType = $(tr).find("select[name='index_type']").find("option:selected").text(); var indexSpecies = $(tr).find("select[name='index_species']").find("option:selected").text(); var formula = $(tr).find("textarea[name='formula']").val(); var cap = $(tr).find("input[name='cap']").val(); var baseValue = $(tr).find("input[name='base_value']").val(); var assessOrg = $(tr).find("select[name='assessOrg']").val(); var assessOrgName = $(tr).find("select[name='assessOrg']").find("option:selected").text(); var idObj = $(tr).find("input[name='idObj']").val(); var indexValue = $(tr).find("input[name='index_value']").val(); var templateType = "2"; if(did=="zdppbzlb"){ templateType = "3"; }else if(did=="fjsjbz"){ templateType = "4"; assessOrg = $(tr).find("select[name='countyOrg']").val(); } var taskType = $("#task_type").val(); if(indexCode.length<1){ showInfo("指标名称不能为空"); result = false; return false; } if(indexName.length<1){ showInfo("指标代号不能为空"); result = false; return false; } var postIndexId = $('#postIndex').val(); var postIndexName = $('#postIndex').find("option:selected").text(); var applyAreaId = $(tr).find("select[name='apply_Area']").val(); var applyAreaName = $(tr).find("select[name='apply_Area']").find("option:selected").text(); var pswd_basic_fill_templateBean={ "postIndexId":postIndexId,"postIndexName":postIndexName,"applyAreaId":applyAreaId,"applyAreaName":applyAreaName, "indexCode":indexCode,"templateType":templateType,"indexValue":indexValue, "indexName":indexName,"taskType":taskType,"order":order,"id":idObj,"baseValue":baseValue, "indexSpecies":indexSpecies,"formula":formula,"cap":cap,"orgName":assessOrgName,"orgid":assessOrg } pswd_basic_fill_template.push(pswd_basic_fill_templateBean); }) return result; }
前台的操作就完成了,下面看一看后台的操作
struts配置文件
<method name="save" uri="/secbasicFillTemplate/save"> <result name="success" type="redirect">@list</result> <result name="failed">secassessment/basicFillTemplate/basicFillTemplateNew</result> </method>
后台操作
public void save() { String obj = request().getParameter("tempLateList"); List<SecBasicFillTemplate> result = JSonUtil.paserJsonArray(SecBasicFillTemplate.class,obj); //将json转化为对象 }
下面看看删除操作
删除按钮 <input name="button" type="button" value="删除" onClick="delRowForSpacialById('pswd_basic_fill_template')" >
//删除一行的数据 function delRowForSpacialById(tid){ var selObj=getSelRowJnSpacial(tid); if(selObj){ var result = confirm("确定将记录删除?"); if(result){ var id = selObj.parent().parent(); var idValue = id.find("input[name='idObj']").val(); if(idValue!=null && idValue.length>0){ $.post("<c:url value='/secbasicFillTemplate/delete'/>",{"ids":idValue},function(){ selObj.parent().parent().remove(); }) }else{ selObj.parent().parent().remove(); } } } } // 获取选中的行 function getSelRowJnSpacial(tid){ var selObj=eval("$(\"#"+tid+" input[@type=radio][checked]\")"); if(selObj.html()!=null){ return selObj; }else{ showInfo("请选择要操作的行"); return null; } } struts 配置文件 <method name="delete" uri="/secbasicFillTemplate/delete" > <result name="success" type="redirect">@list</result> </method> 后台方法 public void delete(String ids) { //方法 } 上移下移功能 按钮 <input name="button" type="button" value="上移" onClick="moveBefore('pswd_basic_fill_template')"> <input name="button" type="button" value="下移" onClick="moveAfter('pswd_basic_fill_template')"> //上移行 function moveBefore(tid){ did =tid; var selObj= $("input:radio[checked]"); if(selObj==null){ showInof("请选择要移动的行"); }else{ var rowIndex = selObj.parent().parent()[0].rowIndex; if(parseInt(rowIndex)<=2){ showInfo("已经到顶,不能再上移了"); return; } var preObj=selObj.parent().parent().prev(); var selRow=selObj.parent().parent().clone(); preObj.before(selRow); selObj.parent().parent().remove(); setRowNumber_1_1(did); } } function setRowNumber_1_1(tid){ var fNew = 1; var expression="$(\"#"+tid+" tbody tr\")"; var tbody=eval(expression); $.each(tbody,function(i,tr){ if(i>=0){ var number=i+1; $(tr).find("td:nth-child(2)").text(number); } }) } //下移行 function moveAfter(tid){ did =tid; var selObj= $("input:radio[checked]"); if(selObj==null){ showInof("请选择要移动的行"); }else{ var r1 = selObj.parent().parent()[0].rowIndex; var a1 = eval("$(\"#"+did+" tbody tr\")").size(); if(parseInt(selObj.parent().parent()[0].rowIndex)-1 >= a1){ showInfo("已经到最后一行,不能再下移了"); return; } var nextObj=selObj.parent().parent().next(); var selRow=selObj.parent().parent().clone(); nextObj.after(selRow); selObj.parent().parent().remove(); setRowNumber_1_1(tid); } } //设置rowNumber的序号 function setRowNumber_1(tid){ var fNew = 1; var expression="$(\"#"+tid+" tbody tr\")"; var tbody=eval(expression); $.each(tbody,function(i,tr){ if(i>=0){ var idObj = $(tr).find("input[name='idObj']").val(); var f = $(tr).find("td:nth-child(4)").find("input[name='index_code']").val(); if(f!=null){ var f1 = f.substring(1); if(f1>=0){ fNew = parseInt(f1)+1; } } var number=i+1; $(tr).find("td:nth-child(2)").text(number); if(idObj==null && f==null){ var fValue = "<input id='index_code' name='index_code' value='F"+fNew+"' readonly='true' size='5'>"; if(tid=="zdppbzlb"){ fValue = "<input id='index_code' name='index_code' value='K"+fNew+"' readonly='true' size='5'>"; } $(tr).find("td:nth-child(4)").html(fValue); $(tr).find("td:nth-child(5)").html($("#selectHtml").val()); //var assessOrgHtml = "<input type='hidden' name='orgid' id='orgid'></input>"+$("#assessOrgHtml").val(); //$(tr).find("td:last-child").html(assessOrgHtml); } } }) }
以上就是如何使用jquery对表格数据进行增加、保存、删除操作代码详解的详细内容,更多请关注其它相关文章!