欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery EasyUI教程之datagrid应用(一)

程序员文章站 2024-02-03 20:54:04
...
jQuery EasyUI教程之datagrid应用(一)
 
  一、利用jQuery EasyUIDataGrid创建CRUD应用

 

    对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录。本教程将教会你如何运用jQuery EasyUI框架来实现DataGridCRUD功能 

我们会用到如下插件:

· datagrid: 列表显示数据。

· dialog: 增加或编辑单个用户信息。

· form: 用来提交表单数据。

· messager: 用来显示操作信息。

 

第一步:准备数据库

 

使用MySql数据库来保存用户信息,并创建数据库和“users”表。

jQuery EasyUI教程之datagrid应用(一)

 

 

第二步:创建DataGrid数据表格来显示用户信息

不需要编写任何javascript代码创建DataGrid数据表格。

<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代码:
jQuery EasyUI教程之datagrid应用(一)

DataGrid使用“url”属性来指定“get_users.php”,用来从服务器端接收数据。

get_users.php代码文件:

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

 

第三步:创建表单对话框

 

增加或者编辑用户信息,我们使用同一对话框。

<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代码。
jQuery EasyUI教程之datagrid应用(一) 

 

第四步:实现增加和编辑用户功能

 

增加用户信息时,打开对话框,清除表单数据。

function newUser(){
    $('#dlg').dialog('open').dialog('setTitle','New User');
    $('#fm').form('clear');
    url = 'save_user.php';
}

编辑用户信息时,打开对话框,将选择的数据表格行数据装入表单。

var row = $('#dg').datagrid('getSelected');
if (row){
    $('#dlg').dialog('open').dialog('setTitle','Edit User');
    $('#fm').form('load',row);
    url = 'update_user.php?id='+row.id;
}

url保存URL地址,当保存用户数据时,表单用它来提交(post)数据到服务器。

 

第五步:保存用户数据

 

使用如下代码来保存用户数据:

function saveUser(){
    $('#fm').form('submit',{
        url: url,
        onSubmit: function(){
            return $(this).form('validate');
        },
        success: function(result){
            var result = eval('('+result+')');
            if (result.errorMsg){
                $.messager.show({
                    title: 'Error',
                    msg: result.errorMsg
                });
            } else {
                $('#dlg').dialog('close'); // close the dialog
                $('#dg').datagrid('reload'); // reload the user data
            }
        }
    });
}

 

提交表单前,“onSubmit”函数被调用,此时可校验表单字段值。当表单字段值提交成功,关闭对话框和刷新数据表格数据。

 

第六步:删除用户

 

用如下代码来删除用户:

function destroyUser(){
    var row = $('#dg').datagrid('getSelected');
    if (row){
        $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
            if (r){
                $.post('destroy_user.php',{id:row.id},function(result){
                    if (result.success){
                        $('#dg').datagrid('reload'); // 刷新用户数据
                    } else {
                        $.messager.show({ // 显示错误信息
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    }
                },'json');
            }
        });
    }
}

jQuery EasyUI教程之datagrid应用(一) 

删除一行数据时,会弹出一个confirm对话框来让我们选择确定是否真的删除数据行。当删除数据成功,调用“reload”方法刷新datagrid数据。

 

第七步:运行代码

 

在浏览器中运行代码,同时MySQL启动。

现在你了解了Query EasyUI框架的CRUD基本知识。