layui獲取樹形菜單所有選中的值

本文章向大家介紹 layui獲取樹形菜單所有選中的值 ，主要包括 layui獲取樹形菜單所有選中的值 使用實例、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。

layui.use(['form', 'layedit', 'laydate','tree','util'], function() {
            var form = layui.form,
                layer = layui.layer,
                tree = layui.tree,
                util = layui.util;

            //開啟復選框
            tree.render({
                elem: '#test7'
                ,data: getData()
                ,showCheckbox: true
                ,id: 'id'
                // ,oncheck: function(obj){
                //     console.log(obj.data); //得到當前點擊的節點數據
                //     console.log(obj.checked); //得到當前節點的展開狀態：open、close、normal
                //     console.log(obj.elem); //得到當前節點元素
                // }
            });

            //監聽提交
            form.on('submit(form_commit)', function(data) {
                //獲得選中的節點
                
                var checkData = tree.getChecked('id');

                var list = new Array();

                list = getChecked_list(checkData);

                console.log(checkData)

                console.log(list);

            });


            // 獲取選中節點的id
            function getChecked_list(data) {
                var id = "";
                $.each(data, function (index, item) {
                    if (id != "") {
                        id = id + "," + item.id;
                    }
                    else {
                        id = item.id;
                    }
                    var i = getChecked_list(item.children);
                    if (i != "") {
                        id = id + "," + i;
                    }
                });
                return id;
            }

        });

 

 

轉載：http://www.manongjc.com/detail/17-nznnmjumjcvisum.html

 

 

---------------------------------------------------------------------自己的項目----------------------------------------------------------------

<script>
 layui.use(['form','jquery','tree'], function () {
     var form = layui.form;
     $=layui.jquery;
     tree = layui.tree;
     data = [{
         title: '一級1'
         ,id: 1
         ,field: 'name1'
         ,checked: false
         ,spread: true
         ,children: [{
             title: '二級1-1 可允許跳轉'
             ,id: 3
             ,field: 'name11'
             ,href: 'https://www.layui.com/'
             ,spread: true
             ,checked: true
             ,children: [
                 {
                 title: '三級1-1-3'
                 ,id: 23
                 ,field: ''
                 ,spread: true
                 ,checked: ""
                 },{
                     title: '三級1-1-4'
                     ,id: 23
                     ,field: ''
                     ,spread: true
                     ,checked: true
                 }
            ]
         },{
             title: '二級1-3'
             ,id: 20
             ,field: ''
             ,spread: true
             ,checked: true
             ,children: [{
                 title: '三級1-3-1'
                 ,id: 21
                 ,field: ''
                 ,checked: true
             },{
                 title: '三級1-3-2'
                 ,id: 22
                 ,field: ''
                 ,checked: false
             }]
         }]

     }];
     tree.render({
         elem: '#test12',
         data:getData({$id})
        // data:data
         ,showCheckbox: true  //是否顯示復選框
         ,id: 'id'
         ,isJump: false //是否允許點擊節點時彈出新窗口跳轉
         // ,click: function(obj){
         //     //console.log(obj.data);
         //      var data = obj.data;  //獲取當前點擊的節點數據
         //      layer.msg('狀態：'+ obj.state + '<br>節點數據：' + JSON.stringify(data));
         // }
     });
     function getData(id) {
         let data = [];
         
         
         $.ajax({
             url:"{:url('kpxt/roles/node_read_json')}?id="+id,     //后台數據請求地址
             type: "post",
             async: false,
             success: function (resut) {
                //  console.log(resut);
                data = resut.result;
             }
         });
         console.log(data);
         return data;
     }

     //監聽提交
     form.on('submit(demo1)', function (data) {

         //獲得選中的節點

         var checkData = tree.getChecked('id');

         // var list = new Array();

         list = getChecked_list(checkData);


         // 獲取選中節點的id
         function getChecked_list(data) {
             var id = "";
             $.each(data, function (index, item) {
                 if (id != "") {
                     id = id + "," + item.id;
                 }
                 else {
                     id = item.id;
                 }
                 var i = getChecked_list(item.children);
                 if (i != "") {
                     id = id + "," + i;
                 }
             });
             return id;
         }
         
         $.ajax({
             type:'post',
             url:"{:url('kpxt/roles/node_read_save')}",
             data:{data:data.field,ids:list},
             success:function (res) {
                 // console.log(res);
                 if(res.status == 200){
                     layer.msg(res.msg,{time: 500 ,offset: '200px'},function () {
                         window.location.reload();
                     });

                 }else {
                     layer.msg(res.msg,{time: 500,offset: '200px' },function () {
                         location.reload()
                     })
                 }
             }
         });
         return false;
     });

     $(".back_btn").click(function () {
         window.location.href = "/kpxt/roles/index"
     })
 });
 
 
</script>