PHP菜单树多选框ztree组件的使用

向右看齐 2023-02-22 12:13 26阅读 0赞

<link href="__STATIC__/layui_2.5.5/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="__STATIC__/layui_2.5.5/css/zTreeStyle.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript"   src="__STATIC__/layui_2.5.5/layui.all.js"></script>
    <script type="text/javascript"   src="__STATIC__/layui_2.5.5/jquery.ztree.core.js"></script>
    <script type="text/javascript"   src="__STATIC__/layui_2.5.5/jquery.ztree.excheck.js"></script>

以上js下载地址:[https://gitee.com/zTree/zTree\_v3][https_gitee.com_zTree_zTree_v3]  
看下console里面报什么错,就引用什么

<script>
        layui.config({ 
            base: '/Public/static/layui_2.5.5/' //treeTable.js所在目录
        }).use(['treeTable'], function () { 
            var $ = layui.jquery;
            var treeTable = layui.treeTable;
            $('body').removeClass('layui-hide');
    
          
            // 工具列点击事件
            treeTable.on('tool(demoTreeTb)', function (obj) { 
                var event = obj.event;
                var id = obj.data.id;
                if (event === 'del') { 
                    layer.confirm('确认要删除吗,如果该分类下有子分类将同时删除子分类？',function(index){ 
                        $.ajax({ 
                            url: "del_cate_menu_data",    //后台数据请求地址
                            type: "post",
                            data:{ id:id},
                            async: false,
                            success: function (result) { 
                                if(result == 'success'){ 
                                    layer.msg('操作成功',{ icon:1,time:3000});
                                    setTimeout('location.replace(location.href)', 1000);
                                }
    
                            }
                        });
    
                    })
    
    
                } 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()
                        }
                    });
    
    
                    //
    
    
    
    
                } else if(event === 'show'){ 
    
                    layer.open({ 
                        title: '角色权限分配',
                        type:1,
                        btn: ['保存', '取消'],
                        content: '<ul id="roleAuthTree" class="ztree"></ul>',
                        success: function (layero, dIndex) { 
                            // var loadIndex = layer.load(2);
                            $.get('menus', { roleId: 20}, function (res) { 
                                // console.log(res.data);
                                // layer.close(loadIndex);
                                $.fn.zTree.init($('#roleAuthTree'), { 
                                    check: { enable: true},
                                    data: { simpleData: { enable: true}}
                                }, res.data);
                            }, 'json');
                            // 超出一定高度滚动
                            $(layero).children('.layui-layer-content').css({ 'max-height': '300px', 'overflow': 'auto'});
                        },
                        yes: function (dIndex) { 
                            var insTree = $.fn.zTree.getZTreeObj('roleAuthTree');
                            var checkedRows = insTree.getCheckedNodes(true);
                            var ids = [];
                            for (var i = 0; i < checkedRows.length; i++) { 
                                ids.push(checkedRows[i].id);
                            }
                            // var loadIndex = layer.load(2);
                            $.get('gggg', { roleId: 20, authIds: ids.join(',')}, function (res) { 
                                layer.close(loadIndex);
                                if (200 === res.code) { 
                                    layer.msg(res.msg, { icon: 1});
                                    layer.close(dIndex);
                                } else { 
                                    layer.msg(res.msg, { icon: 2});
                                }
                            }, 'json');
                        }
                    });
    
    
                }
            });
    
        });
    </script>

## 注意事项: res.data里面的字段必须是这样的.否则将会报错,尤其是`name,pid` ,open=true 是展开的意思, 如果有checked=true 则说明是选中状态. ##

var datas =[
    
                {  id:1, pId:0, name:"树", open:true},
    
                {  id:11, pId:1, name:"松树", open:true},
    
                {  id:12, pId:1, name:"樟树", open:true},
    
                {  id:2, pId:0, name:"花", checked:true, open:true},
    
                {  id:21, pId:2, name:"梅花"},
    
                {  id:22, pId:2, name:"桃花", open:true}
    
            ];

[https_gitee.com_zTree_zTree_v3]: https://gitee.com/zTree/zTree_v3

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 PHP菜单树多选框ztree组件的使用

<link href="__STATIC__/layui_2.5.5/css/layui.css" rel="stylesheet" type="text/css"/>

向右看齐/ 2023年02月22日 12:13/ 0 赞/ 27 阅读

相关【Vue.js】Vue.js组件库Element中的单选框、多选框、输入框和计数器

1、Radio 单选框基础用法由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。 ![20200825170530408.png_pi

小灰灰/ 2022年12月01日 03:44/ 0 赞/ 1765 阅读

相关 Ztree创建带有复选框的树

需要增加的属性 check: { enable: true } 封装的工具代码 function createTree(url, treeId)

绝地灬酷狼/ 2022年06月16日 11:13/ 0 赞/ 312 阅读

相关 zTree -- jQuery 树插件的使用

官网地址：[http://www.treejs.cn/v3/main.php\\_zTreeInfo][http_www.treejs.cn_v3_main.php_zTree

╰半橙微兮°/ 2022年05月17日 01:24/ 0 赞/ 400 阅读

相关 zTree多选框模糊查询

一.设置seting的view属性 view: { dblClickExpand: true, selectedMulti : true,/

我会带着你远行/ 2022年05月13日 22:48/ 0 赞/ 461 阅读

相关《zTree树形菜单的使用》

1、下载ztree 插件包，解压。下载地址:[http://www.treejs.cn/v3/main.php\\_zTreeInfo][http_www.treejs

港控/mmm°/ 2022年05月12日 14:06/ 0 赞/ 520 阅读

相关 php复选框、多选框提交数据处理办法

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 在PHP开发中，表单提交应该非常常用，在所有表单数据中，对于初学者，比较难的恐怕就是复选

旧城等待，/ 2022年01月17日 06:39/ 0 赞/ 774 阅读

相关多选框使用

[https://crlcu.github.io/multiselect/\][https_crlcu.github.io_multiselect] [https_crlc

港控/mmm°/ 2022年01月07日 04:51/ 0 赞/ 506 阅读

相关 uniapp组件-uni-data-checkbox 单选框/复选框

一、单选框效果图： ![20210302132438819.gif][] 代码实现： ![watermark_type_ZmFuZ3poZW5naGVpdGk_s

我就是我/ 2021年07月25日 14:41/ 0 赞/ 5017 阅读

相关 jQuery 树插件ZTree使用Demo

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件。 zTre...

朱雀/ 2020年10月17日 18:26/ 0 赞/ 1024 阅读