Table method rendering in layui-Layui Tutorial-php.cn

Table method rendering in layui

尚

Release： 2020-04-04 17:26:03

forward

4919 people have browsed it

Table method rendering in layui

When using layui, you need to introduce the entire lib file into the project, and then introduce the layui.css and layui.js files on the page.

When using the built-in modules in layui, use layui.use to quote:

layui.use([&#39;layer&#39; , &#39;table],function(){
var layer = layui.layer;
var table = layui.table;
})

Copy after login

For the usage of layer, just read the official documentation directly. Here, I only record the ones that I usually use and are hard to find.

1. When rendering using the table method, sometimes the front end needs to add an auto-incrementing serial number, so how to add it?

table.render({
                elem: &#39;#dataTable&#39;,
                url:"getDataOrderList",
                // data: data,
                page:{
                    count:&#39;count&#39;,
                    limit:20
                },
                cols: [[
                    {type:&#39;numbers&#39;,title:&#39;序号&#39;,align:&#39;center&#39;}, // 自增序号
                    {field: &#39;order_no&#39;, title: &#39;订单编号&#39;},
                    {field: &#39;tel&#39;, title: &#39;购买账号&#39;},
                    {field: &#39;total_price&#39;, title: &#39;服务金额&#39;,color:"red"},
                    {field: &#39;pay_time&#39;, title: &#39;支付时间&#39;},
                    {title: &#39;服务有效期&#39;,toolbar:&#39;#detail&#39;},
                    {field: &#39;buy_by&#39;, title: &#39;开通方式&#39;}
                ]]
            });

Copy after login

There is another question, what should I do if there is an operation? Like viewing, editing etc? In the above render method, there is a field called service validity period. There is an attribute in toolbar. Its attribute value is the code in HTML:

<table  class="layui-table" id="dataTable" lay-filter="dataTable"></table>

script type="text/html" id="detail"> //id值关联这toobar的属性值
     <a href="javascript:;" style="color: #468aff" lay-event="detail">查看详情</a>
</script>

Copy after login

For more layui knowledge, please pay attention to layui usage tutorialcolumn.

The above is the detailed content of Table method rendering in layui. For more information, please follow other related articles on the PHP Chinese website!