二、
//需要添加的組件jsp代碼
var addHtml = '<div class="col100" id="updateContent">修改內容:</div>'
+'<div class="col300" id="Combobox"><input style="width: 300px;" id="content" class="combobox"'
+'data-options="required: true,editable:false" ></div>';
//用jquery添加到id爲moveCombo的最後邊
$('#DIVCombo').append(addHtml);
//利用解析器重新解析
$.parser.parse($('#Combobox').parent());
三、
<!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>