layui+xadmin使用细节

目录

layui 使用内置模块加载表格

创建一个table实例最简单的方式是，在页面放置一个元素 table id=“demo” ，然后通过 table.render() 方法指定该容器

layui的table工具条，根据不同的条件显示特定的按钮，涉及模板引擎laytpl

table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
    ,{field:'id', title:'ID', width:100}
  ]]
});

由于模板遵循 laytpl 语法（建议细读 laytpl文档 ），因此在模板中你可以写任意脚本语句（如 if else/for等）：
<script type="text/html" id="titleTpl">
  {{#  if(d.id < 100){ }}
    <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
  {{#  } else { }}
    {{d.title}}(普通用户)
  {{#  } }}
</script>

layui对table中的数据进行判断（0、1、2）转换为相应信息

<script id="toStatus" type="text/html">
    {{# if(d.status ==1 ){ }}
        <button class="layui-btn tbtn layui-btn-primary">未支付</button>
    {{# }else if(d.status == 2){ }}
        <button class="layui-btn tbtn layui-btn-success">已支付</button>
    {{# }else if(d.status == 3){ }}
        <button class="layui-btn tbtn layui-btn-normal">已发货</button>
    {{# }else if(d.status == 4){ }}
        <button class="layui-btn tbtn layui-btn-danger">已退款</button>
    {{# }else if(d.status == 5){ }}
        <button class="layui-btn tbtn layui-btn-warm">已收获</button>
    {{# } }}
</script>

table.render() 里面的写法{field:'status',title:'订单状态',align:'center',width:30,templet:'#toStatus'}

layui规定列之后，自适应（小屏幕）行变形

 //渲染表格
        let tableRes = table.render({
            elem: '#demo',  //绑定容器
            id:'reolad_id',  //重新加载的id
            url: '/admin/stadium/getAll',  //数据接口，异步
            width: documentWidth,
            cellMinWidth:80,
            page: true,  //开启分页
            limit:50,
            cols:[[
                {field:'id',title:'ID',align:'center',width:'3%'},
            
                {title: '操作',align: 'left',toolbar:'#operator',width:'25%',fixed:'right'},
            ]],
       
            parseData: function (res) {
                if (res.code != 0){
                    layer.msg('加载数据失败',{time:2000});
                    return false;
                }
                //console.log(res);
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.total,
                    "data": res.data.data
                }
            },
            done:function (res,curr,count) {
                $("#demo").css("width","100%");
                //表头部分
                //动态监听表头高度变化，冻结行跟着改变高度
                $(".layui-table-header  tr").resize(function () {
                    $(".layui-table-header  tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                    });
                });
                //初始化高度，使得冻结行表头高度一致
                $(".layui-table-header  tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                });

                //表体部分
                //动态监听表体高度变化，冻结行跟着改变高度
                $(".layui-table-body  tr").resize(function () {
                    $(".layui-table-body  tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                    });
                });
                //初始化高度，使得冻结行表体高度一致
                $(".layui-table-body  tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                });
            }
        });

操作栏被挤压后，单击不触发；解决办法，使用原生的click来实现

<script type="text/html" id="operator">
    <button class="layui-btn layui-btn-primary layui-btn-xs" onclick='edit("{{d.id}}")'>编辑</button>
    <button class="layui-btn layui-btn-primary layui-btn-xs" onclick='detail("{{d.id}}")'>详情</button>

<!--    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</button>-->
<!--    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</button>-->
<!--    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="stock">库存</button>-->
</script>

<script>

    //编辑
    function edit(id) {
        xadmin.open('编辑','/admin/stadium/edit.html?id='+id,null,null,true);
    }

    //详情
    function detail(id) {
        xadmin.open('详情','/admin/stadium/detail.html?id='+id,null,null,true);
    }
</script>