layui tree +table 实现点击左侧树，动态新增编辑行 （layui-v2.5.6）

样式代码，防止下拉框的下拉列表被隐藏---必须设置--- 此样式和表格的样式有冲突 如果表格列数太多 会出现错乱的情况

  /* 防止下拉框的下拉列表被隐藏---必须设置--- 此样式和表格的样式有冲突 如果表格列数太多 会出现错乱的情况 目前我的解决方法是忽略下拉框的美化渲染 <select lay-ignore> */
    .layui-table-cell {
        overflow: visible;
    }

    .layui-table-box {
        overflow: visible;
    }

    .layui-table-body {
        overflow: visible;
    }
    /* 设置下拉框的高度与表格单元相同 */
    td .layui-form-select{
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }

页面代码显示列

<form class="layui-form" id="fromId" action="#">

<div id="tree1" style="margin:20px 10px;">
<table id="demo" lay-filter="tableFilter"></table>
 
 </form>
// 如果将button 放入form 中，点击按钮执行函数后，会自动刷新当前页面  
 <button class="layui-btn" onclick="save();">保存</button>
 <button class="layui-btn" onclick="Application();">应用</button>

模板html   ，{{# layui.each(tableColumnList, function(index, item){  }} 该方法是执行js 操作

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

//tableColumnList 是js 从后台获取的json 数据。
<script type="text/html" id="selectTool">
    <select name="selectDemo" lay-filter="selectDemo">
        <option value="">请选择或输入</option>
        {{# layui.each(tableColumnList, function(index, item){ }}
        <option value="{{item.COLUMN_NAME}}">{{ item.COLUMN_NAME }}</option>
        {{# }); }}
    </select>
</script>

js 渲染layui + 请求数据操作

<script type="text/javascript">
    // 获取的是下拉框的数据，这种方法可能会有隐患
    var tableColumnList = @Html.Raw(ViewBag.ColumnList);
    var myajaxData = [];   // table + 选中的数据  全局数组对象

    // layui 渲染，执行，监听
    layui.use(['tree', 'util', 'table', 'form', 'jquery'], function () {

        var CONFIG_LINKED_DATA = {
            ID: '1001',
            DATA_ITEM_ID: '',
            DATA_ITEM_NAME: '',
            DATA_TABLE: '',
            ID_NUMBER_FIELD: '',
            FOREIGN_KEY_FIELD: '',
            SET_TIME: ''
        };
        var tree = layui.tree
        , layer = layui.layer
        , util = layui.util
        , table = layui.table
        , form = layui.form
          , $ = layui.jquery;
        var tableObj = table.render({
            elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
            //, height: 315 //容器高度
            //, data: dataTable.data
            //, toolbar: '#toolbarDemo'
           , defaultToolbar: []
           , cols: [[
               //{ field: 'ID', title: 'ID', sort: true, fixed: 'left' } 
               , { field: 'DATA_ITEM_NAME', title: '数据项名称','15%', edit: 'text' }
               , { field: 'DATA_TABLE', title: '数据源表','22%', edit: 'text' }
               , { title: '人口信息','15%', templet: function (d) { return 'TAB_PERSON' } }
               , { field: 'ID_NUMBER_FIELD','20%', title: '身份证字段', templet: '#selectTool' }
               , { field: 'FOREIGN_KEY_FIELD','20%', title: 'person字段' , templet: '#selectTool'}
               , { title: '操作', toolbar: '#bar', fixed: 'right', align: 'center' }
           ]]
           , text: {
               none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
           }
            //,ID:"demo1"
            //,data:myajaxData
            //, url: 'url' // 我发现如果直接写上url 配置的话，就没法动态添加行 。所以选择先用ajax方法请求数据回来，再渲染table.reload({data:myajaxData})数据
             , done: function (res, curr, count) {
                 //debugger;
                 myajaxData = res.data;
                 //如果是异步请求数据方式，res即为你接口返回的信息。

                 //这里是表格重载的时候 回显下拉框的数据
                 $('tr').each(function(e){
                     var $cr=$(this); // 获取当前行的所有元素
                     //var dataIndex = $cr.attr("data-index");

                     var dataIndex = $cr.attr("data-index");

                     $.each(myajaxData,function(index,value){

                         if(value.LAY_TABLE_INDEX==dataIndex){
      
$cr.find("td").eq(3).find('input').val(value.ID_NUMBER_FIELD);
                             $cr.find("td").eq(4).find('input').val(value.FOREIGN_KEY_FIELD);
                         }

                     });
                 });

             }
        });
        LoadInfo1();   //获取table 数据并渲染
        
        var  treeIns = tree.render({
            elem: '#tree1'
           , data: LoadInfo()
           , showCheckbox: true  //是否显示复选框
           , id: 'demoId1'
            //, isJump: true //是否允许点击节点时弹出新窗口跳转
           ,oncheck: function (obj) {
               //console.log(JSON.stringify(obj.data)); //得到当前点击的节点数据
                //选中当前的节点数据，如果数据在table 数组对象中存在就不需要，push 新数据
                if (obj.checked == true) {
                 
                    var treecheckeddata = obj.data;
                    var linked_data={};

                    linked_data.DATA_ITEM_ID = treecheckeddata.id;
                    linked_data.DATA_ITEM_NAME = treecheckeddata.title;
                    linked_data.DATA_TABLE = treecheckeddata.attributes.datatable;
                         
                    //debugger
                    //var filter_linked_data =myajaxData.filter(function(element, index, self){
                    //    if(element.DATA_ITEM_ID ==  obj.data.id)
                    //        return element;
                    //});

                    var myData =[];
                    for (var i = 0; i < myajaxData.length; i++) {
                        if(myajaxData[i].DATA_ITEM_ID ==  obj.data.id)
                        {
                            myData.push(myajaxData[i]);
                        }
                    }

                    if(myData.length == 0)
                    {
                        myajaxData.push(linked_data);
                    }

                   
                    linked_data = {}; // 重复勾选时，添加入新对象

                    tableObj.reload({
                        data: myajaxData
                    });
                          
                }

           }
        });

        function LoadInfo1() {
            var jsonstr1 = '';
            $.ajax({
                url: 'url',
                //data: { id: '1' },
                type: 'post',
                dataType: 'json',
                async: false,
                success: function (result) {
                    //debugger;
                    if (result) {
                        jsonstr1 = result;
                        myajaxData = jsonstr1.data;

                        tableObj.reload({ data: myajaxData });

                    }
                },
                error: function (xhr, status) { }
            });

            return jsonstr1;
        }

      // 监听下拉框的值
        form.on('select(selectDemo)', function (data) {
            // 通过data.elem.dataset可以得到保存的对象id
            // data.elem.value可以得到下拉框选择的文本

            var select_value =data.elem.value;
            var dataIndex =$(this).parents().parent('tr').attr("data-index");
            var select_td_field =$(this).parents("td").attr("data-field");

            //选择下拉框的值，给全局变量myajaxData 赋值
            $.each(myajaxData,function(index,value){

                if(value.LAY_TABLE_INDEX == dataIndex && select_td_field == "ID_NUMBER_FIELD"){
                    value.ID_NUMBER_FIELD = select_value;
                }
                if(value.LAY_TABLE_INDEX == dataIndex && select_td_field == "FOREIGN_KEY_FIELD"){
                    value.FOREIGN_KEY_FIELD =select_value;
                }
            });
        })

        //监听删除事件
        table.on('tool(tableFilter)', function (obj) {
            if (obj.event === 'del') {
                obj.del();
                //console.log(obj.data.DATA_ITEM_ID);

                //var tree_checked = obj.data.DATA_ITEM_ID;
                //var checkData = tree.getChecked('demoId1');
                //$.each(checkData,function(index,value){
                //    console.log(value);

                //    if(value.id == tree_checked && value.children.length ==0)
                //    {
                //        value.checked =true;
                //    }else{
                //        $.each(value.children,function(item,value1){
                //            console.log("children",value1);
                //            if(value1.id == tree_checked)
                //            {
                //                value1.checked = false;
                //            }
                //        })
                //    }
                //})

                //treeIns.reload({
                //    checked:checkData,
                //});

            };
        });



        //提交数据到后台保存
        //form.on('submit(*)', function (data) {
        //    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        //});

        //请求Tree 数据
        function LoadInfo() {
            var jsonstr = '';
            $.ajax({
                url: 'url',
                //data: { id: '1' },
                //contentType: 'application/json;charset=utf-8',
                type: 'post',
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result) {
                        jsonstr = result.Data;
                    }
                },
                error: function (xhr, status) { }
            });
            return jsonstr;
        }

        //根据有效表名，获取下拉菜单的数据
        function LoadInfo2(tableName) {
            tableName = tableName != null ? tableName : "TAB_PERSON";
            $.ajax({
                url: 'url',
                data: { tableName: tableName },
                //contentType: 'application/json;charset=utf-8',
                type: 'post',
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result) {
                        tableColumnList = result.Data;
                    }
                },
                error: function (xhr, status) { }
            });

            return tableColumnList;
        }

    });


    function save()
    {
        //console.log("提交myajaxData数据",JSON.stringify(myajaxData));
        //删除数组对象中的空[]    ,[[],{},{name:'',sex:''}]   如果是{},=>JSON.stringify(arr[i]) == "{}"
        for (var i = 0; i < myajaxData.length; i++) {
            //这里面前两个判断条件只针对普通数组
            if (myajaxData[i] == null || myajaxData[i] == "") {
                myajaxData.splice(i, 1);
                i = i - 1;
            }
        }
        //console.log(JSON.stringify(myajaxData));
        $.ajax({
            url:"/ComprehensiveDataCorrelation/Save_ICONFIG_LINKED_DATA",
            // async:false,
            type:"post",
            //dataType:"json",
            contentType: "application/json",//向后台传送格式
            data:JSON.stringify({ model:myajaxData}),
            success:function(result){

                if(result.Success){
                    layer.msg('保存成功！');
                    //window.location.href="/ComprehensiveDataCorrelation/DataCorrelationIndex";
                }else{
                    layer.msg(result.msg);
                }
            }
        });
    }

    function Application() {
        $.ajax({
            url: '/ComprehensiveDataCorrelation/ToolApplication',
            data: { toolType: "link" },
            type: 'post',
            dataType: 'json',
            success: function (result) {
                if (result) {
                    layer.msg("操作成功!");
                } else {
                    layer.msg("操作失败!");
                }
            },
            error: function (xhr, status) { }
        });
    }
</script>
    

参考资料： layui 新增编辑行  layui 官方文档