Learn easyui questions (3) and learn easyui questions

Learn easyui questions (3) and learn easyui questions

Another problem I encountered in easyui today is: how to create a table?
First, the definition method provided on the easyui Chinese official website is as follows:

<!--table--><table id="tt"></table>

<! -- Script --> $ ('# tt '). datagrid ({url: 'datagrid _ data. json ',/* Data Transmission */columns: [{field: 'code', title: 'code', width: 100}, {field: 'name ', title: 'name', width: 100}, // note that there is no so-called unit {field: 'price', title: 'price', width: 100, align: 'right'}]});

This method can only be used to create a datagrid (table ):

However, it cannot be as effective as I want to create an excel table in a certain format. As follows:

That is to say, I want to customize the table format, which is easier to write directly using table in html, but easyui is used for the table style aesthetics, we have to write it in another way.
Next, I will introduce how to solve this problem-create a table
The Code is as follows:

 1 <table class="easyui-datagrid" style="width:400px;height:250px"   2         data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   3     <thead>   4         <tr>   5             <th data-options="field:'code',width:100">Code</th>   6             <th data-options="field:'name',width:100">Name</th>   7             <th data-options="field:'price',width:100,align:'right'">Price</th>   8         </tr>   9     </thead>  10 </table>  

As follows:

Paste my table code:

<Table class = "easyui-datagrid" style = "width: 300px; height: 200px;" data-options = "url: 'datagrid _ data. json', fitColumns: true, singleSelect: true "> <! -- Url is not used here --> <thead> <tr> <th data-options = "field: 'code', width: 100 "> Code </th> <th data-options =" field: 'name', width: 100 "> name </th> <th data-options =" field: 'price', width: 100, align: 'right' "> Price </th> </tr> </thead> <tfoot> </tfoot> <tbody> <tr> <td> _ code </td> <td> _ name </td> <td> _ price </td> </tr> </tbody> </table>

In this way, we can easily create the table format and apply the easyui ui. Like one !!

Hope this article will help you!

Long live sharing !!

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.