axios和layUI配合加載數據表格demo

<?php
/**
 * Created by PhpStorm.
 * User: martinby
 * Date: 2017/9/21
 * Time: 21:21
 */
use backend\assets\AppAsset;
//調用公共樣式
AppAsset::addCss($this,'@web/css/category.css');
?>


<!--初始化一個demo-->
<table id="demo"></table>




<script type="text/javascript">
    //將這一串js綁定到js_content_end模塊下
    <?php $this->beginBlock('js_content_end') ?>
    
    axios({
        method:"get",
        url:"/category/read_category_list.html",
        transformResponse: [function (data) {
            category_tab_list(data);
        }],

    });

    function category_tab_list(data){
        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: '#demo',
                data:JSON.parse(data),
                height: 272,
                cols: [[ //標題欄
                    {field: 'id', title: 'ID', width: 80, sort: true},
                    {field: 'cate_name', title: '用戶名', width: 120},
                    {field: 'cate_url', title: '郵箱', width: 150}

                ]],
                skin: 'row', //表格風格,
                even: true,
                page: true, //是否顯示分頁
                limits: [5, 7, 10],
                limit: 5 //每頁默認顯示的數量
            });

        });
    }

//這個是yii的Js綁定模塊方法,不用管.
    <?php $this->endBlock() ?>
</script>

大概流程就是:

1.用axios進行get數據,get到json數據後,執行layui的表格生產方法

2.把執行layui的數據表格生成封裝成一個function,由於layui的表格生產須要的json(字符串)須要轉成json(對象),因此在data:這裏使用JSON.parse(data)轉化字符串爲對象.