Render the table

开发工具与关键技术：vsX 和 jquery

作者：戴怡斌

撰写时间：2019.4.16

Here's a look at a rendering of the text table columns, tables, I believe we are very clear, almost everywhere, books, commercials and so on.

The proportion of the table to record something, you can also register the number, it can also record the population of men and women

For example, a game, folks, how many people download, like to play the game is more or minors, youth and more.

How to make it very clear glance of it. This time a table on it.

Game table with a column of text to explain to you

Open vs create these more than that, after the creation, the first reference js, otherwise $ will always be an error,

create tables referenced directly layui, this is someone else has been built, you can direct reference, which also has css files, according to their own the case reference.

After first define two variables,

var tables; // layui table

var layer, layuiTable; // save module for global use layui

Then we began,

layui.use([‘table’, ‘layer’], function () {};

There are several ways to render the table, rendering method, automatically rendering the most commonly used method for rendering

layer = layui.layer, layuiTable = layui.table;

Now to make the header table

tables= layuiTable.render({});

If you use the method to render that data interface is not required

URL: '/ Demo / Table /
' // Data Interface

You can specify directly form the original element selector (Recommended id selector)

element:
'#Demo'

Finally, set the header, cols, along with their favorite, here to a game as seen cases

cols: [[{title: 'number', type: 'numbers'},]],

There are several types of setting type, box for checknox

Single-box with Radio,
Normal: regular columns need not be set.

The number row, title: set the title name, type: set the column type, numbers: the number row

Pictures in the field: set the field names, field names are very important, but also columns of tabular data that uniquely identifies

The picture of align: cell arrangement, usually the default is left, which is on the left

Values ​​can be set are center: center, right: right

The picture's width: width, units%, px, rem

Form rendering here the production is complete.

Also layui Css style used in the css

Layui in the css styles are also already set up, just quote on the line, you do not need to write their own

Here render only the header, the form does not render

Finished last, renderings offer

and there's just a data write itself pastime, not really.

There are many forms of application, this is just one relatively simple one,

Figure Css style not made, we will. Finally, to end here.