layui-admin js拼接 动态html

//只展示父级组织结构的权限
    form.on('select(role_select)', function(data){

        $.post("/admin/system/role/permission", {id: data.value}, function (result) {

            var html = '';
            html += '<label for="" class="layui-form-label">权限</label><div class="layui-input-block"><input type="checkbox" lay-filter="allIn" name="" lay-skin="primary" title="全选" value=""></div>';
            $.each(result.data,function(n,m){

                if (m.pid == 0){
                    html += '<div class="layui-input-block"><input type="checkbox" lay-filter="sonIn" class="permission" name="permissions[]" lay-skin="primary" title="'+m.describe+'" value="'+m.id+'"><div class="layui-input-block">';

                    $.each(result.data,function(i,j){

                        if (j.pid == m.id){
                            html += '<input id="'+ j.pid +'" type="checkbox" class="permission" name="permissions[]" lay-skin="primary" title="'+j.describe+'" value="'+j.id+'">';
                        }
                    });
                    html += '</div></div>';
                }
            });
            $('#permission').html(html);
            form.render();
        });
    });

遇到问题:最后需添加form.render()  来渲染数据。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是示例代码: HTML部分: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui侧边栏切换内容</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">Layui Demo</div> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">首页</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">选项1</a></dd> <dd><a href="javascript:;">选项2</a></dd> <dd><a href="javascript:;">选项3</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">列表页</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">选项4</a></dd> <dd><a href="javascript:;">选项5</a></dd> <dd><a href="javascript:;">选项6</a></dd> </dl> </li> <li class="layui-nav-item"><a href="javascript:;">表单页</a></li> </ul> </div> </div> <div class="layui-body"> <div class="layui-tab layui-tab-card"> <ul class="layui-tab-title"> <li class="layui-this">首页</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <p>这里是首页内容</p> </div> </div> </div> </div> </div> <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> <script> layui.use(['element', 'layer'], function(){ var element = layui.element; var layer = layui.layer; //监听导航点击 element.on('nav(test)', function(elem){ //获取点击的导航的data-url var url = elem.attr('data-url'); //获取导航标题 var title = elem.text(); //添加选项卡 element.tabAdd('demo', { title: title, content: '<iframe src="'+url+'" frameborder="0" style="width: 100%; height: 100%;"></iframe>' }); //切换到相应选项卡 element.tabChange('demo', title); }); }); </script> </body> </html> ``` CSS部分: ```css .layui-nav-tree .layui-nav-child dd{ margin-left: 20px; } ``` JS部分: ```javascript //无需编写JS部分 ``` 注意事项: 1.代码中使用了CDN链接,因此需要联网才能加载相关资源 2.为了方便演示,选项卡中使用了iframe,实际使用时可以根据实际情况进行相应修改 3.需要引入jQuery和layui库的JS和CSS资源 4.代码中使用了layui框架的element模块和layer模块,需要在代码中进行相应的引用 以上就是使用layui.jslayui.css实现侧边栏切换内容的示例代码,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值