应用场景:
ext的grid中row背景和字体颜色,需要通过读取数据库中配置的颜色来渲染grid。
模块结构:
已经有一个页面进行配置信息的CRUD了,数据库中存储的值形如:#99CCFF
这部分代码就不贴了。
曲折的第一步:
对了本文介绍的模块是基于Extjs3.2版
读取数据:
//获取的级别配置信息
var levelArry = null;
//获取配置数据
Ext.Ajax.request({
url:'warnlevel.do?method=queryWarnlevelssIsOpen&temp='+new Date(),
success: function(response,options){
levelArry = (Ext.decode(response.responseText));
},
failure: ''
});
/*
* 根据告警级别,获取该级别的配置信息
*/
function getLevelConfigObj(level_){
if(levelArry == null){
alert('告警配置数据为空');
return null;
}
var array = levelArry.wlInfo;
for(index in array){
if(array[index].warnLevel == level_){
return array[index];
}
}
return null;
}
/*
* 计算给定的时间比当前相差的天数;这是一个辅助函数 用于计算相差天数
*/
function getOverdueDays(oldDate){
var _dt = new Date();
var dt = Date.parseDate(oldDate.substr(0,10), "Y-m-d" );
return _dt.getDayOfYear() - dt.getDayOfYear();
}
//为GridPanel加载颜色,reporteventrid就是一个GridPanel,定义部分的代码就不贴,普通的grid
reporteventrid.getStore().on('load',function(s,records){
var girdcount=0;
s.each(function(r){
var levels = r.get('severity');
var _time = r.get('firstTime');//逾期时间
var obj = getWarnRowStyleConfig(levels );
if(obj!= undefined && obj != null){
var _trtt= reporteventrid.getView().getRow(girdcount);
if(obj.timeoutDays < getOverdueDays(_time)){
//_trtt.style.backgroundColor = obj.timeoutColor;
_trtt.style.color ="#ff0000";//obj.levelFontColor;
//_trtt.style.fontSize = 18+'pt';
}else{
_trtt.style.color ="#ffffff";//obj.levelFontColor;
//_trtt.style.fontSize = 18+'pt';
//_trtt.style.backgroundColor = obj.levelBgColor;
}
alert('backgroundColor:'+_trtt.style.backgroundColor+' fontStyle: '+_trtt.style.color);
}
girdcount=girdcount+1;
});
});
重点是这两句:
_trtt.style.backgroundColor = obj.timeoutColor;
_trtt.style.color ="#ff0000";//obj.levelFontColor;
_trtt 是一个html的tr元素(ext返回时这么说的:指定一个行索引,返回该行的<TR> HtmlElement);上面背景色设置好使,能起作用;但是第二局color字体颜色的设置 无能怎么整都不行,就此卡住了。 注意:俺的浏览器是IE8,FF3.5
上面这种渲染grid是通过循环grid的store数据行来实现的,另有一个弊端不得不说:点击列排序,颜色都没了。。。。
回到原点的解决方案:
ext grid标准的渲染方式是这样的:
css静态文件:
.mystyletest table{background: #ff0000;color: #FFFFFF;}
new Ext.grid.GridPanel({
viewConfig : {
forceFit : true,
getRowClass : function(record, rowIndex,rowParams, store) {
return :'mystyletest'; //style className
}}
.......
一开始我就否决了这种实现方式,很明显,这里的style都是预定义写死在css文件里面的,现在是从后台读取的 #FFFFFF,而js无法IO操作css去修改里面的颜色值吧?
通过Google的帮助,原来可以动态创建stylesheet,由js来创建stylesheet,这就解决了问题
下面这个就是初始化stylesheet的完整代码,渲染grid的时候自己获取className就很简单了
IE8,FF3.5测试通过
//获取级别配置信息
var levelArry = null;
/*
* 通过数据库数据 初始化Style
*/
function initWarnRowStyle(){
if(levelArry == null){
alert('告警配置数据为空');
return;
}
var styleFF = new Array();//FF兼容样式存储下来先
var winSheet = '';
var FFstyle = '';
if(document.all){
winSheet = document.createStyleSheet();
}else{
FFstyle = document.createElement('style');
FFstyle.type = 'text/css';
}
var array = levelArry.wlInfo;
for(index in array){
var aConfig = array[index]; //一条配置信息对象
var levelClassName = '.warn_'+aConfig.warnLevel;
if(aConfig.warnLevel != ''){
if(document.all){
if(winSheet == '') alert("严重错误请处理");
winSheet.addRule(levelClassName+' table','background:'+aConfig.levelBgColor+';color:'+aConfig.levelFontColor+';');
winSheet.addRule(levelClassName+'_timeout table','background:'+aConfig.timeoutColor+';color:'+aConfig.levelFontColor+';');
}else{
styleFF.push(levelClassName+" table{background:"+aConfig.levelBgColor+";color:"+aConfig.levelFontColor+";}");
styleFF.push(levelClassName+'_timeout table{background: '+aConfig.timeoutColor+';color: '+aConfig.levelFontColor+';}');
}
}
}
if(styleFF.length > 0){
FFstyle.innerHTML=styleFF.join(" ");
document.getElementsByTagName('HEAD').item(0).appendChild(FFstyle);
}
}
//获取配置数据
Ext.Ajax.request({
url:'warnlevel.do?method=queryWarnlevelssIsOpen&temp='+new Date(),
success: function(response,options){
levelArry = (Ext.decode(response.responseText));
initWarnRowStyle();//初始化告警StyleSheet
},
failure: ''
});
分享到:
相关推荐
本文实例讲述了JavaScript动态创建link标签到head里的方法。分享给大家供大家参考。具体分析如下: 相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签——link标签。这里我们就来说说如何在浏览器...
有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件。如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时。 静态外部 css 文件语法: @import url(style.css); 动态外部 css 文件...
js-dynamicCreationTable使用javascript动态创建表格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
javascript完全自学手册 目 录 第1篇 JavaScript基础篇 第1章 JavaScript简介 1 1.1 JavaScript概述 1 1.1.1 什么是JavaScript 1 1.1.2 JavaScript的基本特点 2 1.1.3 常用的Web开发语言 3 1.2 JavaScript的应用 4 ...
第1篇 JavaScript基础篇 第1章 JavaScript简介 1.1 JavaScript概述 1.1.1 什么是JavaScript 1.1.2 JavaScfipt的基本特点 1.1.3 常用的Web开发语言 1.2 JavaScript的应用 1.2.1 客户端应用 1.2.2 服务器...
javascript 动态生成css代码的两种方法 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中。但有些...
正在学习javascript 的朋友可以把它当作小练习动手做一做。加强自己的动手编码能力。 参考代码: 代码如下:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”><html><head><title...
2.createModule方法用于创建一个style样式表的标签,并且如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行style.styleSheet.cssText兼容IE添加style的样式内容。 <button id="demo">css文件</...
[动态添加css样式] <html> <head> [removed] [removed]=function(){ var head=document.getElementsByTagName('head')[0]; //获取到head元素 var link=document.createElement('link');...
用createElement方法创建CSS的Link标签 varhead=document.getElementsByTagName(‘HEAD’).item(0); varstyle=document.createElement(‘link’); style.href=’style.css’; style.rel=’stylesheet’;
动态载入 JavaScript/Csss 文件 传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在<head>标签里面进行添加: 代码... 现在用动态的方式载入JavaScript/Css文件: 用 DOM createElement 方法创建
有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中。 但有些兼容性问题我们需要解决。首先在符合w3c...
• 1.3.htm 调用外部JavaScript文件 • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值...
utilities React Native StyleSheet API的全类型钩子和实用程序函数npm i ESLint设置如果您使用的是插件,请将以下内容添加到.eslintrc.js : "react-hooks/exhaustive-deps" : [ "error" , { additionalHooks : "...
选择 更好地选择香草javascript中的小部件。 该代码故意非常简单,接近浏览器的默认值。 用法 < link rel =" stylesheet " href =" select.css " >...动态期权创建 本土化 allowClear 令牌分隔符 灵感 ( )
ModalForm 是一个 jQuery / Bootstrap 插件,它允许您创建动态模态«表单»,即可以使用 ajax 提交的带有 HTML 表单的模态。 客户端 首先,您需要添加以下 javascript 和 css 文件: < link rel =" stylesheet...
使用javascript轻松创建和操作CSSStyleDeclarations : import { StyleSheet } from 'sheetjs' ; // or const { StyleSheet } = window . sheetjs ; const styleSheet = new StyleSheet ( ) ; const s = ...
目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。 dTree可以不用添加任何页面而直接用代码实现多个栏目,并可以实现无限分级,下面...
Nfw.js仅使用JavaScript,HTML5和一些完善的软件设计模式。 入门 本简短指南将说明如何将静态HTML网页转换为动态Web应用程序。 用户界面 首先,创建一个包含Nfw.js和jQuery的静态网页index.html 。 此示例也使用...
列 迈克尔·艾森布劳恩(Michael Eisenbraun) ... 您只需要提供数据,剩下的就由Columns完成。 安装 包括jQuery Library 1.7或更高...由于列是动态创建所有必需HTML的,因此唯一需要HTML是一个空HTML元素,例如标记,并