php与前端（二）：页面table的单元格的数据add和update

<table id="btnShow" class="table table-bordered table-hover" style="word-break:break-all;" >
<thead>
<tr>
<th>行类型</th>
<th>排序</th>
<th>表达式描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<volist name="rowArr" id="list">
<tr>
<td>
<select  name="row_type-{$list.row_id}_{$list.tpl_id}" >
<option value="1" <?php echo $list['row_type']==1 ? 'selected' : '' ?> >一维数据</option>
<option value="2" <?php echo $list['row_type']==2 ? 'selected' : '' ?> >二维数据</option>
</select>
</td>
<td>
<input type="text" class="listorder" name="row_sort-{$list.row_id}_{$list.tpl_id}" value="{$list.row_sort}" >
</td>
<td>
<textarea name="desc-{$list.row_id}_{$list.tpl_id}"></textarea>
</td>
<td>
<button type="button" rel="{$list.row_id}_{$list.tpl_id}" class="button " data-target="btn-save">
保存
</button>
<button type="button" rel="{$list.row_id}_{$list.tpl_id}" class="button " data-target="btn-delete">
删除
</button>
<a href="__CONTROLLER__/cellList/tplId/{$list.tpl_id}/rowId/{$list.row_id}">
<button type="button" rel="{$list.row_id}_{$list.tpl_id}" class="button" data-target="btn-edit">
单元格
</button>
</a>
</td>
</tr>
</volist>
<!--新增部分html-->
<tr>
<td>
<select name="row_type" >
<option value="1">一维数据</option>
<option value="2">二维数据</option>
</select>
</td>
<td ><input type="text" name="row_sort" value="0" ></td>
<td>
<textarea name="desc-{$list.row_id}_{$list.tpl_id}"></textarea>
</td>
<td>
<button type="button" class="button" data-target="btn-save" isadd="true">
确定新增
</button>
</td>
</tr>
</tbody>
</table>

<script>
$(function(){
$(document).on('click','button',function(e){
var _self = $(this);
var target = _self.attr('data-target');
var isAdd = _self.attr('isadd');
var rel = _self.attr('rel');
switch(target){
case 'btn-save':
saveAction(_self,isAdd);
break;
case 'btn-delete':
deleteAction({
row_id:rel.split('_')[0],
tpl_id:rel.split('_')[1]
});
break;
case 'btn-edit':
break;
case 'btn-listorder':
listorderAction();
break;
}
});

var tplId = $("#tplId").val();
var jump_url = "__CONTROLLER__/rowList/tplId/"+tplId;

var listorderAction = function(){
var data = $('.listorder').serializeArray();
if($(data).length >0){
postData = {}
$(data).each(function(i){
var name = this.name.split('-')[1];
name = name.split('_')[0];
postData[name] = this.value;
});
var url = "__CONTROLLER__/listRowOrder";
$.post(url,postData,function(result){
if(result.status == 1){
return dialog.success(result.message,jump_url);
}else if(result.status == 0){
return dialog.error(result.message);
}
},"json");
}else{
return dialog.error('没有排序的行');
}

};

var saveAction = function(_that,isAdd){
var opts  ={};
var tr = _that.parents('tr');
var url = '';
if(!isAdd){
var rel =_that.attr('rel');
opts['row_id']=rel.split('_')[0];
opts['tpl_id']=rel.split('_')[1];
url = 'rowUpdate';
}else{
opts['tpl_id']=$("#tplId").val();
url = 'rowAdd';
}
var texts = tr.find('input[type="text"]');
var selects = tr.find('select');
var radios = tr.find(':radio:checked');
var textarea = tr.find('textarea');
for(var i= 0,len=texts.length;i<len;i++){
var temp = $(texts[i]);
var val = temp.val();
var name = temp.attr('name').split('-')[0];
opts[name] = val;
}
for(var i= 0,len=selects.length;i<len;i++){
var temp = $(selects[i]);
var val = temp.val();
var name = temp.attr('name').split('-')[0];
opts[name] = val;
}
for(var i= 0,len=radios.length;i<len;i++){
var temp = $(radios[i]);
var val = temp.val();
var name = temp.attr('name').split('-')[0];
opts[name] = val;
}
for(var i= 0,len=textarea.length;i<len;i++){
var temp = $(textarea[i]);
var val = temp.val();
var name = temp.attr('name').split('-')[0];
opts[name] = val;
}
var post_url = "__CONTROLLER__/"+url;
$.post(post_url,opts,function(result){
if(result.status == 1){
return dialog.success(result.message,jump_url);
}else if(result.status == 0){
return dialog.error(result.message);
}
},'json');

}

});
</script>