1. 引入必要的文件: 在 HTML 页面中引入 jQuery、EasyUI 的 CSS 和 JavaScript 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
</body>
</html>
2. 创建 HTML 表格: 在页面中创建一个普通的 HTML 表格。
<table id="datagrid" title="DataGrid" style="width:400px;height:250px;">
<thead>
<tr>
<th field="id" width="50">ID</th>
<th field="name" width="150">Name</th>
<th field="age" width="50">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane Doe</td>
<td>30</td>
</tr>
</tbody>
</table>
在上述代码中,表头(thead)包含了数据网格的列信息,而表体(tbody)包含了实际的数据。
3. 转换为数据网格: 使用 datagrid 函数将 HTML 表格转换为数据网格。
<script>
$(function(){
$('#datagrid').datagrid();
});
</script>
在上述代码中,使用 datagrid 函数初始化数据网格。
现在,你的 HTML 表格已经被转换为数据网格,具有数据网格的交互和样式。你可以根据实际需求和业务逻辑进一步定制数据网格的行为和外观。
转载请注明出处:http://www.zyzy.cn/article/detail/13103/jQuery EasyUI