layuitable設置數據表


如圖,要設置類似這樣的格式

步驟如下:

1. 設置一個列表表格

2. 獲取數據

table.render({
                            elem: '#pl-list'
                            ,id: 'pl_table'
                            ,height: 480
                            ,title: 'sku列表'
                            ,url: host + '/product/sku/listForProduct?page=1' //數據接口
                            ,where: _self.formData
                            ,parseData: function(res) {
                                return {
                                    "code": res.code,
                                    "msg": res.message,
                                    "count": res.data.total,
                                    "data": res.data.product_sku_list
                                }
                            }
                            ,cols: [[ //表頭
                                {type:'checkbox'}
                                ,{field: 'id', title: 'ID', width: 90}
                                ,{field: 'product_id', hide: 'true'}
                                ,{field: 'name', title: '商品名稱', width:120}
                                ,{field: 'brand', title: '品牌', width:80}
                                ,{field: 'category_name', title: '類目', width: 120}
                                ,{title: '圖片', width:120, templet: function(d) {
                                        return `<img src=${d.image_path} />`
                                    }}
                                ,{field: 'marking_price', title: '划線價', width: 120}
                                ,{field: 'stock', title: '庫存', width: 120}
                                ,{field: 'code', title: '商品編碼', width: 120}
                                ,{field: 'service_type', title: '業務類型', width: 120}
                                ,{field: 'status', title: '上架狀態', width: 120}
                                ,{field: 'created_at', title: '創建時間', width: 135}
                                ,{title: '操作', width: 135,  toolbar: '#barDemo', fixed: 'right'}
                            ]]
                            ,page: true //開啟分頁

3. 定義barDemo

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit" >編輯</a>
            {{#  if(d.status === '下架'){ }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">上架</a>
            {{#  } else { }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">下架</a>
            {{#  } }}
        </script>

4. 大致細節就是如此,詳細內容還是請查看官方文檔


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM