treeGrid 树网格 --jQuery

css代码

/**** treeGrid 样式 --start ****/
.treeGrid_header li,.treeGrid_main li {
  list-style: none;
  height:25px;
}
.treeGrid_header li span,.treeGrid_header b,.treeGrid_main li b {
  display: inline-block;
  height:25px;
  line-height: 25px;
  vertical-align: middle;
}
.treeGrid_header b,.treeGrid_main b {
  width:25px;
}
.treeGrid_main b.ope {
  background: url(./images/treeClose.png) no-repeat ;
  background-position: center;
  background-size: cover;
  cursor:pointer;
}
.treeGrid_main b.cls {
  background: url(./images/treeOpen.png) no-repeat ;
  background-position: center;
  background-size: cover;
  cursor:pointer;
}
.treeGrid_main ul.close {
  height: 0;
}
.treeGrid_main ul > ul {
  overflow: hidden;
  transition: height 0.3s;
}
.treeGrid_header {
  position:absolute;
  top:0;
  left:0;
  height:26px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  width: 100%;
  background-color: #f1f1f1;
}
.treeGrid_header span,.treeGrid_main span {
  display: inline-block;
  height: 25px;
  line-height: 25px;
  vertical-align: middle;
  padding-left: 3px;
  border-right:1px solid #fff;
  box-sizing: border-box;
}
.treeGrid_main b.num_list,.treeGrid_header b.num_list {
  line-height: 25px;
  text-align: center;
  color:#000;
  font-weight: 400;
  background: transparent linear-gradient(to bottom,#f9f9f9 0px,#efefef 100%) repeat-x scroll 0 0;
  border-color: #fff;
  border-width:0 1px 0 0;
  border-style: solid;
  box-sizing: border-box;
  font-size: 12px;
}
.treeGrid_main {
  position:absolute;
  left:0;
  top:26px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 28px);
  height: -moz-calc(100% - 28px);
  overflow:scroll;
  -webkit-scrolling:trouch;
}
.treeGrid_main li:hover {
  background-color: #e5ccf5;
}
.treeGrid_main li img {
  height:22px;
  vertical-align: middle;
}
.treeGrid_main b.icon {
  height:20px;
  width:20px;
  margin:2px;
  background: url(./images/icon_20.png) no-repeat;
}
.treeGrid_main b.icon_0 {
  background-position: 0px -39px;
}
.treeGrid_main b.icon_1 {
  background-position: -20px -39px;
}
.treeGrid_main b.icon_2 {
  background-position: -39px -39px;
}
.treeGrid_main b.icon_3 {
  background-position: -59px -39px;
}
.treeGrid_main b.icon_4 {
  background-position: -78px -39px;
}
.treeGrid_main b.icon_5 {
  background-position: -98px -39px;
}
/**** treeGrid 样式 --end ****/

js 代码

//基于jQuery
$.fn.extend({
  perfectEleTree: function (obj) {
    obj.id = $(this).attr(\"id\");
    perfectEleTree(obj);
  }
});
$.extend({
  perfectEleTree: function (obj) {
    perfectEleTree(obj);
  }
});
//生成树形结构
function perfectEleTree(obj){
 //生成树形结构并放入页面盒子--objz(数据结构)、true(根节点都有子节点)、true(需要创建表头)
  var dom = creatEleTreeGrid(obj,true,true)+ \"</div>\";
  $(\"#\"+obj.id).html(dom);
  //确定高度
  $(\"#\"+obj.id).find(\'ul.open\').each(function(){
    $(this).height($(this).height());
  });
  //确定高度
  $(\".treeGrid_main li\").each(function(index){
    $(this).children(\".num_list\").html(index+1);
  });
//切换展示和隐藏功能
  $(\"#\"+obj.id).on(\"click\",\"b.cls,b.ope\",function(){
    speedEleTree(this);
  });
}
/**
 * 递归数据-生成html结构
 * @param  {[type]} obj  [数据对象]
 * @param  {[type]} flag [判断是否有子节点]
 * @param  {[type]} tog  [判断是否需要创建表头]
 * @return {[type]}      [返回html结构字符串]
 */
