gezi441-layui-table
/
layui-table.ftl

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>菜单管理</title>
    <script src="/js/jquery-1.11.1/jquery-1.11.1.min.js"></script>
	<!--Font Awesome字体图标库 -->
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 公共参数-->
    <script src="/common/common.js"></script>
   	<#include "/common/import.ftl"/>
</head>
<style type="text/css">
    <#-- 设置 表格行高-->
    /*.layui-table-cell{*/
        /*height:40px;*/
        /*line-height: 40px;*/
    /*}*/
</style>
<body>
<br>
<div class="layui-card" style="">
    <form class="layui-form" >
    <div class="layui-form-item" style="width: 100%">
        <label class="layui-form-label">菜单名称 ：</label>
        <div class="layui-input-inline">
            <input type="text" name="menuName"  placeholder="" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">是否显示 ：</label>
    </div>
    <div class="layui-card-header">
        <div class="layui-input-inline" style="float: right;right: 20px">
            <div class="layui-btn-group">
                <button class="layui-btn" lay-submit lay-filter="formDemo">
                    <i class="layui-icon">&#xe615;</i>
                </button>
                <button type="reset" class="layui-btn " onclick="intoTable('{}')">
                    <i class="layui-icon">&#xe639;</i>
                </button>
                <button class="layui-btn layui-btn-primary ">
                    <i class="layui-icon">&#xe654;</i>
                </button>
                <button class="layui-btn layui-btn-primary">
                    <i class="layui-icon">&#xe642;</i>
                </button>
                <button class="layui-btn layui-btn-primary" onclick="del()">
                    <i class="layui-icon">&#xe640;</i>
                </button>
            </div>
        </div>
    </div>
    </form>
    </div>
    <div class="layui-card-body">
        <div id="pTable" style="width: 99%;">
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
            <table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>
        </div>
    </div>
</div>

<!--  是否显示 -->
<script type="text/html" id="isShow">
    {{#  if(d.menuDisplay === 'Y'){ }}
    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" checked>
    {{#  } else { }}
    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" >
    {{#  } }}
</script>

<script>
    var table = layui.table
            ,form = layui.form;
    layui.use('table', function () {
        intoTable("{}")
    });
    function  intoTable(queryParams) {
        table.render({
            id:"dataTable",
            elem: '#layui_table_id',
            url: '/menu/menuList.ajax',
            cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
          //  ,even: true    //隔行换色
            ,page: true
            ,limits: pageList
            ,limit: 10 //每页默认显示的数量
            ,method:'post'  //提交方式
            ,where:{ // url携带其他参数
                map:queryParams
            }
            , height: 'full-300' //高度最大化减去差值   也可以填   300、200
            ,done: function(res, curr, count) { //表格数据加载完后的事件
                //调用示例
                layer.photos({//点击图片弹出
                    photos: '.layer-photos-demo'
                    ,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
            ,cols: [[
                {type:'checkbox'},
                {
                    field: 'menuId',
                    title: 'ID',
                    sort: true
                },{
                    field: 'menuName',
                    title: '菜单名称',
                    edit: 'text',
                    sort: false
                },{
                    field: 'menuIcon',
                    title: '图标class',
                    edit: 'text',
                    sort: false
                },{
                    field: 'menuDisplay',
                    title: '是否显示',
                    templet: '#isShow',
                    unresize: true,
                    filter:"isShow",
                    sort: false
                },{
                    field: 'menuSort',
                    title: '排序',
                    sort: true
                },{
                    field: 'img',
                    title: '图片',
                    unresize: true,
                    sort: false,
                    //style:'height:100px;',
                    templet:function (d) {
                        return `<div class="layer-photos-demo" onclick="img_click()" style="cursor:pointer;">
                                      <img layer-pid="图片id，可以不写"  layer-src="/images/bug-success-bg.jpg" src="/images/bug-success-bg.jpg" alt="图片名">
                                    </div>`;
                    }
                },{
                    fixed: 'right',
                    title: '操作',
                    width: 215,
                    align:'center',
                    toolbar: '#barDemo'
                }
            ]]
        });
    }
    //监听单元格编辑 dataTable 对应 <table> 中的 lay-filter="dataTable"
    table.on('edit(dataTable)', function(obj){
        var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
        layer.msg('[ID: '+ data.menuId +'] ' + field + ' 字段更改为：'+ value);
    });

    //监听工具条
    table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'detail'){
            viewLableInfo(data.attrId);
            layer.msg(data.attrId);
        } else if(layEvent === 'del'){
            layer.msg('删除'+data.menuId);
            console.log(table)
        } else if(layEvent === 'edit'){
            layer.open({
                type: 2,
                title: '' +
                '<li id="icon" class="layui-icon layui-icon-release layui-anim layui-anim-scaleSpring" ' +
                'style="font-size: 30px; color: #009688;" data-anim="layui-anim-scaleSpring"></li> 编辑 ',

                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['470px', '600px'],//area: [window.screen.width / 2 + 'px', window.screen.height / 2 + 'px'], //宽高
                content: "/menu/edit.htm",
                success: function(layero, index){
                    var body = layer.getChildFrame('body',index);//建立父子联系
                    // 获取子页面的iframe
                    var iframe = window['layui-layer-iframe' + index];
                    // console.log(arr); //得到iframe页的body内容
                    // console.log(body.find('input'));
                    var inputList = body.find('input');
                    var json=JSON.parse(JSON.stringify(data));
                    for(let d in json){
                        body.find('input[name="'+d+'"][type="text"],[type="hidden"]').val(json[d])
                    }
                    iframe.child(data);//调用子窗体的child方法
                }
            });
        }
    });
    //监听显示操作
    form.on('switch(isShow)', function(obj) {
        var t = this;
        layer.tips(t.value + ' ' + t.name + '：' + obj.elem.checked, obj.othis);
    });

    //监听提交
    form.on('submit(formDemo)', function(data){
        layer.msg(JSON.stringify(data.field));
        intoTable(JSON.stringify(data.field))
        return false;
    });
</script>
<script>

    function del() {
        var checkStatus = table.checkStatus('dataTable');//获得表格单选
        /**
         console.log(checkStatus.data) //获取选中行的数据
         console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
         console.log(checkStatus.isAll ) //表格是否全选
         */
        if(checkStatus.data.length==0){
            layer.msg('请选择要删除的数据', {icon: 5});
            return;
        }
        //询问框
        layer.confirm('是否删除选中的数据？', {
            btn: ['删除','取消'] //按钮
        }, function(){
            layer.closeAll();
        }, function(){
            layer.closeAll();
        });
    }

</script>

</body>
</html>