bootstrapTable 树形表格

欢迎大家加入qq群一起讨论学习： layui交流群：795477608 web前端交流群：799260442

HTML: <table id="table_list"></table>

JS:

      $('#table_list').bootstrapTable({
     
	    method: "POST",
	    contentType: "application/x-www-form-urlencoded",            
             url:" ",
       	     queryParams: queryParams,    	
             columns: [
             {
		field: '',
		title: '',
		align: 'left',
		width:'40px',
		formatter: function(value, row, index) {
				console.log('row.ID', row.ID)
				if(row.countNum == 0){
					return "<span class='expander' style='width:40px; display: inline-block; font-weight:bold;font-size:18px;cursor:pointer;'></span>";
				}else{
					return "<span class='expander' style='width:40px; display: inline-block; font-weight:bold;font-size:18px;cursor:pointer;'>+</span>"
				}
			}
		  },{
		        title: "机构名称",
		        field: "COMSTRU_NAME"
		    },{
		        title: "机构编码",
		        align: "center",
		        field: "COMSTRU_CODE"
		    },{
		        title: "机构类型",
		        align: "center",
		        field: "COMSTRU_TYPE"
		    },{
		        title: "是否虚拟",
		        align: "center",
		        field: "VIRTUAL_FLAG"

		    },{`
		        title: "操作",
		        align: "center",
		        field: "empty",
                formatter: function (value, row, index) {
                	var operateHtml ='';
                	operateHtml = operateHtml + '<button class="btn btn-link" type="button" onclick="add(\''+row.COMSTRU_CODE+'\','+row.ORG_LVL+',\''+row.COMSTRU_TYPE+'\',\''+row.ID+'\')">添加</button> &nbsp;';
                	
                	operateHtml =operateHtml+'<button class="btn btn-link" type="button" onclick="edit(\''+row.ID+'\')">编辑</button> &nbsp;';
                	operateHtml = operateHtml + '<button class="btn btn-link text-danger" type="button" onclick="del(\''+row.ID+'\')">删除</button> ';
                    return operateHtml;
                }
		    }
        ],
        onLoadSuccess:function(data){
      	//一进页面自动点击获取二级元素
            $(".expander").trigger("click");
        },
    });
   
   
};
// 展示表格
showTable() ;

//点击展开子节点
expanderTree();

 function expanderTree(){
	// 点击+号 展开子节点
     $("#table_list").off("click").on("click",".expander",function(){
         xuzhen.call(this);
         //alert(11)
     });
};
function xuzhen(){
    $this = $(this);
    //console.log('this', $this.parent().parent())
    var treeId = ''
    if (!($this.parent().parent().data("uniqueid"))) {
    	treeId = 1
    } else {
    	 treeId = $this.parent().parent().data("uniqueid")
    }
    var classParent = $this.parent().parent().attr("id");
    console.log('$this', 'treeId',treeId, classParent)
    if(!classParent){
        classParent = "treegrid-" + treeId;
    }
    var _level = classParent.split("-").length - 1; //计算是第几级节点，最外层的父级是0，第一级子节点是1，以此类推
    console.log('_level', _level)
    var expandFlag = $this.text();
    //console.log('expandFlag', expandFlag)
    if(expandFlag == "+"){
        $this.text("-");  //父节点展开后，小图标由 + 变成 -
    }else{
        $this.text("+");
        $("[id^='"+ classParent +"-']").remove();	//收缩起父节点的时候，把所对应的子节点都移除掉
        return false;
    }
    //alert(treeId)
	//根据父节点的id去请求子节点，然后在追加到父节点的后面
	$.ajax({
    		   type: "POST",
    		   dataType: "json",
    		   data: { id:treeId },
    		   url: "${baseCxt}/mdmorg/getOrgListByPid",
    		   success: function(msg){
   	    			var data = msg.rows
   	    			console.log('子节点',  data)
   	    			data.forEach(function(item){
		                var str = "";
		                str += '<tr id="'+ classParent +'-' + item.ID +'" data-index="0" data-uniqueid="'+ item.ID +'">';
		                str += '<td style="text-align: left;">';
		                if(item.countNum == 0){
		                	str += "<span class='expander' style='font-weight:bold; width:40px; display: inline-block;font-size:18px;cursor:pointer;margin-left:"+ _level*20 +"px'></span>";		                    
		                }else{
		                    str += "<span class='expander' style='font-weight:bold;width:40px; display: inline-block; font-size:18px;cursor:pointer;margin-left:"+ _level*20 +"px'>+</span>";
		                }
		                str += '</td>';
		                //console.log('_level*20', _level*20)
		                str += '<td style="padding-left: '+_level*20+'px">'+ item.COMSTRU_NAME +'</td>';
		                str += '<td style="text-align: center;">'+ item.COMSTRU_CODE +'</td>';
		                str += '<td style="text-align: center;">'+ item.COMSTRU_TYPE +'</td>';
		                str += '<td style="text-align: center;">'+ item.VIRTUAL_FLAG +'</td>';
		                str += '<td style="text-align: center;"><button class="btn btn-link" type="button" onclick="add(\''+item.COMSTRU_CODE+'\','+item.ORG_LVL+',\''+item.COMSTRU_TYPE+'\',\''+item.ID+'\')">添加</button> &nbsp;<button class="btn btn-link" type="button" onclick="edit(\''+item.ID+'\')">编辑</button> &nbsp;<button class="btn btn-link text-danger" type="button" onclick="del(\''+item.ID+'\')">删除</button></td>';
		                $this.parent().parent().after(str);
		            })
    		   }
    	});
    	

}


//参数
function queryParams(params) {
      var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
         id: 0
      };
      return temp;
  };
//点击表格右侧的添加按钮
function add(comstruCode,orgLvl,comstruType,id){
	if(orgLvl==3){
		alert("三级公司不能添加组织机构或部门！");
	}else if(comstruType=="部门"){
		alert("部门下不能再添加机构或部门！");
	}else{	
    	orgLvl=orgLvl+1;
    	window.parent.layer.open({
    	      type: 2,
    	      title: '添加组织机构',
    	      shadeClose: true,
    	      shade: false,
    	      area: ['1000px', '600px'],
    	      content: '${baseCxt}/org/add1?pCode='+comstruCode+"&orgLvl="+orgLvl+"&pId="+id+"&comstruType="+comstruType,
    	      end: function(index){
 	    			$('#table_list').bootstrapTable("refresh"); 
   	    			layer.close(index);
   	    	  }
    	});

	}
}
//点击表格右侧的 编辑 按钮
function edit(id){
	layer.open({
	      type: 2,
	      title: '组织机构修改',
	      shadeClose: true,
	      shade: false,
	      area: ['503px', '400px'],
   	      content: '${baseCxt}/org/openEdit?orgId='+id,
	      end: function(index){
   	    			$('#table_list').bootstrapTable("refresh"); 
   	    			layer.close(index);
    	  }
	    });
}
//点击表格右侧的 删除 按钮
function del(id){
	layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
		$.ajax({
    		   type: "POST",
    		   dataType: "json",
    		   data: { orgId: id },
    		   url: "${baseCxt}/org/delete",
    		   success: function(msg){
   	    			layer.msg(msg.message, {time: 500},function(){	 
	   	    			$('#table_list').bootstrapTable("refresh"); 
	   	    			layer.close(index);
   					});
    		   }
    	});
	});
}