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:

//新增设备
function addDeviceInfo(){
	var str = $("<tr><td width='114' class='labelName' style='color:red'>设备</td><td width='280'><input type='hidden'/><select 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='delDeviceInfo(this)' style='margin-top:2px;height:25px;width:25px;color:#fff;border:none;background:#63B8FF'>-</a></td></tr>").appendTo($(".deviceView"))
	$.parser.parse(str);
}
//删除设备
function delDeviceInfo(e){
	$(e).parent().parent().remove();
}

  

猜你喜欢

转载自www.cnblogs.com/wgl0126/p/9285258.html