Detaillierte Erläuterung, wie jquery Daten in Tabellen verarbeitet

Dieses Mal werde ich Ihnen detailliert erklären, wie jquery mit Daten in einer Tabelle umgeht. Was sind die Vorsichtsmaßnahmen, wie jquery mit Daten in einer Tabelle umgeht? ein Blick.

Bei Seiten wie dieser verarbeiten wir diese Daten oft nicht durch das Absenden von Formularen, da es sehr umständlich ist, diese großen Datenmengen im Hintergrund zu verarbeiten Speichern Sie auf der Vordergrundseite die Daten in JSON in Form von Objekten und konvertieren Sie JSON dann im Hintergrund direkt in die von uns benötigten Objekte, damit wir die Objekte direkt verarbeiten können!
Schaltfläche „Hinzufügen“

<input name="button" type="button" value="添加" onClick="addRowForPswdBasicFillTemplate(&#39;pswd_basic_fill_template&#39;)">

Tabellen-ID ist pswd_basic_fill_template
Methode hinzufügen

function addRowForPswdBasicFillTemplate(tid){ 
var applyAreaOptionStr = $('#applyAreaOptionStr').val(); //这里是对select框的一些初始化 
did = tid; 
var tr = $("<tr></tr>").attr("bgcolor","#FFFFFF"); 
tr.append($("<td></td>").html("<input type=&#39;radio&#39; name=&#39;radio&#39; value=&#39;checkbox&#39;></td>")); 
tr.append($("<td></td>").html("")); 
tr.append($("<td></td>").html("<input type=&#39;text&#39; name=&#39;index_name&#39; id=&#39;index_name&#39; />")); 
tr.append($("<td></td>").html("")); 
tr.append($("<td></td>").html("<select name=&#39;apply_Area&#39; id=&#39;apply_Area&#39;>"+applyAreaOptionStr+"</select>")); 
tr.append($("<td></td>").html("<select name=&#39;index_species&#39; id=&#39;index_species&#39;>"+$("#indexSpeciesHtml").val()+"</select>")); 
tr.append($("<td></td>").html("<textarea maxlength=&#39;500&#39; rows=&#39;3&#39; cols=&#39;20&#39; name=&#39;formula&#39; id=&#39;formula&#39;/>")); 
tr.append($("<td></td>").html("<input type=&#39;text&#39; name=&#39;cap&#39; id=&#39;cap&#39; size=&#39;5&#39;/>")); 
tr.append($("<td></td>").html("<input type=&#39;text&#39; name=&#39;base_value&#39; id=&#39;base_value&#39; size=&#39;5&#39;/>")); 
tr.append($("<td></td>").html("<input type=&#39;hidden&#39; id=&#39;orgid&#39; name=&#39;orgid&#39; /> 
<select name=&#39;assessOrg&#39; id=&#39;assessOrg&#39;>"+$("#assessOrgHtml").val()+"</select>")); 
tr.appendTo($("#"+tid)); 
setRowNumber_1(tid); //保存编号，上移下移操作会用到 ，先不关注 
}

Schaltfläche „Speichern“

<input name="button" type="button" value="保存" onClick="savePswdBasicFillTemplate(&#39;pswd_basic_fill_template&#39;)">

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=&#39;/secbasicFillTemplate/save&#39;/>",{"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=&#39;index_code&#39;]").val(); 
var indexName = $(tr).find("input[name=&#39;index_name&#39;]").val(); 
var indexType = $(tr).find("select[name=&#39;index_type&#39;]").find("option:selected").text(); 
var indexSpecies = $(tr).find("select[name=&#39;index_species&#39;]").find("option:selected").text(); 
var formula = $(tr).find("textarea[name=&#39;formula&#39;]").val(); 
var cap = $(tr).find("input[name=&#39;cap&#39;]").val(); 
var baseValue = $(tr).find("input[name=&#39;base_value&#39;]").val(); 
var assessOrg = $(tr).find("select[name=&#39;assessOrg&#39;]").val(); 
var assessOrgName = $(tr).find("select[name=&#39;assessOrg&#39;]").find("option:selected").text(); 
var idObj = $(tr).find("input[name=&#39;idObj&#39;]").val(); 
var indexValue = $(tr).find("input[name=&#39;index_value&#39;]").val(); 
var templateType = "2"; 
if(did=="zdppbzlb"){ 
templateType = "3"; 
}else if(did=="fjsjbz"){ 
templateType = "4"; 
assessOrg = $(tr).find("select[name=&#39;countyOrg&#39;]").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 = $(&#39;#postIndex&#39;).val(); 
var postIndexName = $(&#39;#postIndex&#39;).find("option:selected").text(); 
var applyAreaId = $(tr).find("select[name=&#39;apply_Area&#39;]").val(); 
var applyAreaName = $(tr).find("select[name=&#39;apply_Area&#39;]").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; 
}

Das Frontend Der Vorgang ist abgeschlossen. Schauen wir uns den Hintergrundvorgang an
strutsKonfigurationsdatei

<method name="save" uri="/secbasicFillTemplate/save"> 
<result name="success" type="redirect">@list</result> 
<result name="failed">secassessment/basicFillTemplate/basicFillTemplateNew</result> 
</method>

Backend-Vorgang

public void save() { 
String obj = request().getParameter("tempLateList"); 
List<SecBasicFillTemplate> result = JSonUtil.paserJsonArray(SecBasicFillTemplate.class,obj); 
//将json转化为对象 
}

Sehen Sie sich unten den Löschvorgang an
Schaltfläche „Löschen“

<input name="button" type="button" value="删除" onClick="delRowForSpacialById(&#39;pswd_basic_fill_template&#39;)" > 
//删除一行的数据 
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=&#39;idObj&#39;]").val(); 
if(idValue!=null && idValue.length>0){ 
$.post("<c:url value=&#39;/secbasicFillTemplate/delete&#39;/>",{"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-Konfigurationsdatei

<method name="delete" uri="/secbasicFillTemplate/delete" > 
<result name="success" type="redirect">@list</result> 
</method>

Hintergrundmethode

public void delete(String ids) { 
//方法 
} 
上移下移功能 
按钮 
<input name="button" type="button" value="上移" onClick="moveBefore(&#39;pswd_basic_fill_template&#39;)"> 
<input name="button" type="button" value="下移" onClick="moveAfter(&#39;pswd_basic_fill_template&#39;)"> 
//上移行 
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=&#39;idObj&#39;]").val(); 
var f = $(tr).find("td:nth-child(4)").find("input[name=&#39;index_code&#39;]").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=&#39;index_code&#39; name=&#39;index_code&#39; value=&#39;F"+fNew+"&#39; readonly=&#39;true&#39; size=&#39;5&#39;>"; 
if(tid=="zdppbzlb"){ 
fValue = "<input id=&#39;index_code&#39; name=&#39;index_code&#39; value=&#39;K"+fNew+"&#39; readonly=&#39;true&#39; size=&#39;5&#39;>"; 
} 
$(tr).find("td:nth-child(4)").html(fValue); 
$(tr).find("td:nth-child(5)").html($("#selectHtml").val()); 
//var assessOrgHtml = "<input type=&#39;hidden&#39; name=&#39;orgid&#39; id=&#39;orgid&#39;></input>"+$("#assessOrgHtml").val(); 
//$(tr).find("td:last-child").html(assessOrgHtml); 
} 
} 
}) 
}

I Ich glaube, Sie haben diesen Artikel gelesen. Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum dynamischen Generieren einer Tabelle mit JQuery+Ajax

JQuery implementiert Kapitelanker Zurück zum Anfang Wirkung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung, wie jquery Daten in Tabellen verarbeitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!