easyui で PHP を実装する方法。datagrid1 が行をクリックし、datagrid2 が動的クエリを実行します。
- PHP中文网オリジナル
- 2016-06-23 13:41:54809ブラウズ
EasyUI DataGrid は、Jquery で書かれた DataGrid であることがわかります。一般に、DataGrid を生成する場合は、PHP などのバックグラウンド言語を使用して直接実行することが一般的です。 DataGrid を表示するための HTML 構文を生成します。 DataGrid を操作する場合は、パラメーターをバックエンドに渡し、Web ページ全体を再生成します。
EasyUI DataGrid は 2 つの方法をサポートしています。1 つは、前述したように、表示される HTML をバックグラウンド サーバーが生成し、フロントエンドに表示する方法です。もう 1 つは、AJAX を使用してデータを生成する方法です。これは、JSON 形式のデータをフロントエンドに送信するだけで、フロントエンドがデータを受信した後、データを分析し、JQuery を使用して DataGrid のこの部分の画面を更新します。
ここで紹介するのは、AJAX テクノロジーを使用して行われる 2 番目の方法です。この方法の利点は、データ層 -> 制御層 -> 表示層の 3 つの層を独立して動作させることができ、多層アーキテクチャを実現できることです。設計の序文で述べた精神は、すべての HTML 生成を PHP で行うという古い方法とは異なります。これにより、PHP 開発者自身が開発前に HTML およびその他のフロントエンド テクノロジを深く理解する必要があります。
このアプローチには別の利点があります。つまり、フロントエンド UI を置き換えることができますが、バックエンド プログラムを大幅に変更する必要はありません。現在、JSON データ形式をサポートする JavaScript DataGrid が多数あり、他社が提供する DataGrid を参照して、最適なものを選択することもできます。
これは序論です。次に、コードを直接見ると、上記の意味がよりよく理解できるでしょう:
まず、HTML UI インターフェイスを設計し、表示するフィールドを定義する必要があります。この部分について EasyUI DataGrid には JavaScript を使用して動的に定義されるフィールド定義も用意されており、分業という点では HTML を使用して直接定義することに慣れています。 Web アーティストに直接渡して直接操作することも簡単です。
この部分では URL 設定に焦点を当てます。
DataGrid2.php
コードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui help you build your web page easily!"> <title>一條小龍 easyUI datagrid</title> <link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/icon.css"> <script type="text/javascript" src="./JS/jquery.js"></script> <script type="text/javascript" src="./JS/EasyUI/jquery.easyui.min.js"></script> </head> <body> <h2>一條小龍 easyUI datagrid url test</h2> <table id="tt" class="easyui-datagrid" style="width:750px;height:300px" url="datagrid2_getdata.php" title="Load Data" pagination="true"> <thead> <tr> <th field="UNum" width="80">UNum</th> <th field="STUID" width="120">User ID</th> <th field="Password" width="80" align="right">Password</th> <th field="Birthday" width="80" align="right">Birthday</th> <th field="Nickname" width="200">Nickname</th> <th field="DBSTS" width="60" align="center">DBSTS</th> </tr> </thead> </table> </body> </html>
データ取得用のバックグラウンドインターフェイスを定義するため
datagrid2_getdata.php
コードは次のとおりです:
<?php
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$offset = ($page-1)*$rows;
$result = array();
$tablename = "STUser";
// ...
require_once(".\db\DB_config.php");
require_once(".\db\DB_class.php");
$db = new DB();
$db->connect_db($_DB['host'], $_DB['username'], $_DB['password'], $_DB['dbname']);
$db->query("select count(*) As Total from $tablename");
$row = $db->fetch_assoc();
$result["total"] = $row["Total"];
$db->query("select * from $tablename limit $offset,$rows");
$items = array();
while($row = $db->fetch_assoc()){
array_push($items, $row);
}
$result["rows"] = $items;
echo json_encode($result);
?>
上記より、これはデータを取得するという非常に単純なアクションであることがわかります。
最初に、DataGrid は 2 つのパラメーターを渡します:
$_POST['page']) 現在どのページにあるか
$_POST['rows']) 各ページに表示されるデータの数
次に、配列を使用する必要があります。$result には 2 つの情報が格納されます。
$result["rows"] には、実際のデータ配列セットが格納されます。配列が生成され、JSON データ形式で出力されます。DataGrid はそれを受信すると、処理して画面を更新します。
その後、さらに一歩進んでdatagrid2_getdata.phpを抽象化します。つまり、EasyUI DataGrid独自のデータ形式処理部分とデータベースアクセス部分を分離し、それらを2つのクラスに分けて処理します。
優れたアーキテクチャとクラス設計は、実際には常に進化し、改善されています。これは、各クラスの役割分担が明確でなければならないということです。上記に対処するには、今後の修正や調整が容易になるよう、問題ごとに対応策を進化させていく必要があります。
そうしないと、変更したいがどこから始めればよいかわからないということになる可能性が高くなります。なぜなら、一度変更を加えると、数十、場合によっては数百ものプログラムが一緒に変更する必要があるからです。これは安定性の問題にも当てはまります。つまり、変更すべき点が多すぎるため、たとえ何十もの問題が解決されたとしても、変更を 1 つ減らすだけでは不十分です。すべて変更されていますが、変更が行われたかどうかを誰がテストしますか? テスト後、考えた結果、システムはまだ問題なく、変更を中止することにしました。今すぐ使える。