EasyUi+jQuery动态添加删除行列表及角标自动排序功能

一个小功能，使用EasyUi+jQuery动态添加删除行列表及角标自动排序功能，比较简单，先上效果图：

具体代码实现：
页面：

<!DOCTYPE html>
<html>
<head>
	<!--easyui 相关资源引入 -->
	<meta http-equiv="Content-Type"  content="text/html;charset=utf-8"/>
	<link rel="stylesheet"  type="text/css" href="../themes/bootstrap/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="../themes/color.css"/>
 	<script type="text/javascript" src="../easyui/jquery.min.js"></script>
 	<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
</head>
<body>
	 <a href="javascript:void(0)"   onclick="spileAdd()" id="spileAdd" class="easyui-linkbutton" iconCls="icon-add"  style="margin-bottom: 20px">添加</a>
	<table style="width:40%">
		<tbody id="newRec">
		
		</tbody>
	</table>

<script type="text/javascript">
	$(function(){
		//Combobox初始化
		stressCombox();
	})
	
	var newflag = false;
	//动态添加combobox dom节点
	function spileAdd(){
		if(newflag){
			return false;
		}
		newflag = true;
		//获取下标
		var inIndex = $("#newRec").children().length+1;
		//行号
		var rowNum = $("#newRec").children().length;
		var trStr = '<tr index="'+rowNum+'" class="'+rowNum+'new">'
						+ '<td style="width:30%;" valign="middle"  nowrap="nowrap"> '
						+	'<p style="width:20px;float:left;line-hight:28px">'+inIndex+'、</p> <input style="width:80%;" name="detailList['+rowNum+'].name" class="stressCombox"/>'
						+ '</td>'
						+ '<td nowrap="nowrap" align="center" style="width:15%;">'
						+ '<a class="easyui-linkbutton" iconCls="icon-no"   href="javascript:void(0)"  onclick="newUpgradeDelete(this);">删除</a>'
						+ '</td></tr>';		
		$("#newRec").append(trStr);
		$.parser.parse($("#newRec"));
		
		//combobox初始化
		stressCombox();
		//下标排序
		sortIndex();
		newflag = false;
	}

	//combobox初始化
	var selectFlag = false;
	function stressCombox(){
		$(".combo").css("marginBottom","15px")
		$(".stressCombox").each(function(index){
			if($(this).attr("textboxname")){
				return true;
			}
			$(this).combobox({
				url : "",
				valueField : 'value',
				textField : 'value',
				width:300,
				editable : true,
				data : [{'label':'Java','value':'Java'},
							{'label':'Python','value':'Python'},
							{'label':'Android','value':'Android'},
							{'label':'JS','value':'JS'}
						  ],
				filter : function(q,row){
					var opts=$(this).combobox('options');
					return row[opts.textField].indexOf(q) >= 0;
				},
				onShowPanel : function(){
					selectFlag = true;
				},
				onChange : function(newVlaue,oldValue){
					//do somethings...
				},
				onSelect : function(q){
					//do somethings...
				}
			})
		})
	}

	//删除
	function newUpgradeDelete(obj){
		var index = $(obj).parent().parent().attr("index");
		$("#newRec tr:eq("+index+")").remove();
		//角标重新排序
		sortIndex();
	}
	
	//角标排序
	function sortIndex(){
		var trs = $("#newRec").children();
		trs.each(function (i){
			if($(this).attr('index')){
				$(this).attr('index',i);
				
				$(this).find("p").html(i+1+"、");
				var val;
				var temp = $(this).find('input');
				temp.each(function(){
					val = $(this).attr('name');
					if(val){
						val = val.replace(/detailList\[\d+\]/,'detailList['+i+']');
						$(this).attr('name',val);
					}
				})
			}
		})
	}
</script>
</body>
</html>

EasyUi+jQuery动态添加删除行列表及角标自动排序功能

EasyUi+jQuery动态添加删除行列表及角标自动排序功能

相关推荐