JQ树形菜单加表格混合使用:treeTable组件使用

前端:

 <div class="demo-side" style="margin-top: 50px">
        <table id="demoTreeTb"></table>
    </div>

js:

<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<link href="__STATIC__/layui_2.5.5/css/layui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="__STATIC__/layui_2.5.5/layui.all.js"></script>
<script>
    layui.config({
   
        base: '/Public/static/layui_2.5.5/'   //这里是treeTable.js 的目录 例如我的treeTable.js放在这个目录下
    }).use(['treeTable'], function () {
   
        var $ = layui.jquery;
        var treeTable = layui.treeTable;
        $('body').removeClass('layui-hide');

        // 渲染表格
        treeTable.render({
   
            elem: '#demoTreeTb',
            url: 'menus',
            toolbar: true,
            tree: {
   
                iconIndex: 2,
                isPidData: true,
                idName: 'id',  //菜单的id名
                pidName: 'parent_id', //父id 字段名
                arrowType: 'arrow2',
                getIcon: 'ew-tree-icon-style2'
            },
            cols: [[
                {
   type: 'numbers',width:50},
                {
   type: 'checkbox'},
                {
   field: 'cate_name', title: '分类名称', minWidth: 65},

                {
   field: 'remark', title: '备注'},

                {
   field: 'add_time', title: '创建时间'},
                {
   align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
            ]],
            style: 'margin-top:0;'
        });

        // 工具列点击事件
        treeTable.on('tool(demoTreeTb)', function (obj) {
   
            var event = obj.event;
            var id = obj.data.id;
            if (event === 'del') {
   
                $.ajax({
   
                    url: "del_cate_menu_data",    //后台数据请求地址
                    type: "post",
                    data:{
   id:id},
                    async: false,
                    success: function (result) {
   
                        if(result == 'success'){
   
                            layer.msg('删除成功');
                            obj.del();
                        }

                    }
                });

            } else if (event === 'edit') {
   
                layer.open({
   
                    title:'编辑',
                    type: 2,
                    // shadeClose: true, //点击遮罩关闭层
                    area: ['400px', '450px'],
                    content: "goods_class_info?id="+id,

                    success:function (layero, index) {
   

                        // layer.close(layer.index)


                        // layer.close(layer.index)
                        // layer.msg('修改成功');
                        // obj.update({cate_name: '新的名称'});
                    },
                    cancel: function(index, layero){
   
                        location.reload()
                    }
                });


                //




            }
        });

    });
</script>

后端接口样式:
搞一个json 字符串即可,需要条数count和data数据. open=true 自动展开
data里面带一个open字段 才能自动展开

public function menus(){
   
        $res = D('StoreCate')
            ->field('id,cate_name,parent_id,remark,add_time,spread as open')
            ->select();
        echo json_encode(
                [
                'code'=>0,
                'msg'=>'',
                'count'=>D('StoreCate')->count(),
                'data'=>$res
                ]
        );exit;


    }

treeTable.js

/** 树形表格3.x Created by wangfan on 2020-05-12 https://gitee.com/whvse/treetable-lay */
layui.define(["laytpl","form","util"],function(s){
   var g=layui.jquery;var d=layui.laytpl;var c=layui.form;var b=layui.util;var o=layui.device();var h="treeTable";var k={
   };var e={
   elem:undefined,cols:undefined,url:undefined,method:undefined,where:undefined,contentType:undefined,headers:undefined,parseData:undefined,request:{
   pidName:"pid"},toolbar:undefined,defaultToolbar:undefined,width:undefined,height:undefined,cellMinWidth:90,done:undefined,data:undefined,title:undefined,skin:undefined,even:undefined,size:undefined,text:{
   none:"无数据"},reqData:undefined,useAdmin:false,tree:{
   idName:"id",pidName:"pid",childName:"children",haveChildName:"haveChild",openName:"open",iconIndex:0,arrowType:undefined,onlyIconControl:undefined,getIcon:function(u){
   var t=u[this.haveChildName];if(t!==undefined){
   t=t===true||t==="true"}else{
   if(u[this.childName]){
   t=u[this.childName].length>0}}if(t){
   return'<i class="ew-tree-icon layui-icon layui-icon-layer"></i>'}else{
   return'<i class="ew-tree-icon layui-icon layui-icon-file"></i>'}}}};var r={
   field:undefined,title:undefined,width:undefined,minWidth:undefined,type:"normal",fixed:undefined,hide:undefined,unresize:undefined,style:undefined,align:undefined,colspan:undefined,rowspan:undefined,templet:undefined,toolbar:undefined,"class":undefined,singleLine:undefined};var p=function(t){
   k[t.elem.substring(1)]=this;this.reload(t)};p.prototype.initOptions=function(t){
   var D=this;function B(J){
   if(!J.INIT_OK){
   J=g.extend({
   INIT_OK:true},r,J)}if(J.type==="space"){
   if(!J.width){
   J.width=15}J.minWidth=J.width}else{
   if(J.type==="numbers"){
   if(!J.width){
   J.width=40}J.minWidth=J.width;if(!J.singleLine){
   J.singleLine=false}if(!J.unresize){
   J.unresize=true}if(!J.align){
   J.align="center"}}else{
   if(J.type==="checkbox"||J.type==="radio"){
   if(!J.width){
   J.width=48}J.minWidth=J.width;if(!J.singleLine){
   J.singleLine=false}if(!J.unresize){
   J.unresize=true}if(!J.align){
   J.align="center"}}}}if(J.toolbar){
   J.type="tool"}return J}if("Array"!==l(t.cols[0])){
   t.cols=[t.cols]}for(var w=0;w<t.cols.length;w++){
   for(var u=0;u<t.cols[w].length;u++){
   t.cols[w][u].INIT_OK=undefined;t.cols[w][u].key=undefined;t.cols[w][u].colGroup=undefined;t.cols[w][u].HAS_PARENT=undefined;t.cols[w][u].parentKey=undefined;t.cols[w][u].PARENT_COL_INDEX=undefined}}var F=[],G=0;for(var y=0;y<t.cols.length;y++){
   var C=t.cols[y];for(var x=0;x<C.length;x++){
   var A=C[x];if(!A){
   C.splice(x,1);continue}A=B(A);A.key=y+"-"+x;var I=undefined;if(A.colGroup||A.colspan>1){
   A.colGroup=true;A.type="group";I=[];G++;var z=0;for(var v=0;v<t.cols[y+1].length;v++){
   var H=g.extend({
   INIT_OK:true},r,t.cols[y+1][v]);if(H.HAS_PARENT||(z>1&&z==A.colspan)){
   t.cols[y+1][v]=H;continue}H.HAS_PARENT=true;H.parentKey=y+"-"+x;H.key=(y+1)+"-"+v;H.PARENT_COL_INDEX=G;H=B(H);I.push(H);z=z+parseInt(H.colspan>1?H.colspan:1);t.cols[y+1][v]=H}}A.CHILD_COLS=I;if(!A.PARENT_COL_INDEX){
   F.push(A)}t.cols[y][x]=A}}this.options=g.extend(true,{
   },e,t);this.options.colArrays=F;if(this.options.url){
   this.options.reqData=function(J,K){
   if(!D.options.where){
   D.options.where={
   }}if(J){
   D.options.where[D.options.request.pidName]=J[D.options.tree.idName]}(D.options.useAdmin?layui.admin:g).ajax({
   url:D.options.url,data:D.options.contentType&&D.options.contentType.indexOf("application/json")===0?JSON.stringify(D.options.where):D.options.where,headers:D.options.headers,type:D.options.method,dataType:"json",contentType:D.options.contentType,success:function(L){
   if(D.options.parseData){
   L=D.options.parseData(L)}if(L.code==0){
   K(L.data)}else{
   K(L.msg||"加载失败")}},error:function(L){
   K(L.status+" - "+L.statusText)}})}}else{
   if(this.options.data&&this.options.data.length>0&&this.options.tree.isPidData){
   this.options.data=a.pidToChildren(this.options.data,this.options.tree.idName,this.options.tree.pidName,this.options.tree.childName)}}if("default"===this.options.toolbar){
   this.options.toolbar=["<div>",'   <div class="ew-tree-table-tool-item" title="添加" lay-event="add">','      <i class="layui-icon layui-icon-add-1"></i>',"   </div>",'   <div class="ew-tree-table-tool-item" title="修改" lay-event="update">','      <i class="layui-icon layui-icon-edit"></i>',"   </div>",'   <div class="ew-tree-table-tool-item" title="删除" lay-event="delete">','      <i class="layui-icon layui-icon-delete"></i>',"   </div>","</div>"].join("")}if(this.options.defaultToolbar===undefined){
   this.options.defaultToolbar=["filter","exports","print"]}if(typeof this.options.tree.getIcon==="string"){
   var E=this.options.tree.getIcon;this.options.tree.getIcon=function(K){
   if(E!=="ew-tree-icon-style2"){
   return E}var J=K[this.haveChildName];if(J!==undefined){
   J=J===true||J==="true"}else{
   if(K[this.childName]){
   J=K[this.childName].length>0}}if(J){
   return'<i class="ew-tree-icon ew-tree-icon-folder"></i>'}else{
   return'<i class="ew-tree-icon ew-tree-icon-file"></i>'}}}};p.prototype.init=function(){
   var E=this.options;var u=g(E.elem);var B=E.elem.substring(1);u.removeAttr("lay-filter");if(u.next(".ew-tree-table").length===0){
   u.css("display","none");u.after(['<div class="layui-form ew-tree-table" lay-filter="',B,'" style="',E.style||"",'">','   <div class="ew-tree-table-tool" style="display: none;"></div>','   <div class="ew-tree-table-head">','      <table class="layui-table"></table>',"   </div>",'   <div class="ew-tree-table-box">','      <table class="layui-table"></table>','      <div class="ew-tree-table-loading">','         <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>',"      </div>",'      <div class="ew-tree-table-empty">',E.text.none||"","</div>","   </div>","</div>"].join(""))}var A=this.getComponents();if(E.skin){
   A.$table.attr("lay-skin",E.skin)}if(E.size){
   A.$table.attr("lay-size",E.size)}if(E.even){
   A.$table.attr("lay-even",E.even)}A.$toolbar.empty();if(E.toolbar===false||E.toolbar===undefined){
   A.$toolbar.hide()}else{
   A.$toolbar.show();if(typeof E.toolbar==="string"){
   d(g(E.toolbar).html()).render({
   },function(F){
   A.$toolbar.html('<div style="display: inline-block;">'+F+"</div>")})}var C=['<div class="ew-tree-table-tool-right">'];for(var y=0;y<E.defaultToolbar.length;y++){
   var w;if("filter"===E.defaultToolbar[y]){
   w={
   title:"筛选",layEvent:"LAYTABLE_COLS",icon:"layui-icon-cols"}}else{
   if("exports"===E.defaultToolbar[y]){
   w={
   title:"导出",layEvent:"LAYTABLE_EXPORT",icon:"layui-icon-export"}}else{
   if("print"===E.defaultToolbar[y]){
   w={
   title:"打印",layEvent:"LAYTABLE_PRINT",icon:"layui-icon-print"}}else{
   w=E.defaultToolbar[y]}}}if(w){
   C.push('<div class="ew-tree-table-tool-item"');C.push(' title="'+w.title+'"');C.push(' lay-event="'+w.layEvent+'">');C.push('<i class="layui-icon '+w.icon+'"></i></div>')}}A.$toolbar.append(C.join("")+"</div>")}if(E.width){
   A.$view.css("width",E.width);A.$tHeadGroup.css("width",E.width);A.$tBodyGroup.css("width",E.width)}var v=this.resize(true);var D="<thead>"+this.renderBodyTh()+"</thead>";A.$tBodyGroup.children("style").remove();if(E.height){
   A.$tHead.html(v+D);A.$tBody.html(v+"<tbody></tbody>");if(E.height.indexOf("full-")===0){
   var z=parseFloat(E.height.substring(5))+A.$toolbar.outerHeight()+A.$tHeadGroup.outerHeight()+1;A.$tBodyGroup.append(['<style>[lay-filter="',B,'"] .ew-tree-table-box {',"   height: ",m()-z,"px;","   height: -moz-calc(100vh - ",z,"px);","   height: -webkit-calc(100vh - ",z,"px);","   height: calc(100vh - ",z,"px);","}</style>"].join(""));A.$tBodyGroup.data("full",z);A.$tBodyGroup.css("height","")}else{
   A.$tBodyGroup.css("height",E.height);A.$tBodyGroup.data("full","")}A.$tHeadGroup.show()}else{
   A.$tHeadGroup.hide();var x={
   lg:50,sm:30,md:38};A.$tBodyGroup.append(['<style>[lay-filter="',B,'"] .ew-tree-table-box:before {','   content: "";',"   position: absolute;","   top: 0; left: 0; right: 0;","   height: "+(x[E.size||"md"]*E.cols.length)+"px;","   background-color: #f2f2f2;","   border-bottom: 1px solid #e6e6e6;","}</style>"].join(""));A.$tBody.html(v+D+"<tbody></tbody>")}c.render("checkbox",B);function t(H){
   var F=H.data("parent"),G;if(!F){
   return}var I=A.$table.children("thead").children("tr").children('[data-key="'+F+'"]');var J=I.attr("colspan")-1;I.attr("colspan",J);if(J===0){
   I.addClass("layui-hide")}t(I)}A.$table.children("thead").children("tr").children("th.layui-hide").each(function(){
   t(g(this))});if(E.reqData