因為我的資料來源為網站上的資料庫,所以需要 server 端的程式以回應 client 端傳來的請求,又因為只做瀏覽用,如果看倌有要在表格內直接 新增/修改/刪除 數據的需要,請自行另外研究囉~。
先到 EasyUI 下載壓縮包,解壓後,找到名為 locale 的目錄,裡面有個 easyui-lang-zh_TW.js ,這是正體中文語言檔,將它上傳至您網站指定目錄,在本例為 /js/
前端的程式 client.php
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="keywords" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>datagrid demo</title> <meta name="description" content="datagrid demo" /> <link rel="shortcut icon" href="/image/icon.png" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <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"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="/js/easyui-lang-zh_TW.js"></script><!-- 正體中文語言包--> </head> <body> <!-- <table id="table1" class="easyui-datagrid" style="width:1000px;height:auto" auto 表示 表格的高度自動調整 --> <!-- 若屬性中設了 fixColumns="true" 欄寬就被固定住了, 並且表格底部不會顯示橫向捲軸 --> <table id="table1" class="easyui-datagrid" style="width:100%;height:400px"<!-- 可以用 px 設定表格 寬/高, 也可以用 % 螢幕比例 --> url="uber_rec.php" <!-- 指定 server 端程式 --> pagination="true" <!-- 要有頁數導覽元件 --> rownumbers="true" <!-- 最左邊顯示列號 --> noWrap="true" <!-- 欄位內的文字不折行 --> striped="true" <!-- 單偶列不同背景色 --> singleSelect="true" <!-- 滑鼠點擊的列會高亮度顯示 --> pageList=[30,60,90] <!-- 每頁顯示的列數選項 --> pageSize=30 > <!-- 預設每頁顯示 30 筆記錄 --> <thead> <tr> <th field="欄位1" width="180">欄位1 在 datagrid 的顯示名稱</th> <th field="欄位2" width="200">欄位2 在 datagrid 的顯示名稱</th> ... ... </tr> </thead> </table> </div> </body> </html>
server 端的程式 get_rec.php
<?php // 建立 PDO $dsn = 'mysql:dbname=資料庫名;host=localhost;charset=utf8;'; $user = 'MySQL帳戶名'; $password = '密碼'; $options = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'); try { // 建立資料連線 $pdo = new PDO($dsn, $user, $password, $options); } catch (PDOException $e) { echo 'connection failed'; exit; } $result = array(); // 撈記錄總筆數 $sql = "SELECT COUNT(*) cnt FROM 資料表A"; $pdoStat = $pdo->prepare($sql); $pdoStat->execute(); $rs = $pdoStat->fetch(); $result["total"] = $rs['cnt']; // EasyUI 規定的 jason 元素名 $iRows = isset($_POST['rows']) ? intval($_POST['rows']) : 30; // client 端傳來的一頁要顯示的記錄筆數, 預設 30 $iOffset = isset($_POST['page']) ? (intval($_POST['page'])-1)*$iRows : 0; // client 端傳來的一頁要顯示第幾頁, 預設 0 $sql = "SELECT * FROM 資料表A ORDER BY 排序欄位 LIMIT $iRows OFFSET $iOffset"; $pdoStat = $pdo->prepare($sql); $pdoStat->execute(); $rs = $pdoStat->fetchAll(); $recs = array(); if(count($rs)>0) { foreach($rs as $row) { array_push($recs, ['欄位1'=>$row['欄位1'], '欄位2'=>$row['欄位2'], ...]); } $result["rows"] = $recs; // EasyUI 規定的 jason 元素名 } echo json_encode($result); ?>
沒有留言:
張貼留言