Layui数据表格的使用

Layui数据表格的使用

记录layui数据表格的使用及遇到的问题

1.部分前端html代码如下

<div class="x-body">
    <!-- 定义搜索框 -->
    <div class="layui-row">
        <div class="layui-col-md12 x-so">
            <input class="layui-input" placeholder="日期范围" name="dateTodate" id="dateTodate">
            <input type="text" name="title" id="title" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
            <button class="layui-btn" lay-filter="reload" id="reload"><i class="layui-icon">&#xe615;</i></button>
        </div>
    </div>
    
    <!-- 工具条 -->
    <script type="text/html" id="bartool">
    <a title="编辑" lay-event="edit" href="javascript:;">
        <i class="layui-icon">&#xe642;</i>
    </a>
    <a title="删除" lay-event="del" href="javascript:;">
        <i class="layui-icon">&#xe640;</i>
    </a>
    </script>
    
    <!-- 定义模板，开关 switch, 当返回的数据为true时，选中 -->
    <script type="text/html" id="isComment">
        <input type="checkbox" name="comment" value="{{d.comment}}" lay-skin="switch"
               lay-text="YES|NO" lay-filter="comment" {{ d.comment == true ? 'checked' : '' }} />
    </script>
    <!-- 表格主体，id和lay-filter可以不同 -->
    <table class="layui-hide" id="I_am_a_table" lay-filter="I_am_a_table"></table>
</div>

2.js代码如下

<script>

    /*加载日期控件，日期搜索*/
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        laydate.render({
            elem: '#dateTodate'
            ,type: 'datetime'  //可选值
            ,range: 'to'
        });
    });

    /*用户-删除*/
    function member_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!',{icon:1,time:1000});
        });
    }
</script>
<script>
    layui.use(['form','table'], function(){
        var table = layui.table
            ,form = layui.form;

        table.render({
            elem: '#I_am_a_table'
            ,id: 'I_am_a_table'
            ,url:'${pageContext.request.contextPath}/artical/getArticals'
            ,method: 'post'
            ,cellMinWidth: 80
            ,cols: [[
                 {field:'articalId', title:'ID'}
                ,{field:'title', title:'标题',width:200}
                ,{field:'menuId', title:'所属类别',width:120}
                ,{field:'createTime', title:'发布时间',width:180}
                ,{field:'comment', title:'允许评论', width:110, templet: '#isComment', unresize: true}
                ,{field:'status', title:'是否显示', width:110, templet: '#status', unresize: true}
                ,{field:'recommended', title:'是否推荐', width:110, templet: '#recommended', unresize: true}
                ,{field:'right', title: '操作', toolbar:"#bartool",align:"center"}
            ]]
            //加载的条件，没有条件搜索可以不加上这个
            ,where: {
                'dateTodate': '',
                'title': null
            }
            //开启分页
            ,page: true 
            //自定义请求参数
            ,request: {
                limitName: 'size' //每页数据量的参数名，默认：limit
            }
            //自定义响应参数
            ,response: {
                countName: 'total' //规定数据总数的字段名称，默认：count
                ,dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
        });

        //监听switch开关
        form.on('switch(comment)', function(obj){
            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
        });

        // 执行搜索，表格重载
        $('#reload').on('click', function () {
            // 搜索条件
            var dateTodate = $('#dateTodate').val();
            var title = $('#title').val();
            table.reload('I_am_a_table', {
                method: 'post'
                , where: {
                    'dateTodate': dateTodate,
                    'title': title
                }
                //设置页码 
                , page: {
                    curr: 1
                }
            });
        });

        //监听工具条
        table.on('tool(I_am_a_table)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('要删除吗'+data.id, function(index){
                    console.log(data);
                    $.ajax({
                        url: "productDe",
                        type: "POST",
                        data:{"productId":data.productId},
                        dataType: "json",
                        success: function(data){

                            if(1==1){
                                status=="已下架"
                                layer.alert('商品下架成功', {
                                    title: "消息提醒",
                                    btn: ['确定']
                                },function (index, item) {
                                    location.href="shangpin";

                                });
                            }else{
                                layer.msg("删除失败", {icon: 5});
                            }
                        }

                    });
                });
            }
            else if(obj.event === 'edit'){
                x_admin_show('编辑','${pageContext.request.contextPath}/artical/getArticalInfo?id='+data.articalId,600,400);
            }
        });
    });
</script>

3.时间的格式化

• 加入util,代码如下

layui.use(['table','util'], function(){
    var table = layui.table
        ,util = layui.util;

• 表格中的格式如下

{field:'createTime', title:'发布时间',width:180,templet:function(d){return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");}}

4.如果表格返回的数据有例如男女的判断显示时，可以采用以下的方法

{field:'sex', title:'性别',width:110,templet:function(d){
   return  d.sex == true ? "男":"<span class='layui-red'>女</span>";
}}