基于PHP和Mysql相结合使用jqGrid读取数据并显示

准备工作
在使用PHP和Mysql结合使用jqGrid读取数据并显示前，我们需要安装jqGrid插件和jQuery库。可以在jqGrid官方网站（http://www.trirand.com/）下载插件和库文件。
获取数据
为了让jqGrid能够展示数据，我们需要从Mysql数据库中获取数据。使用PHP编写服务器端脚本，在这里我们使用PDO（PHP数据对象）来连接数据库。

示例1：获取全表数据

<?php
//数据库连接信息
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'test';
//连接数据库
try {
    $dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $dbh->exec("SET CHARACTER SET utf8");
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage();
}
//获取数据
$sql = "SELECT * FROM student";
$result = $dbh->query($sql);
$data = $result->fetchAll(PDO::FETCH_ASSOC);
//返回Json格式数据
echo json_encode($data);
?>

示例2：获取指定页码的数据

<?php
//数据库连接信息
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'test';
//连接数据库
try {
    $dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $dbh->exec("SET CHARACTER SET utf8");
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage();
}
//获取数据
$page = $_REQUEST['page'];
$limit = $_REQUEST['rows'];
$start = $limit * ($page - 1);
$sql = "SELECT * FROM student LIMIT $start, $limit";
$result = $dbh->query($sql);
$data = $result->fetchAll(PDO::FETCH_ASSOC);
//返回Json格式数据
echo json_encode($data);
?>

显示数据
使用jqGrid展示数据需要在HTML页面中添加相应的元素，并调用相应的方法。在这里我们将数据显示在一个表格中。

示例1：获取全表数据并显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jqGrid实例</title>
    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.jqGrid.min.js"></script>
</head>
<body>
<table id="studentGrid"></table>
<div id="studentPager"></div>
<script>
$(function () {
    $("#studentGrid").jqGrid({
        url: 'getdata.php',
        mtype: 'GET',
        datatype: 'json',
        colNames: ['学号', '姓名', '年龄', '性别'],
        colModel: [
            {name: 'id', index: 'id', width: 100, align: 'center'},
            {name: 'name', index: 'name', width: 100, align: 'center'},
            {name: 'age', index: 'age', width: 100, align: 'center'},
            {name: 'sex', index: 'sex', width: 100, align: 'center'}
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#studentPager',
        sortname: 'id',
        viewrecords: true,
        sortorder: "asc",
        height: '100%'
    });
});
</script>
</body>
</html>

示例2：获取指定页码数据并显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jqGrid实例</title>
    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.jqGrid.min.js"></script>
</head>
<body>
<table id="studentGrid"></table>
<div id="studentPager"></div>
<script>
$(function () {
    $("#studentGrid").jqGrid({
        url: 'getdata.php',
        mtype: 'GET',
        datatype: 'json',
        colNames: ['学号', '姓名', '年龄', '性别'],
        colModel: [
            {name: 'id', index: 'id', width: 100, align: 'center'},
            {name: 'name', index: 'name', width: 100, align: 'center'},
            {name: 'age', index: 'age', width: 100, align: 'center'},
            {name: 'sex', index: 'sex', width: 100, align: 'center'}
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#studentPager',
        sortname: 'id',
        viewrecords: true,
        sortorder: "asc",
        height: '100%',
        //获取指定页码数据
        postData: {
            page: 2,
            rows: 10
        }
    });
});
</script>
</body>
</html>

上述示例中，我们通过配置jqGrid的相关参数来实现对数据的展示。包括设置url属性和datatype属性，后者可以取值为local、xml、json等，用来区分数据是本地数据还是服务器端数据。同时还可以设置colNames属性和colModel属性，前者用来定义列标题，后者用来定义每列的属性和宽度等信息。rowCount和rowList属性用来定义每页显示的数据条目数和分页列表信息，pager属性用来定义分页控件的id值，height属性用来定义表格的高度。postdata属性用来传递指定的页码和数据条目数，从而实现只显示指定的数据。

总结起来，通过使用PHP和Mysql结合使用jqGrid读取数据并显示，可以方便地实现数据的展示和分页。只需按照以上步骤进行相应的配置即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于PHP和Mysql相结合使用jqGrid读取数据并显示 - Python技术站