easyui如何显示页面数据库数据库数据

要在EasyUI中显示页面上的数据库数据，可以通过以下步骤：使用jQuery EasyUI提供的DataGrid控件、使用Ajax从后台获取数据、配置DataGrid的列和数据源、实现分页和排序功能。以下将详细介绍如何通过这些步骤来实现EasyUI中显示页面数据库数据的功能。首先，我们需要确保页面上引入了EasyUI的相关CSS和JavaScript文件，接着通过DataGrid控件来展示数据库中的数据。为了实现与数据库的交互，通常会使用后端语言（如Java、C#、PHP等）来处理数据读取和传输，并使用Ajax进行前后端的数据传输。

一、引入必要的库文件

在网页中使用EasyUI显示数据库数据之前，首先需要引入EasyUI的相关库文件。可以从EasyUI的官网上下载所需的文件，或者使用CDN方式引入。在HTML文件的标签中加入以下代码：

“`html

“`

这些文件包括了EasyUI的核心库和样式文件，确保我们在使用EasyUI的控件时能够正常显示和运行。

二、在HTML中定义DataGrid

接下来，在HTML文件中定义一个DataGrid控件来承载我们的数据。添加以下代码：

“`html

url=”get_data.php” toolbar=”#toolbar” pagination=”true”

rownumbers=”true” fitColumns=”true” singleSelect=”true”>

Item ID	Product ID	List Price	Unit Cost	Attribute	Status

“`

在这里，我们定义了一个DataGrid控件，并且设置了列的字段。这些字段将和我们从数据库中获取的数据字段一一对应，同时还定义了一个工具栏，包含一些基本操作。

三、通过Ajax获取数据

为了从数据库获取数据，我们需要创建一个后端脚本（如PHP脚本）来查询数据库并返回数据。例如，创建一个名为get_data.php的文件，加入以下内容：

“`php

$servername = “localhost”;

$username = “username”;

$password = “password”;

$dbname = “myDB”;

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

$sql = "SELECT itemid, productid, listprice, unitcost, attr1, status FROM myTable";

$result = $conn->query($sql);

$rows = array();

while($row = $result->fetch_assoc()) {

$rows[] = $row;

}

echo json_encode($rows);

$conn->close();

这个脚本将连接数据库并执行一个查询语句获取数据，然后将这些数据转换为JSON格式返回给前端。通过DataGrid的"url"属性，我们指定了这个脚本的路径，以便DataGrid可以获取数据。
<h2>四、配置DataGrid的分页和排序</h2>
为了使DataGrid控件支持分页和排序，需要在DataGrid初始化时配置相关属性：
```javascript
$(function(){
    $('#dg').datagrid({
        loader: function(param, success, error){
            $.ajax({
                type: 'GET',
                url: 'get_data.php',
                data: param,
                dataType: 'json',
                success: function(data){
                    success(data);  
                },
                error: function(){
                    error.apply(this, arguments);
                }
            });
        },
        loadFilter: pagerFilter
    });
});
function pagerFilter(data){
    if (typeof data.length === 'number' && typeof data.splice === 'function'){   
        data = {
            total: data.length,
            rows: data
        }
    }
    var dg = $(this);
    var opts = dg.datagrid('options');
    var pager = dg.datagrid('getPager');
    pager.pagination({
        onSelectPage:function(pageNum, pageSize){
            opts.pageNumber = pageNum;
            opts.pageSize = pageSize;
            pager.pagination('refresh',{
                pageNumber:pageNum,
                pageSize:pageSize
            });
            dg.datagrid('loadData',data);
        }
    });
    if (!data.originalRows){
        data.originalRows = (data.rows);
    }
    var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
    var end = start + parseInt(opts.pageSize);
    data.rows = (data.originalRows.slice(start, end));
    return data;
}

这里使用了自定义的loader函数来实现DataGrid加载数据，并在数据加载后通过loadFilter把数据进行分页处理。pagerFilter函数负责根据当前页码和页面大小对数据进行切片，并返回处理后的数据。

五、增强DataGrid的功能

可以为DataGrid添加更多功能，如查询、编辑、删除等操作。比如可以添加一个搜索框，并通过Ajax在后台进行条件查询：

“`html

“`

并在JavaScript中添加查询函数：

“`javascript

function doSearch(){

$(‘#dg’).datagrid(‘load’,{

searchValue: $(‘#searchValue’).val()

});

}

“`

在后端脚本中根据搜索条件进行查询处理：

“`php

$searchValue = $_GET[‘searchValue’];

$sql = "SELECT itemid, productid, listprice, unitcost, attr1, status FROM myTable WHERE productid LIKE '%$searchValue%'";

$result = $conn->query($sql);

// rest of the code remains the same

这样当用户在搜索框中输入内容并点击搜索按钮时，DataGrid会根据输入的条件重新加载数据。
<h2>六、实现增删改功能</h2>
在工具栏的按钮添加相关事件处理函数，以实现新增、编辑、删除等功能。以下是相应的JavaScript代码实现：
```javascript
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');
                $('#dg').datagrid('reload');
            }
        }
    });
}
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');
            }
        });
    }
}