easyui如何显示页面数据库

EASYUI如何显示页面数据库

通过使用EasyUI，Ajax技术、服务器端脚本和JSON数据格式可以轻松地将页面上的数据库内容显示出来。首先，我们需要将数据库数据转换为JSON格式，然后通过Ajax请求将数据传递到前端，最后通过EasyUI组件显示数据。接下来，我们将详细介绍如何实现这一过程。

一、理解EasyUI与数据展示

EasyUI是一个基于jQuery的UI框架，提供了丰富的组件，如表格（datagrid）、树形控件（tree）、对话框（dialog）等，用于快速创建功能强大的Web应用程序。Datagrid组件是最常用的显示数据的控件之一，它支持排序、分页、编辑等功能，非常适合用来展示数据库数据。

二、准备服务器端数据接口

首先，需要准备一个服务器端脚本，用于从数据库中读取数据并以JSON格式返回。以下是一个使用PHP与MySQL的示例：

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydatabase";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 查询数据
$sql = "SELECT id, name, age FROM users";
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}
// 以JSON格式返回数据
echo json_encode($data);
$conn->close();
?>

三、在前端使用Ajax获取数据

在前端页面中，使用Ajax技术从服务器端获取数据。以下是一个使用jQuery的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI Example</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:400px"
            url="get_users.php"
            method="get"
            rownumbers="true" pagination="true" singleSelect="true">
        <thead>
            <tr>
                <th field="id" width="50">ID</th>
                <th field="name" width="100">Name</th>
                <th field="age" width="50">Age</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        $(function(){
            $('#dg').datagrid({
                loadFilter: function(data){
                    return {
                        total: data.length,
                        rows: data
                    }
                }
            });
        });
    </script>
</body>
</html>

四、配置EasyUI组件

在前端页面中，使用EasyUI的datagrid组件显示数据。通过设置url属性为服务器端数据接口的URL，datagrid会自动发起Ajax请求获取数据并显示在表格中。

五、处理分页和排序

为提高用户体验，通常需要对数据进行分页和排序。EasyUI的datagrid组件内置了分页和排序功能，只需在服务器端脚本中添加相应的逻辑即可。以下是一个支持分页和排序的PHP示例：

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydatabase";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 获取分页参数
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rows = isset($_GET['rows']) ? intval($_GET['rows']) : 10;
$offset = ($page-1)*$rows;
// 获取排序参数
$sort = isset($_GET['sort']) ? strval($_GET['sort']) : 'id';
$order = isset($_GET['order']) ? strval($_GET['order']) : 'asc';
// 查询总记录数
$result = $conn->query("SELECT COUNT(*) as count FROM users");
$row = $result->fetch_assoc();
$total = $row['count'];
// 查询分页数据
$sql = "SELECT id, name, age FROM users ORDER BY $sort $order LIMIT $offset,$rows";
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}
// 返回数据
echo json_encode(array('total' => $total, 'rows' => $data));
$conn->close();
?>

在前端页面中，配置datagrid组件的pagination属性为true，并添加分页控件：

<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>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:400px"
        url="get_users.php"
        method="get"
        toolbar="#toolbar"
        rownumbers="true" pagination="true" singleSelect="true">
    <thead>
        <tr>
            <th field="id" width="50" sortable="true">ID</th>
            <th field="name" width="100" sortable="true">Name</th>
            <th field="age" width="50" sortable="true">Age</th>
        </tr>
    </thead>
</table>

六、数据编辑和更新

为了实现数据的增删改操作，可以使用EasyUI提供的对话框（dialog）组件和表单（form）组件。以下是一个示例：

<!-- 新增/编辑用户对话框 -->
<div id="dlg" class="easyui-dialog" style="width:400px"
        closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post" novalidate>
        <div class="fitem">
            <label>Name:</label>
            <input name="name" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>Age:</label>
            <input name="age" class="easyui-numberbox" required="true">
        </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>
<script type="text/javascript">
    var url;
    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','New User');
        $('#fm').form('clear');
        url = 'save_user.php';
    }
    function editUser(){
        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;
        }
    }
    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
                }
            }
        });
    }
    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');    // reload the user data
                        } else {
                            $.messager.show({    // show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    },'json');
                }
            });
        }
    }
</script>

七、总结

通过使用EasyUI的datagrid组件和服务器端脚本，可以轻松地将数据库中的数据展示在网页上。同时，通过使用Ajax技术，可以实现数据的动态加载和更新，提高用户体验。为了更高效的项目管理和协作，你可以选择研发项目管理系统PingCode，或者通用项目协作软件Worktile。这些工具可以帮助你更好地管理项目，提升开发效率。