JQuery MiniUI development tutorial table control table: Custom columns (2)

Reference example: data table paging table

A table column configuration set (columns) is an array, such as [column, column,...].
The configuration parameters of one column are as follows:

 

The Code is as follows:

<Div id = "datagrid1" class = "mini-datagrid" style = "width: 700px; height: 280px ;"
Url = "../data/DataService. aspx? Method = SearchEmployees"
>
<Div property = "columns">
<Div type = "indexcolumn"> </div>
<Div field = "loginname" width = "120" headerAlign = "center" allowSort = "true"> employee account </div>
<Div field = "name" width = "120" headerAlign = "center" allowSort = "true"> name </div>
<Div field = "gender" width = "100" renderer = "onGenderRenderer" align = "center" headerAlign = "center"> gender </div>
<Div field = "salary" width = "100" allowSort = "true"> salary </div>
<Div field = "age" width = "100" allowSort = "true"> age </div>
<Div field = "createtime" width = "100" headerAlign = "center" dateFormat = "yyyy-MM-dd" allowSort = "true"> creation date </div>
</Div>
</Div>

We can also use Javascript as follows:

Var grid = new mini. DataGrid ();
Grid. set ({
Url: "../data/DataService. aspx? Method = SearchEmployees ",
Style: "width: 700px; height: 280px ;",
Columns :[
{Type: "indexcolumn "},
{Header: "Employee account", field: "loginname", width: 120, headerAlign: "center", allowSort: true },
{Header: "name", field: "name", width: 120, headerAlign: "center", allowSort: true },
{Header: "gender", field: "gender", width: 100, align: "center", renderer: onGenderRenderer },
{Header: "salary", field: "salary", width: 100, allowSort: true },
{Header: "age", field: "age", width: 100, allowSort: true },
{Header: "creation date", field: "createtime", width: 100, headerAlign: "center", allowSort: true, dateFormat: "yyyy-MM-dd "}
]
});
Grid. render (document. body );
 
Note: You can use Javascript or HTML to create a table.