首页 > 代码库 > jQuery EasyUI教程之datagrid应用（一）
jQuery EasyUI教程之datagrid应用（一）
一、利用jQuery EasyUI的DataGrid创建CRUD应用
对网页应用程序来说，正确采集和管理数据通常很有必要，DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录。本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 。
我们会用到如下插件:
· datagrid: 列表显示数据。
· dialog: 增加或编辑单个用户信息。
· form: 用来提交表单数据。
· messager: 用来显示操作信息。
第一步：准备数据库
使用MySql数据库来保存用户信息，并创建数据库和“users”表。
第二步：创建DataGrid数据表格来显示用户信息
不需要编写任何javascript代码创建DataGrid数据表格。
Html代码
<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>
如下图所示，我们不需要写任何一行javascript代码:
DataGrid使用“url”属性来指定“get_users.php”，用来从服务器端接收数据。
第三步：创建表单对话框
增加或者编辑用户信息，我们使用同一对话框。
Html代码
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons"> <div class="ftitle">User Information</div> <form id="fm" method="post"> <div class="fitem"> <label>First Name:</label> <input name="firstname" class="easyui-validatebox" required="true"> </div> <div class="fitem"> <label>Last Name:</label> <input name="lastname" class="easyui-validatebox" required="true"> </div> <div class="fitem"> <label>Phone:</label> <input name="phone"> </div> <div class="fitem"> <label>Email:</label> <input name="email" class="easyui-validatebox" validType="email"> </div> </form></div><div id="dlg-buttons"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$(‘#dlg‘).dialog(‘close‘)">Cancel</a></div>
对话框的创建也不需要编写javascript代码。
第四步：实现增加和编辑用户功能
增加用户信息时，打开对话框，清除表单数据。
Js代码
jQuery EasyUI教程之datagrid应用（一）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。