HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Data Grid (DataGrid) column can use the 'columns' property simply defined. If you want to dynamically change the column, that there is no problem. To change the column, you can recall datagrid method, passing a new attribute columns.
<Table id = "tt" title = "Frozen Columns" class = "easyui-datagrid" style = "width: 550px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" iconCls = "icon-save"> </ Table>
$ ( '# Tt'). Datagrid ({ columns: [[ {Field: 'itemid', title: 'Item ID', width: 80}, {Field: 'productid', title: 'Product ID', width: 80}, {Field: 'attr1', title: 'Attribute', width: 200}, {Field: 'status', title: 'Status', width: 80} ]] });
Run the page, you will see:
But sometimes you want to change the column, so you need to write some code:
$ ( '# Tt'). Datagrid ({ columns: [[ {Field: 'itemid', title: 'Item ID', width: 80}, {Field: 'productid', title: 'Product ID', width: 80}, {Field: 'listprice', title: 'List Price', width: 80, align: 'right'}, {Field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right'}, {Field: 'attr1', title: 'Attribute', width: 100}, {Field: 'status', title: 'Status', width: 60} ]] });
Remember, we have defined other attributes, such as: url, width, height and so on. Once again, we do not need to define them, we define who we need to change.