二、DataGrid的扩展应用
上一份教程我们创建的一个CRUD应用是使用对话框组件来增加或编辑用户信息。本教程将教你如何创建一个CRUD 数据表格(datagrid). 为了让这些CRUD功能正常工作,我们会用到edatagrid.js插件。
第一步:在HTML标识里定义DataGrid
<table id="dg" title="My Users" style="width:550px;height:250px" toolbar="#toolbar" idField="id" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th> <th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th> <th field="phone" width="50" editor="text">Phone</th> <th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th> </tr> </thead> </table> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a> <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a> </div>
第二步:使DataGrid可编辑
$('#dg').edatagrid({ url: 'get_users.php', saveUrl: 'save_user.php', updateUrl: 'update_user.php', destroyUrl: 'destroy_user.php' });
为可编辑的datagrid提供了“url”、“saveUrl”、“updateUrl”、“destroyUrl”属性:
url: 从服务器端接收用户数据。
saveUrl: 保存新用户数据。
updateUrl: 更新现有用户数据。
destroyUrl: 删除现有用户数据。
第三步:编写服务器端处理代码
保存新用户(save_user.php):
$firstname = $_REQUEST['firstname']; $lastname = $_REQUEST['lastname']; $phone = $_REQUEST['phone']; $email = $_REQUEST['email']; include 'conn.php'; $sql = "insert into users(firstname,lastname,phone,email) values('$firstname','$lastname','$phone','$email')"; @mysql_query($sql); echo json_encode(array( 'id' => mysql_insert_id(), 'firstname' => $firstname, 'lastname' => $lastname, 'phone' => $phone, 'email' => $email ));
更新现有用户(update_user.php):
$id = intval($_REQUEST['id']); $firstname = $_REQUEST['firstname']; $lastname = $_REQUEST['lastname']; $phone = $_REQUEST['phone']; $email = $_REQUEST['email']; include 'conn.php'; $sql="update users set firstname='$firstname',lastname='$lastname',phone='$phone',email='$email' where id=$id"; @mysql_query($sql); echo json_encode(array( 'id' => $id, 'firstname' => $firstname, 'lastname' => $lastname, 'phone' => $phone, 'email' => $email ));
删除现有用户(destroy_user.php):
$id = intval($_REQUEST['id']); include 'conn.php'; $sql = "delete from users where id=$id"; @mysql_query($sql); echo json_encode(array('success'=>true));
edatagrid属性
edatagrid的属性从datagrid属性中扩展,下面为edatagrid增加的属性:
属性名 |
类型 |
描述 |
默认值 |
destroyMsg |
object |
The confirm dialog message to display while destroying a row. |
destroyMsg:{ norecord:{ // when no record is selected title:'Warning', msg:'No record is selected.' }, confirm:{ // when select a row title:'Confirm', msg:'Are you sure you want to delete?' } }
|
autoSave |
boolean |
True to auto save the editing row when click out of datagrid. |
false |
url |
string |
A URL to retrieve data from server. |
null |
saveUrl |
string |
A URL to save data to server and return the added row. |
null |
updateUrl |
string |
A URL to update data to server and return the updated row. |
null |
destroyUrl |
string |
A URL to post 'id' parameter to server to destroy that row. |
null |
tree |
selector |
The tree selector to show the corresponding tree component. |
null |
treeUrl |
string |
A URL to retrieve the tree data. |
null |
treeDndUrl |
string |
A URL to process the drag and drop operation. |
null |
treeTextField |
string |
Defines the tree text field name. |
name |
treeParentField |
string |
Defines the tree parent node field name. |
parentId |
edatagrid事件
从datagrid扩展,下面为edatagrid增加的事件:
事件名 |
参数 |
描述 |
onAdd |
index,row |
Fires when a new row is added. |
onEdit |
index,row |
Fires when a row is editing. |
onBeforeSave |
index |
Fires before a row to be saved, return false to cancel this save action. |
onSave |
index,row |
Fires when a row is saved. |
onDestroy |
index,row |
Fires when a row is destroy. |
onError |
index,row |
Fires when the server errors occur. The server should return a row with 'isError' property set to true to indicate some errors occur. Code examples: //server side code echo json_encode(array( 'isError' => true, 'msg' => 'error message.' ));
//client side code $('#dg').edatagrid({ onError: function(index,row){ alert(row.msg); } });
|
edatagrid方法
从datagrid中扩展,下面是为edatagrid增加或重写的方法:
方法名 |
参数 |
描述 |
options |
none |
Return the options object. |
enableEditing |
none |
Enable the datagrid editing. |
disableEditing |
none |
Disable the datagrid editing. |
editRow |
index |
Edit the specified row. |
addRow |
index |
Add a new row to the specified row index. If the index parameter is not specified, append the new row to the last position. Code examples: // append an empty row $('#dg').edatagrid('addRow');
// append an empty row as first row $('#dg').edatagrid('addRow',0);
// insert a row with default values $('#dg').edatagrid('addRow',{ index: 2, row:{ name:'name1', addr:'addr1' } });
|
saveRow |
none |
Save the editing row that will be posted to server. |
cancelRow |
none |
Cancel the editing row. |
destroyRow |
index |
Destroy the current selected row. If the index parameter is not specified, destroy all the selected rows. Code examples: // destroy all the selected rows $('#dg').edatagrid('destroyRow');
// destroy the first row $('#dg').edatagrid('destroyRow', 0);
// destroy the specified rows $('#dg').edatagrid('destroyRow', [3,4,5]);
|
|
|
|
相关推荐
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
研究了好久,终于成功在jquery easyui中的datagrid中添加searchbox!
jquery easyui datagrid 教程的部分应用。
jqueryEasyUI中的dataGrid实现的表格的增删改查,后台使用servlet,有数据库源码
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
一篇关于JQueryEasyUI学习之datagrid 添加、修改、删除 学习笔记教程有需要了解的朋友可参考本的笔记,批量删除,双击表单修改、选中行修改,增加行修改,再有就是扩展editor的方法,无需废话,直接上代码,代码中的...
Jquery-easyui的datagrid中文文档
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
jquery easyui datagrid demo 详解 增删改查
easyui 可编辑datagrid完整例子,支持filebox 项目中的数据库使用的是mysql,内置sql脚本,执行脚本即可创建数据
NULL 博文链接:https://cqh520llr.iteye.com/blog/1956791
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
基于struts,spring,hibernate,oracle环境下jquery easyui环境搭建。实现了使用jquery easyui中的datagrid显示用户列表。测试网址: http://localhost:9090/jquery-easyui-1.2.6BasedonStruts/layout.jsp
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
个人收藏的插件,jquery-easyui-datagrid,分享给大家。