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();
}
easyUI在使用字符串拼接时样式不起作用,点击加号增加一行,点击减号删除一行效果。的更多相关文章
- [转]easyui常用控件及样式API中文收藏
[转]easyui常用控件及样式收藏 2013-05-06 23:01 30612人阅读 评论(0) 收藏 举报 分类: java ee(5) 目录(?)[+] CSS类定义: div easyu ...
- C# 字符串拼接性能探索 c#中+、string.Concat、string.Format、StringBuilder.Append四种方式进行字符串拼接时的性能
本文通过ANTS Memory Profiler工具探索c#中+.string.Concat.string.Format.StringBuilder.Append四种方式进行字符串拼接时的性能. 本文 ...
- C++在字符串前加一个L作用:
在字符串前加一个L作用: 如 L"我的字符串" 表示将ANSI字符串转换成unicode的字符串,就是每个字符占用两个字节. strlen("asd" ...
- css样式实现字体删除线效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- css样式表。作用是美化HTML网页.
样式表分为:(1)内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余多. 如:<p style="font-size:10px">内联样式表</p&g ...
- 在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了?
在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了? 在删除成功后,加上这句话就可以了:$("#dg").datagrid ...
- Angular中innerHTML标签的样式不起作用详解
1.背景 在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式: //HTML部分 <div class="contents" [inner ...
- 微信小程序子组件样式不起作用的解决办法
今天我在编写微信小程序项目时,发现父组件引用子组件过后,子组件的样式不起作用,在上网查了很多解决办法后,成功解决了这一问题. 解决办法: 1.在全局样式文件app.wxss中引入子组件的样式,如 @i ...
- vue点击切换样式,点击切换地址栏,点击显示或者隐藏
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
随机推荐
- 素数(Prime)
素数的判断: #include<math.h> bool IsPrime(int n) { ) return false; int sqr = (int)sqrt(1.0*n); ; i& ...
- CCPC2018秦皇岛游记
Day1 27号晚上8点多的火车. 然后..第二天(28号)6点40左右的样子到了天津(中转站) 然后一顿乱拍. 看到宝葫芦了没:) 然后.看到了狗不理包子铺...不过当时没开门,就溜了. 然后去秦皇 ...
- JavaScript中的XMLDOM对象
测试: demo.xml中的内容: js文件内容: window.onload=function(){ //var v=returnXMLDOM(); //v.loadXML('<root> ...
- HDU-1042-N!(Java大法好 && HDU大数水题)
N! Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) Total Subm ...
- python 学习笔记 12 -- 写一个脚本获取城市天气信息
近期在玩树莓派,前面写过一篇在树莓派上使用1602液晶显示屏,那么可以显示后最重要的就是显示什么的问题了. 最easy想到的就是显示时间啊,CPU利用率啊.IP地址之类的.那么我认为呢,假设可以显示当 ...
- 24岁菜鸟,能一个人撑起App开发吗
"疲惫吾心.怎样躲藏.四处荒芜,怎话忧伤?"临近中秋,看到艾瑞斯的QQ签名,无尽的伤感.这个年仅24的青年.连续3年没有回家了,近期一个月总是失眠,没有家人的陪伴,就连女朋友 ...
- 【C++】String类中的运算符重载
模块化设计: 头文件: <span style="font-size:18px;"> #ifndef operator_operator_h #define opera ...
- php匿名函数和可变参数函数
php匿名函数和可变参数函数 简介 直接上代码了: <?php $test1 = function($value) { echo $value; }; $test1('HelloWorld'); ...
- category的概念
category 的意思应该是为基类添加一个子类的声明方法 可以在创建基类对象的时候访问到子类的对象方法 category 可以说是 类的扩展 也可以说是 将类分成了几个模块 需要注意的是 在cate ...
- String or binary data would be truncated 异常解决办法 .
原因:一般出现这个问题是因为数据库中的某个字段的长度小,而插入数据大解决:修改表结构,使表字段大小相同或大于要插入的数据