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(); }