拼接的按钮没有样式,需要使用

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

 

easyUI在使用字符串拼接时样式不起作用,点击加号增加一行,点击减号删除一行效果。的更多相关文章

  1. [转]easyui常用控件及样式API中文收藏

    [转]easyui常用控件及样式收藏 2013-05-06 23:01 30612人阅读 评论(0) 收藏 举报  分类: java ee(5)  目录(?)[+] CSS类定义: div easyu ...

  2. C# 字符串拼接性能探索 c#中+、string.Concat、string.Format、StringBuilder.Append四种方式进行字符串拼接时的性能

    本文通过ANTS Memory Profiler工具探索c#中+.string.Concat.string.Format.StringBuilder.Append四种方式进行字符串拼接时的性能. 本文 ...

  3. C++在字符串前加一个L作用:

    在字符串前加一个L作用:    如 L"我的字符串" 表示将ANSI字符串转换成unicode的字符串,就是每个字符占用两个字节.    strlen("asd" ...

  4. css样式实现字体删除线效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. css样式表。作用是美化HTML网页.

    样式表分为:(1)内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余多. 如:<p style="font-size:10px">内联样式表</p&g ...

  6. 在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了?

    在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了? 在删除成功后,加上这句话就可以了:$("#dg").datagrid ...

  7. Angular中innerHTML标签的样式不起作用详解

    1.背景 在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式: //HTML部分 <div class="contents" [inner ...

  8. 微信小程序子组件样式不起作用的解决办法

    今天我在编写微信小程序项目时,发现父组件引用子组件过后,子组件的样式不起作用,在上网查了很多解决办法后,成功解决了这一问题. 解决办法: 1.在全局样式文件app.wxss中引入子组件的样式,如 @i ...

  9. vue点击切换样式,点击切换地址栏,点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

随机推荐

  1. Python笔记7----Pandas中变长字典Series

    1.Series概念 类似一维数组的对象,由数据和索引组成 2.Series创建 用Series()函数创建,0,1,2为series结构自带的索引. 可以自己指定索引值,用index,也可以直接用字 ...

  2. Asp 6种页面转向方法

    asp.net 页面转向方法其实就是两种 服务器端转向和客户端转向 客户端转向实质上是指由浏览器直接向服务器端重新发送一个请求. 而服务器端转向是指服务器内部进行页面的跳转. 服务器端转向和客户端转向 ...

  3. AES ECB PKCS5/PKCS7 加解密 python实现 支持中文

    目录 ECB模式介绍 pkcs5padding和pkcs7padding的区别 python实现 注意事项 ECB模式介绍 电码本模式(Electronic Codebook Book (ECB) 这 ...

  4. vue-cli3.0 搭建项目

    1.首先我们先在安装好node   node用于npm安装[自行百度] 2.全局安装vue 通过npm命令安装vue.js 在用vue.js在用于构建大型的应用时推荐使用npm安装,npm能很好的和w ...

  5. 使用gson进行数据(集合数据)的转换 并且返回给前端 进行动态解析 并添加

    后台使用gson转换工具把list集合数据 以json字符串的方式返回给前台 解压: 加入到工程中 前台页面进行数据解析时  需要把得到的字符串  转换为object数组 -------------- ...

  6. CF409C Magnum Opus

    CF409C Magnum Opus 题意翻译 题目背景 愚人节题目,题面似乎是一位名叫Nicolas Flamel的炼金术士用拉丁文写的某种物质的配方,结合谷歌尝试翻译了一下: 吾友: 哲人石所言不 ...

  7. Android获取图片实际大小兼容平板电脑

    项目中有个图片在平板电脑中显示特别小的原因.一直苦于没找到原因,也没有平板电脑測试,今天找了个改动分辨率的,编写相关方法最终处理了,记录下比較: 好让以后不造轮子. 主要是获取文章相关图片显示问题.直 ...

  8. 剑指Offer面试题33(java版):把数组排成最小的数

    题目:输入一个正整数数组.把数组里面全部的数字拼接排成一个数,打印能拼接出的全部数字中的一个.比如输入数组{3,32.321}.则打印出这3个数字能排成的最小数字321323. 这个题目最直接的做法应 ...

  9. [BZOJ 3884][欧拉定理]上帝与集合的正确使用方法

    看看我们机房某畸形写的题解:http://blog.csdn.net/sinat_27410769/article/details/46754209 此题为popoQQQ神犇所出,在此orz #inc ...

  10. 精简Linux文件路径

    精简Linux的文件路径: ..回退的功能 .留在当前文件夹 //仅仅保留一个/ abc/..要返回. 报错 删除最后一个/ 主要思路: 用栈记录路径的起始位置,讨论/后的不同情况就可以: #incl ...