function creatEleTreeGrid(obj,flag,tog){
  var html =\"\",
      data = obj.data,
      culmn = obj.culmn,
      pIdW = $(\"#\"+obj.id).width();
  if(flag){
    html +=  \"<ul class=\'open\'>\";
  }else{
    html +=  \"<ul class=\'close\'>\";
  }
  for(let i=0,l=data.length;i<l;i++){
    var cl = \"\",
        num = data[i].lev,
        w = 24,
        bgIcon=\"icon icon_\"+num,
        str_b=\"\"
        wH = 0;//--H
    //判断初始状态展开或关闭
    if(data[i].open){
      cl = \'ope\';
    }else{
      cl = \'cls\';
    }
    if(obj.number == undefined || obj.number){
      str_b = \"<b class=\'num_list\'></b>\";
      wH = 25;
    }
    //创建列表抬头--开始
    if(tog){
      doms = \"<div class=\'treeGrid_header\'><ul><li>\"+str_b;
    }
    //创建li数列并添加标识和层级
    html += \"<li lev=\'\"+num+\"\'>\"+str_b;
    //根据层级创建空格
    for(let j=0;j<num;j++){
      w += 25;
      html += \'<b></b>\';
    }
    //判断是否有子节点--添加点击图标
    if(data[i].children.length > 0){
      w += 25;
      html += \"<b class=\'\"+cl+\"\'></b>\";
    }else{
      w += 25;
      html += \"<b></b>\";
    }
    //循环添加数据
    for(let j=0,l=culmn.length;j<l;j++){
      //完善--列表抬头
      if(tog){
        $(\"#\"+obj.id).css({\"position\":\"relative\",height:\"100%\"});
        //处理culmn中width的数据
        if((culmn[j].width+\"\").indexOf(\"0.\") !== -1 && (culmn[j].width+\"\").indexOf(\"0.\") === 0){
          culmn[j].width =  pIdW* Number(culmn[j].width);
        }
        //判断处理 -- 第一列和最后一列的宽度
        if(j === 0){
          culmn[0].width -= wH;
        }else if(j === culmn.length-1){
          culmn[j].width -= 1;
        }
        doms += \"<span style=\'width:\"+culmn[j].width+\"px\'>\"+culmn[j]. +\"</span>\";
      }
      if(j === 0){
        //添加数据
        html += \"<b class=\'\"+bgIcon+\"\'></b><span style=\'width:\"+(culmn[0].width-w)+\"px\'>\"+data[i].name+\"</span>\";
      }else{
        var str = data[i][culmn[j].field]==undefined?\"\":data[i][culmn[j].field];
        html += \"<span style=\'width:\"+culmn[j].width+\"px\'>\"+str+\"</span>\";
      }
    }
    html += \"</li>\";
    //拼接列表抬头和主体--拼接字符串
    if(tog){
      doms += \"</li></ul></div><div class=\'treeGrid_main\'>\";
      html = doms + html;
    }
    //判断是否有子节点--递归数据
    if(data[i].children.length > 0){
      obj.data = data[i].children;
      var htm = creatEleTreeGrid(obj,data[i].open,false);
      html += htm;
    }
  }
  html += \"</ul>\";
  //返回拼接好的HTML结构字符串
  return html;
}
//切换时高度变化过度效果
function speedEleTree(_this){
  var h = 0,
  flag = $(_this).hasClass(\"cls\"),
  self = $(_this).parent().next(\"ul\");
  if(flag){
    $(_this).removeClass(\"cls\").addClass(\"ope\");
    self.children().each(function(){
      h += $(this).height();
    });
    self.height(h);
  }else{
    $(_this).removeClass(\"ope\").addClass(\"cls\");
    h = self.height();
    self.height(0);
  }
  speedEleUlTree(self,h,flag);
}
//递归改变相关联的ul高度
function speedEleUlTree(self,h,flag){
    if(self.prev().siblings().length != 0){
      var pId = self.parent(),
          he = pId.height();
      if(flag){
        pId.height(he+h);
      }else{
        pId.height(he-h);
      }
      speedEleUlTree(pId,h,flag)
    }
}