jquery EasyUI(二)

最新推荐文章于 2025-07-01 23:42:13 发布

原创最新推荐文章于 2025-07-01 23:42:13 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

front-end-jquery EasyUI 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用EasyUI框架实现CRUD应用，通过Datagrid展示用户信息，并提供新增、编辑和删除功能。文章提供了完整的HTML代码示例及PHP后端数据交互部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建CRUD应用

数据收集并妥善管理数据是网络应用共同的必要。crud允许我们生成页面列表，并编辑数据库记录。

下面利用easyui框架实现一个crud datagrid

我们将使用下面的插件：

datagrid:向用户展示列表数据。

dialog：创建或编辑一条单一的用户信息。

form：用于提交表单数据。

message：显示一些操作信息。

准备数据库

创建 DataGrid 来显示用户信息

<!DOCTYPE html>
<html>

	<head>
			<meta charset="utf-8" />
		<!-- 引入JQuery -->
		<script type="text/javascript" src="jquery-easyui-1.5.5.2/jquery.min.js"></script>
		<!-- 引入EasyUI -->
		<script type="text/javascript" src="jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
		<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
		<script type="text/javascript" src="jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
		<!-- 引入EasyUI的样式文件-->
		<link rel="stylesheet" href="jquery-easyui-1.5.5.2//themes/default/easyui.css" type="text/css" />
		<!-- 引入EasyUI的图标样式文件-->
		<link rel="stylesheet" href="jquery-easyui-1.5.5.2//themes/icon.css" type="text/css" />
	</head>

	<body>
		<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px" url="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>

	</body>

</html>

<?php
    $rs = mysql_query('select * from users');
    $result = array();
    while($row = mysql_fetch_object($rs)){
    	array_push($result, $row);
    }
     
    echo json_encode($result);
?>

出错了，数据显示不出来。回头研究。