有个项目准备换个框架，研究了一周的dojo，东西是好，就是国内使用的人太少，奈何我英语水平有限，看不懂文档...所以转而研究easyui,字如其名，的确很easy，api非常详细。
老板说要让tree加载后让无权限的节点disabled状态,所以我在生成树的json里面加如了 "disabled"，
|
|
{ "id":11, "text":"搜索引擎", "state":"closed", "children":[{ "id":11, "text":"百度一下", "disabled":"false" } |
就像酱紫了，然后在easyui.css 新加了2个样式
|
|
.tree-title-disabled { font-size: 12px; display: inline-block; text-decoration: none; vertical-align: top; white-space: nowrap; padding:02px; height: 18px; line-height: 18px; color:#ccc;}.tree-file-disabled { background: url('images/tree_icons.png') no-repeat -256px0;} |
很明显，第一个就是字体是灰色，第二个就是换个图片而已
cc.push("<span class="tree-indent"></span>"); if(item.disabled=="false"){//设置节点不可选 cc.push("<span class="tree-icon tree-file tree-dnd-no "+(item.iconCls?item.iconCls:"")+""></span>"); } else{ cc.push("<span class="tree-icon tree-file "+(item.iconCls?item.iconCls:"")+""></span>"); }_1a2=true;}}if(opts.checkbox){if((!opts.onlyLeafCheck)||_1a2){cc.push("<span class="tree-checkbox tree-checkbox0"></span>");}} if(item.disabled=="false"){//设置节点不可选 cc.push("<span title='无权进行操作' class="tree-title-disabled">"+opts.formatter.call(_19d,item)+"</span>"); } else{ cc.push("<span class="tree-title">"+opts.formatter.call(_19d,item)+"</span>"); }cc.push("</div>"); |
然后就是对节点进行设置啦，item.disabled=="false"的时候就加载 -disabled样式,人性话一点呢，就在 <span>里面加个title,
最后呢就是前台选中节点的时候呢，如果disabled=="false"，返回false就可了
functionaddPanel(node) { if(node.disabled =="false") { returnfalse; } else{ if($(".easyui-tabs").tabs("exists", node.text + node.id)) { $(".easyui-tabs").tabs("select", node.text + node.id); } else{ index++; $('.easyui-tabs').tabs('add', { title: node.text + node.id, content:'<div id='+ index +"_"+ node.id +' style="padding:10px;'+ $("#easyui-tabs").width() + 'px; height:600px"><iframe src=' + node.url +' width="100%" height="100%" style="border:solid 0px"></iframe></div>', closable:true }); } } } |
呐，就是这样的，这呢还实现了，如果有打开的tab，在节点选择的时候呢，已经打开的tab就呈选中状态，而不是在重新打开一个tab，最后就是这个效果了
记下来，免得以后忘了，刚开始研究，不要喷我哈....