老灰鴨的筆記本: 【jQuery】簡單好用的表格元件 EasyUI datagrid

參考資料 ----

EsayUI 的 datagrid 元件可以造出功能強大又好看的表格，只要添加自己撰寫對應的程式碼，甚至可以做到直接在表格內新增/修改/刪除的功能；非商業用途的可用免費版。

因為我的資料來源為網站上的資料庫，所以需要 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);
?>

老灰鴨的筆記本

2022-11-20

【jQuery】簡單好用的表格元件 EasyUI datagrid

沒有留言:

張貼留言