像这种页面,我们往往不是通过提交表单来处理这些数据,因为如果在后台去遍历处理这些大量的数据是非常繁琐的;比较好的做法是在前台页面中将数据以对象形式保存在json中,然后在后台直接将json转换成我们需要的对象,这">

Home  >  Article  >  Web Front-end  >  Examples of jquery operations for adding, saving, and deleting data in a table_jquery

Examples of jquery operations for adding, saving, and deleting data in a table_jquery

WBOY
WBOYOriginal
2016-05-16 16:48:151329browse

Examples of jquery operations for adding, saving, and deleting data in a table_jquery
For pages like this, we often do not process these data by submitting forms, because it is very cumbersome to traverse and process these large amounts of data in the background; a better approach is to process this in the foreground page Save the data in json in the form of objects, and then directly convert json into the objects we need in the background, so that we can directly process the objects!

Add button

Copy code The code is as follows:



table id is pswd_basic_fill_template
Add method
Copy code The code is as follows:

function addRowForPswdBasicFillTemplate(tid){
var applyAreaOptionStr = $('#applyAreaOptionStr' ).val(); //Here are some initializations for the select box
did = tid;
var tr = $("").attr("bgcolor", "#FFFFFF");
tr.append($("").html(""));
tr.append($("").html(""));
tr.append($("< ;td>").html(""));
tr.append($("< ;td>").html(""));
tr.append($("").html(""));
tr.append($("").html(""));
tr.append($(""));
tr.append($ ("").html(""));
tr.append($("").html("") );
tr.append($("").html("
"));
tr.appendTo($("#" tid));
setRowNumber_1(tid); //Save the number, which will be used for the up and down operations. Don’t pay attention to it yet
}

Save button
Copy code The code is as follows:



Save method
Copy code Code As follows:

function savePswdBasicFillTemplate(tid){
did = tid;
var result = getPswdBasicFillTemplate(); //Encapsulated data operation, please read carefully
if(result){
/ *
if(pswd_basic_fill_template.length<1){
showInfo("Please add basic data standard");
return;
}
*/
for(var i=0 ;ipswd_basic_fill_template[i]=JSON.stringify(pswd_basic_fill_template[i]);
}
$.post("",{"tempLateList":"[" pswd_basic_fill_template "]"},
function(data) {
if("false"==data){
showInfo("Please Save the basic information first! ");
}else{
//delAllTr("pswd_basic_fill_template"); //Delete the line
showInfo("Save successfully!")
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配置文件

@list
secassessment/basicFillTemplate/basicFillTemplateNew

后台操作
public void save() {
String obj = request().getParameter("tempLateList");
List result = JSonUtil.paserJsonArray(SecBasicFillTemplate.class,obj);
//将json转化为对象
}
下面看看删除操作
删除按钮
//删除一行的数据
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("",{"ids" :idValue},function(){
selObj.parent().parent().remove();
})
}else{
selObj.parent().parent().remove ();
}
}
}
}
// Get the selected row
function getSelRowJnSpacial(tid){
var selObj=eval("$("# " tid " input[@type=radio][checked]")");
if(selObj.html()!=null){
return selObj;
}else{
showInfo( "Please select the line to operate");
return null;
}
}
struts configuration file
@list

Background method
public void delete(String ids) {
//Method
}
Move up and move down function
Button


//Move up row
function moveBefore(tid){
did =tid;
var selObj= $("input:radio[checked]");
if(selObj==null){
showInof("Please select Moved row");
}else{
var rowIndex = selObj.parent().parent()[0].rowIndex;
if(parseInt(rowIndex)<=2){
showInfo("It has reached the top and cannot be moved up");
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);
}
})
}
//Move down the line
function moveAfter(tid){
did =tid;
var selObj= $("input:radio[checked]");
if(selObj==null){
showInof("Please select the row to move");
}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("We have reached the last row and cannot move down any further") ;
return;
}
var nextObj=selObj.parent().parent().next();
var selRow=selObj.parent().parent().clone();
nextObj.after(selRow);
selObj.parent().parent().remove();
setRowNumber_1_1(tid);
}
}
//Set rowNumber The sequence number
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 = "";
if(tid=="zdppbzlb"){
fValue = "" ;
}
$(tr).find("td:nth-child(4)").html(fValue);
$(tr).find("td:nth-child(5) )").html($("#selectHtml").val());
//var assessOrgHtml = "< /input>" $("#assessOrgHtml").val();
//$(tr).find("td:last-child").html(assessOrgHtml);
}
}
})
}
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn