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: '數據項名稱',width:'15%', edit: 'text' }
               , { field: 'DATA_TABLE', title: '數據源表',width:'22%', edit: 'text' }
               , { title: '人口信息',width:'15%', templet: function (d) { return 'TAB_PERSON' } }
               , { field: 'ID_NUMBER_FIELD',width:'20%', title: '身份證字段', templet: '#selectTool' }
               , { field: 'FOREIGN_KEY_FIELD',width:'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 官方文檔