easyui添加删除表格任意行(2)
1、easyui添加删除表格思路：
1)、引入js, esayui.min.js, easyui.css
2)、设置表格ID和表格要添加tr的class
3)、根据表格的ID来追加一行tr到该表格后
4)、根据tr的class来判断已经添加的记录数
5)、根据tr的this得到这一行的节点,从table中删除这一行的节点
2、实现的效果
3、实现的html代码(直接复制可用)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>添加删除表格(2)</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入easyui -->
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<form id="form_id" enctype="multipart/form-data" method="post">
<div>
<table cellspacing="20px">
<tbody>
<tr>
<td width="96px">
模板标题：
</td>
<td><input class="easyui-textbox" name="addacount_name" data-options="prompt:'请输入模板标题',required:true" style="width:285px"/>
<!-- <span class="red">提示：文件不能大于1M</span> -->
</td>
</tr>
<tr>
<td>
所属分类：
</td>
<td>
<select class="easyui-combobox" name="addacount_style" data-options="required:true,panelHeight:'auto',editable:false,width:'100px'">
<option value="1">新品</option>
<option value="2">限时</option>
</select>
</td>
</tr>
<!-- <tr id="account_add_file">
<td>
选择文件：
</td>
<td>
<input class="easyui-filebox" name="addacount_applyimage" id="account_add_applyimage" data-options="prompt:'请上传txt文件',required:true" style="width:285px"/>
<span class="red">提示：文件不能大于1M</span>
</td>
</tr> -->
<tr>
<td width="96px">
添加音乐
</td>
<td>
<table id="videoadmin_tempAdd_music_table" cellspacing='1'>
<thead>
<tr>
<td width="150px">主标题</td>
<td width="150px">副标题</td>
<td width="200px">音乐</td>
<td width="90px">影片速度</td>
<!-- <td>视频时长(s)</td> -->
<!-- <td colspan='3' style='text-align:center'> -->
<td>
<a href="javascript:void(0)" title="添加内容" onclick="addTrCommon('music','videoadmin_addTemp_music_tr','videoadmin_tempAdd_music_table',-1,3)" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
</td>
</tr>
</thead>
<tbody>
<tr class="videoadmin_addTemp_music_tr">
<td>
<input class="easyui-textbox" name='musicTitleList[]' data-options="width:'150px',required:true" value=""/>
</td>
<td>
<input class="easyui-textbox" name='musicSubTitleList[]' data-options="width:'150px',required:true" value=""/>
</td>
<td>
<input class="easyui-filebox" name="musicFileIdList[]" id="account_add_applyimage" data-options="prompt:'请上传音乐',required:true,width:'200px'"/>
</td>
<td>
<select class="easyui-combobox" name="musicSpeedList[]" data-options="required:true,panelHeight:'auto',editable:false,width:'50px'">
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">4</option>
<option value="2">5</option>
</select>
</td>
<!-- <td>
<input class="easyui-numberspinner" type="text" name="selfmediaCashcheck[morethan]" data-options="prompt:'大于等于',min:1,editable:true,width:'90px',">1</input>
</td> -->
<td>
<a href="javascript:void(0)" title="删除内容" onclick="reduceTrCommon(this,'videoadmin_addTemp_music_tr','videoadmin_tempAdd_music_table')" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- 添加图片tr操作 -->
<tr>
<td width="96px">
添加图片
</td>
<td>
<table id="videoadmin_tempAdd_pic_table" cellspacing='1'>
<thead>
<tr>
<td width="150px">主标题</td>
<td width="150px">副标题</td>
<td width="200px">图片</td>
<td width="90px">时长(秒)</td>
<td width="90px">排序(升序)</td>
<td colspan='3' style='text-align:center'>
<a href="javascript:void(0)" title="添加内容" onclick="addTrCommon('pic','videoadmin_addTemp_pic_tr','videoadmin_tempAdd_pic_table', 1,9)" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
</td>
</tr>
</thead>
<tbody>
<tr class="videoadmin_addTemp_pic_tr">
<td>
<input class="easyui-textbox" name='picTitleList[]' data-options="width:'150px',required:true" value=""/>
</td>
<td>
<input class="easyui-textbox" name='picSubTitleList[]' data-options="width:'150px',required:true" value=""/>
</td>
<td>
<input class="easyui-filebox" name="picFileIdList[]" data-options="prompt:'请上传图片',required:true,width:'200px'"/>
</td>
<td>
<input class="easyui-numberspinner" type="text" name="picDurationList[]" data-options="prompt:'时长(秒)',min:1,editable:true,width:'90px',value:1"/>
</td>
<td>
<input class="easyui-numberspinner" type="text" name="picSortList[]" data-options="prompt:'排序(升序)',min:1,editable:true,width:'90px',value:1"/>
</td>
<td>
<a href="javascript:void(0)" title="删除内容" onclick="reduceTrCommon(this,'videoadmin_addTemp_pic_tr','videoadmin_tempAdd_pic_table',1)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- 添加文字操作 -->
<tr>
<td width="96px">
添加文字
</td>
<td>
<table id="videoadmin_tempAdd_word_table" cellspacing='1'>
<thead>
<tr>
<td width="150px">主标题</td>
<td width="150px">副标题</td>
<td width="90px">时长(秒)</td>
<td width="90px">排序(升序)</td>
<!-- 文字内容 -->
<!-- <td width="90px"></td> -->
<td colspan='3' style='text-align:center'>
<a href="javascript:void(0)" title="添加内容" onclick="addTrCommon('word','videoadmin_addTemp_word_tr','videoadmin_tempAdd_word_table',1,4)" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
</td>
</tr>
</thead>
<tbody>
<tr class="videoadmin_addTemp_word_tr">
<td>
<input class="easyui-textbox" name='wordTitleList[]' data-options="width:'150px',required:true" value=""/>
</td>
<td>
<input class="easyui-textbox" name='wordSubTitleList[]' data-options="width:'150px',required:true" value=""/>
</td>
<!-- <td>
<input class="easyui-filebox" name="wordFileIdList[]" data-options="prompt:'请上传图片',required:true,width:'200px'"/>
</td> -->
<td>
<input class="easyui-numberspinner" type="text" name="wordDurationList[]" data-options="prompt:'时长(秒)',min:1,editable:true,width:'90px',value:1"/>
</td>
<td>
<input class="easyui-numberspinner" type="text" name="wordSortList[]" data-options="prompt:'排序(升序)',min:1,editable:true,width:'90px',value:1"/>
</td>
<td>
<a href="javascript:void(0)" title="删除内容" onclick="reduceTrCommon(this,'videoadmin_addTemp_word_tr','videoadmin_tempAdd_word_table',1)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</form>
<!-- 提交键 -->
<div style="margin-left:20px">
<a href="javascript:void(0)" onclick="getFormData()" class="easyui-linkbutton" iconCls="icon-filter" plain="true">获取表单值</a>
</div>
</body>
</html>
<script>
/**
* @todo 添加一行通用方法
* @param type 类型 music,pic,word 音乐/图片/文字
* @param table_tr_class 一行tr的class
* @param table_id 表格的ID
* @param max_length 最少添加的行数
* @param max_length 最多添加的行数
*/
function addTrCommon(type, table_tr_class, table_id, min_length, max_length){
var rendeClass = []; //需要渲染的class用数组保存
var length = $("."+table_tr_class).length;
if(length == max_length){
alert('最多添加 [ '+ max_length +' ] 条记录！');
return;
}
//tr拼接
var one_tr_add = '<tr class="'+table_tr_class+'">'+
'<td><input class="easyui-textbox vata_'+type+'_title" data-options="width:\'150px\',required:true" name="'+type+'TitleList[]" value=""/></td>'+
'<td><input class="easyui-textbox vata_'+type+'_sub_title" data-options="width:\'150px\',required:true" name="'+type+'SubTitleList[]" value=""/></td>';
rendeClass = ['vata_'+type+'_title', 'vata_'+type+'_sub_title'];
if( type=='music' || type == 'pic' ){ //音乐和图片都有文件上传
rendeClass.push('vata_'+type+'_file_id');
one_tr_add += '<td><input class="easyui-filebox vata_'+ type +'_file_id" name="'+type+'FileIdList[]" data-options="prompt:\'请上传音乐\',required:true,width:\'200px\'"/></td>';
}
if( type == 'music' ){
rendeClass.push('vata_'+type+'_speed');
one_tr_add += '<td><select class="easyui-combobox vata_'+type+'_speed" name="'+type+'SpeedList[]" data-options="required:true,panelHeight:\'auto\',editable:false,width:\'50px\'">';
for(var i=1;i<6;i++){
one_tr_add += '<option value="'+i+'">'+i+'</option>';
}
}
if( type=='pic' || type=='word' ){ //图片和文字都有时长和排序
rendeClass.push('vata_'+type+'_duration', 'vata_'+type+'_sort');
one_tr_add += '<td><input class="easyui-numberspinner vata_'+type+'_duration" type="text" name="'+type+'DurationList[]" data-options="prompt:\'时长(秒)\',min:1,editable:true,width:\'90px\',value:1"/></td>'+
'<td><input class="easyui-numberspinner vata_'+type+'_sort" type="text" name="'+type+'SortList[]" data-options="prompt:\'排序(升序)\',min:1,editable:true,width:\'90px\',value:1"/></td>';
}
//三个都有减号
rendeClass.push( 'vata_'+type+'_del');
one_tr_add += '<td><a href="javascript:void(0)" class="easyui-linkbutton vata_'+type+'_del" title="删除内容" onclick="reduceTrCommon(this,\''+table_tr_class+'\',\''+table_id+'\','+min_length+')" iconCls="icon-remove" plain="true"></a></td>'+
'</tr>';
//追加至表格后
$('#'+table_id).append(one_tr_add);
//渲染easyui最新一行输入框
for(x=0;x<rendeClass.length;x++){
$.parser.parse($('.'+rendeClass[x]).parent());
}
}
/**
*@todo 删除表格当前行
*@param r 当前对象
*@param class_tr 当前tr的class值
*@param table_id 当前表格的ID
*@param min_length 最少添加的记录数
*/
function reduceTrCommon(r, class_tr, table_id, min_length ){
min_length = min_length || -1;
if(min_length != -1){
var length = $("."+class_tr).length;
if(length == 1){
alert('请至少写入['+min_length+']条记录！');
return;
}
}
var i=r.parentNode.parentNode.rowIndex;
document.getElementById( table_id ).deleteRow(i);
}
//获取表单数据
function getFormData(){
//提交表单操作
var isValid = $('#form_id').form('validate');
if (!isValid) {
return false;
}
//MaskUtil.mask();
var formData = new FormData($( "#form_id" )[0]);
console.log(formData);
alert(formData);
$.ajax({
url: '/*/*/*',
data: formData,
dataType: 'json',
type: 'post',
async: false,
cache: false,
contentType: false,
processData: false,
success: function(result) {
if (result.status == 'success') {
//成功后关闭操作框并重新加载表格
//dialog('close');
//加载的是主[默认]页面大表格的id
//$('#easyuiTable_id').datagrid('reload'); //重新加载表格[主列表表格]
}
//MaskUtil.unmask();
alert(result.message);
}
});
}
</script>
619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
