easyUI在使用字符串拼接時樣式不起作用,點擊加號增加一行,點擊減號刪除一行效果。


拼接的按鈕沒有樣式,需要使用

var str = $("<a href='javascript:void(0)' class='easyui-linkbutton' onclick='delDeviceInfo(this)' style='margin-top:2px;height:25px;width:25px;color:#fff;border:none;background:#63B8FF'>-</a>").appendTo($(".deviceView"))
$.parser.parse(str);

在JavaScript中一些dom元素是動態拼接的,由於頁面實在加載完成后執行的js,頁面已經渲染完成,所以沒有加載到動態添加的組件的easui樣式,所以需要手動執行渲染某個部件或者整個頁面。

Parser(解析器)

 解析器是easy ui很重要的基礎組件,在easy ui中我們可以簡單的通過class定義一個組件,通過parser進行解析,從而達到很好的交互效果。

 parser會獲取全部在指定內定為為easy ui組件的class定義,而且依據后綴定義把當前節點解析渲染成特定的組件。

 $.parser.parse();      //解析EasyUI組件

附加:做如下的效果,點擊加號增加一行,點擊減號刪除一行。

代碼:

html:

<div>
	<table class='table' cellpadding="0" cellspacing="0" border="0" style='margin:0'>
		<tbody class='deviceView'>
			<tr class='firstChild'>
				<td width="114" class="labelName" style='color:red'>設備</td>
				<td width="280">
					<input type="hidden" id="" />
					<select id="" class="form-control input-sm">
						<option selected>GZGY-PB-CMNET-RT04-HX/NE5000E</option>
					</select>
				</td>
				<td  class="labelName" style='width:75px'>層級<span style='color:red;font-weight:normal;padding:0 5px;'>PM</span></td>
				<td class="labelName" style='color:red;min-width:25px!important;padding-left:0;'>模板</td>
				<td width="140">
					<select class="form-control input-sm">
						<option selected>PM通用模板</option>
						<option selected>PM通用模板</option>
						<option selected>PM通用模板</option>
					</select>
				</td>
				<td>
					<a href="javascript:void(0)" class="easyui-linkbutton " onclick="addDeviceInfo()" style="margin-top:2px;height:25px;width:25px;color:#fff;border:none;background:#63B8FF">+</a>
				</td>
			</tr>									
		</tbody>
	</table>
</div>

JS:

//新增設備,通過tr長度賦值id
function addDeviceInfo(){
	var i = $(".deviceView tr").length+1;
	var str = $("<tr data-id='"+($(".deviceView tr").length+1)+"' id='deviceInfo"+($(".deviceView tr").length+1)+"'><td width='104' style='font-weight:900;text-align: right;line-height: 31px;'>設備</td><td width='280'><input type='hidden'/><select id='device"+($(".deviceView tr").length+1)+"' class='deviceAdd easyui-combobox' style='width:280px'></select>"+
	"</td><td  class='labelName' style='width:75px'>層級<span style='text-align: left;color:red;font-weight:normal;padding:0 5px;display:inline-block;width:30px;' id='lev"+($(".deviceView tr").length+1)+"'></span></td><td width='40' style='line-height: 32px;font-weight:900;text-align: right;padding-left:0;'>模板</td>"+
	"<td width='140'><select id='temp"+($(".deviceView tr").length+1)+"' class='easyui-combobox tempAdd' style='width:140px'></select></td>"+
	"<td><a href='javascript:void(0)' class='easyui-linkbutton' onclick='delDeviceInfo(this)' style='margin-top:2px;height:25px;width:25px;color:#fff;border:none;background:#63B8FF'>-</a></td></tr>").appendTo($(".deviceView"));
	$.parser.parse(str);
	initDeviceList("device"+i);
	initTemp("temp"+i);
}
//刪除設備,找到按鈕的父親節點的父親節點,及tr,然后刪除
function delDeviceInfo(e){
	$(e).parent().parent().remove();
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM