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>";
}}