美文网首页
记录开启头部工具栏,行工具栏的表格展示例子

记录开启头部工具栏,行工具栏的表格展示例子

作者: 马木木 | 来源:发表于2019-06-27 14:43 被阅读0次
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" type="text/css" href="${base}/layui/css/layui.css"/>
    </head>
    <body>
    
    <div class="demoTable">
        角色名称:
        <div class="layui-inline">
            <input class="layui-input" name="roleName" id="roleName" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    
    </div>
    
    <table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
    
    
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="eidtRole">角色权限配置</a>
        <a class="layui-btn layui-btn-xs" lay-event="deleteRole">删除</a>
    </script>
    
    
    
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addNewRole">新增</button>
        </div>
    </script>
    
    
    
    
    <script type="application/javascript" src="${base}/layui/layui.js"></script>
    
    <script>
        layui.use(['table','layer','form'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.$;
    
            table.render({
                elem: '#roleTable'
                ,url:'${base}/aps/dmp/sixth/getSysParamList.htm'
                ,title: '角色管理'
                ,toolbar: '#toolbarDemo'
                ,method:'POST'
                ,even:true
                ,cols: [[
                    {field:'roleCode', title:'角色编码'}
                    ,{field:'roleName', title:'角色名称'}
                    ,{field:'createTime', title:'创建时间',}
                    ,{field:'updateTime', title:'更新时间'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
                ,page: true
                ,done : function(res, curr, count) {
    
                    $('th').css({'background-color': '#5792c6', 'color': '#fff', 'font-weight': 'bold'})
                }
            });
    
    
    
    
            //监听行工具事件
            table.on('tool(roleTable)', function(obj){
                var data = obj.data;
    
                 if(obj.event === 'eidtRole'){
                     layer.open({
                         type: 2,
                         title:'角色权限配置',
                         maxmin:true,
                         resize:true,
                         area: ['800px', '600px'],
                         content: '${base}/aps/dmp/sixth/toEditDmpParamMap.htm?id='+data.id
                     });
                }else if(obj.event === 'deleteRole'){
    
                 }
            });
            //头工具栏事件
            table.on('toolbar(roleTable)', function(obj){
                switch(obj.event){
                    case 'addNewRole':
                        layer.open({
                            type: 2,
                            title: '新增角色',
                            maxmin: true,
                            resize: true,
                            area: ['400px', '800px'],
                            content: '${base}/aps/dmp/sixth/toAddDmpSysParam.htm'
                        });
                        break;
                };
            });
    
    
    
            var active = {
                reload: function(){
                    var roleName = $('#roleName');
    
                    //执行重载
                    table.reload('sysParam',{
                        page:{
                            curr:1
                        },
                        where:{
                            roleName: roleName.val()
                        }
                    })
                }
            };
    
    
    
            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
    
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:记录开启头部工具栏,行工具栏的表格展示例子

          本文链接:https://www.haomeiwen.com/subject/vghrcctx.html