table_jquery 内のデータを追加、保存、削除するための jquery 操作の例

このようなページの場合、これらの大量のデータをバックグラウンドで走査して処理するのは非常に面倒であるため、フォームを送信してこれらのデータを処理しないことがよくあります。フォアグラウンドページで データをオブジェクトの形式で json に保存し、バックグラウンドで json を必要なオブジェクトに直接変換して、オブジェクトを直接処理できるようにします。

追加ボタン

コードをコピー コードは次のとおりです:

< ;input name ="button" type="button" value="Add" onClick="addRowForPswdBasicFillTemplate('pswd_basic_fill_template')">

テーブル ID は pswd_basic_fill_template
メソッドを追加します

コードをコピーします コードは次のとおりです:

function addRowForPswdBasicFillTemplate(tid){
var applyAreaOptionStr = $('#applyAreaOptionStr' ).val(); //選択ボックスの初期化をいくつか示します。
did = tid;
var tr = $("") attr("bgcolor", "#FFFFFF");
tr.append($("").html(""));
tr.append($("").html(""));
tr. append($("").html("")); append($("").html(""));
tr.append($("").html("< ;select name='apply_Area ' id='apply_Area'>" applyAreaOptionStr ""));
tr.append($("").html( "" $("#indexSpeciesHtml").val() ""));
tr.append($("< td>"));
tr.append($ ("").html("" ));
tr.append($("").html("gt;") );
tr.append($("").html("
" $("#assessOrgHtml").val() ""));
tr.appendTo ($("#" tid));
setRowNumber_1(tid); // 上下の操作に使用される番号を保存します。
}

保存ボタン

コードをコピー コードは次のとおりです:

< ;input name="button" type="button" value="Save" 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) ;ipswd_basic_fill_template[i]=JSON.stringify(pswd_basic_fill_template[i])
}
$.post("",{"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("$("#" は " tbody tr")");
var result=true;
$.each(trs,function(i,tr) ){
var order = $(tr).find("td:nth-child(2)").text();
varindexCode = $(tr).find("input[name=' Index_code']").val();
varindexName = $(tr).find("input[name='index_name']").val();
varindexType = $(tr)。 find("select[name='index_type']").find("option:selected").text();
varindexSpecies = $(tr).find("select[name='index_species']" ).find("オプション:選択済み").text();
var Formula = $(tr).find("textarea[name='formula']").val(); $(tr).find("input[name='cap']").val();
varbaseValue = $(tr).find("input[name='base_value']").val( );
varassessOrg = $(tr).find("select[name='assessOrg']").val();
varassessOrgName = $(tr).find("select[name=' assessOrg']").find("オプション:選択済み").text();
var idObj = $(tr).find("input[name='idObj']").val();
varindexValue = $(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.lengthshowInfo("指标名は空");
結果 = false;
false を返します。
}
if(indexName.length<1){
showInfo("指标代号は空になれません");
結果 = false;
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);
})
結果を返します。
}
前台の操作が完了しました。下を見て後台の操作
struts 構成文子

@list
seassessment/basicFillTemplate/basicFillTemplateNew
メソッド>
後台操作
public void save() {
String obj = request().getParameter("tempLateList");
リスト結果 = 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 ();
}
}
}
}
// 選択した行を取得します
function getSelRowJnSpacial(tid){
var selObj=eval("$("# " tid " input[@type=radio][checked]")");
if(selObj.html()!=null){
return
}else{
showInfo( "操作する行を選択してください");
return null;
}
}
struts 設定ファイル
@list

バックグラウンドメソッド
public void delete(String ids) 🎜>//メソッド
}
上に移動および下に移動 function
Button


//行を上に移動
function moveBefore(tid){
did =tid;
var selObj= $("input:radio[checked]");
if(selObj==null){
showInof(" select 移動された行");
}else{
var rowIndex = selObj.parent().parent()[0].rowIndex;
if(parseInt(rowIndex)<=2){
showInfo("先頭に到達したため上に移動できません");
return;
var preObj=selObj.parent().parent().prev(); selRow= selObj.parent().parent().clone();
preObj.before(selRow);
setRowNumber_1_1(did); ;
}
}
関数 setRowNumber_1_1(tid){
var fNew = 1;
var 式 = "$("#" tid " tbody tr")"; tbody= eval(式);
$.each(tbody,function(i,tr){
if(i>=0){
varnumber=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("$("#" は " 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);
setRowNumber_1_1(tid); 🎜>//rowNumber シーケンス番号を設定します
function setRowNumber_1(tid){
var fNew = 1;
varexpression="$("#" tid " tbody tr")"; tbody=eval(式);
$.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;
}
}
varnumber=i 1;
$(tr).find("td:nth-child(2)").text(number); (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());
//varassessOrgHtml = "" $("#assessOrgHtml").val();
//$(tr).find("td:last-child").html(assessOrgHtml);
}
}
})
}