Display a table using easyui and use easyuitable

Display a table using easyui and use easyuitable

1. Before using easyui, you must import the compressed js package of easy-ui.

2. Introduce

The procedure is as follows:

<title>Basic Panel - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css"    href="/script/jquery-easyui-1.5.2/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="/script/jquery-easyui-1.5.2/themes/icon.css"><script type="text/javascript" src="/script/jquery-easyui-1.5.2/jquery.min.js"></script><script type="text/javascript" src="/script/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
3. Prepare the data and create a table in the database for the object to be represented as a table. It is best to have the same name as the object attribute in the database.

In this way, you can avoid mistakes caused by carelessness.
4. Create a DataGrid to display user information.
<Th field = "firstname" width = "50"> First Name </th>
The field value refers to the property value of the object. Therefore, the field is followed by the object property as fistname (fistname is an attribute of the user) in the preceding example ).
The First Name indicates the column Name in the table, which can be any value in theory, but we usually give it a very intuitive column Name based on specific requirements.
<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px" url="get_users.php" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="firstname" width="50">First Name</th> <th field="lastname" width="50">Last Name</th> <th field="phone" width="50">Phone</th> <th field="email" width="50">Email</th> </tr> </thead> </table> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a> <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a> </div>
Here we can display a table without writing any JavaScript code, such: