easyui tree节点设置disabled的功能

有个项目准备换个框架，研究了一周的dojo，东西是好，就是国内使用的人太少，奈何我英语水平有限，看不懂文档...所以转而研究easyui,字如其名，的确很easy，api非常详细。

    老板说要让tree加载后让无权限的节点disabled状态,所以我在生成树的json里面加如了 "disabled"，

{          "id" : 11 ,          "text" : "搜索引擎" ,          "state" : "closed" ,          "children" :[{              "id" : 11 ,              "url" : "http://www.baidu.com" ,              "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: 0 2px;    height: 18px;    line-height: 18px;    color:#ccc; } .tree-file-disabled {    background: url( 'images/tree_icons.png' ) no-repeat -256px 0 ; }

很明显，第一个就是字体是灰色，第二个就是换个图片而已

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就可了

function addPanel(node) {              if (node.disabled == "false" ) {                  return false ;              }              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;width:' + $("#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，最后就是这个效果了

记下来，免得以后忘了，刚开始研究，不要喷我哈....

转载于:https://www.cnblogs.com/ff-king/p/3876813.html