最近在一个项目中需要对一个树中某些节点的颜色需要加粗展示。
<r:treeNode ...... onRefreshFunc="appendStar" > </r:treeNode>
失败:
直接在方法appendStar中使用<b></b>将返回值包含
function appendStar(catalog){
if(catalog.getProperty("id")==... ...){
catalog.setText("<b>" + catalog.getProperty("id") + "</b>");
}
... ...
}
结果在树上可以正确加粗,但是在点击该节点的时候,出现只能在该节点偏上的位置可以点击,其他地方点击无效。
后来换成其他的div,span等等进行替换,结果一样比较凄惨。
后查看了rTree.js源码后,发现可以通过修改样式表进行修改
成功:
1.外部定义样式 .RC_TREE_ACTIVENODE_RED {font-weight:bold;}
2.修改修改显示值函数
function appendStar(catalog){
if(catalog.getProperty("id")==... ...){
catalog.setText(catalog.getProperty("id"));
}
catalog.cell.className = "RC_TREE_CELL RC_TREE_ACTIVENODE_RED";
}
3.在js外部定义全局变量用于记住是点击的上一个选中节点
var clicknode;
4.在点击函数中
function clickNodeFun(catalog){
if(clicknode!=null && typeof(clicknode)!='undefined' && clicknode != 'undefined'){
if(clicknode.getProperty("id")==... ...){
clicknode.cell.className = "RC_TREE_CELL RC_TREE_ACTIVENODE_RED";
}
}
if(catalog.getProperty("id")==... ...){
catalog.cell.className = "RC_TREE_ACTIVENODE RC_TREE_ACTIVENODE_RED";
}
clicknode = catalog;
}
<r:treeNode ...... onRefreshFunc="appendStar" > </r:treeNode>
失败:
直接在方法appendStar中使用<b></b>将返回值包含
function appendStar(catalog){
if(catalog.getProperty("id")==... ...){
catalog.setText("<b>" + catalog.getProperty("id") + "</b>");
}
... ...
}
结果在树上可以正确加粗,但是在点击该节点的时候,出现只能在该节点偏上的位置可以点击,其他地方点击无效。
后来换成其他的div,span等等进行替换,结果一样比较凄惨。
后查看了rTree.js源码后,发现可以通过修改样式表进行修改
成功:
1.外部定义样式 .RC_TREE_ACTIVENODE_RED {font-weight:bold;}
2.修改修改显示值函数
function appendStar(catalog){
if(catalog.getProperty("id")==... ...){
catalog.setText(catalog.getProperty("id"));
}
catalog.cell.className = "RC_TREE_CELL RC_TREE_ACTIVENODE_RED";
}
3.在js外部定义全局变量用于记住是点击的上一个选中节点
var clicknode;
4.在点击函数中
function clickNodeFun(catalog){
if(clicknode!=null && typeof(clicknode)!='undefined' && clicknode != 'undefined'){
if(clicknode.getProperty("id")==... ...){
clicknode.cell.className = "RC_TREE_CELL RC_TREE_ACTIVENODE_RED";
}
}
if(catalog.getProperty("id")==... ...){
catalog.cell.className = "RC_TREE_ACTIVENODE RC_TREE_ACTIVENODE_RED";
}
clicknode = catalog;
}