# jQuery EasyUI 環境配置
在該文中, 我簡單地將 EasyUI 的 demo/datagrid 目錄下的 basic.html 稍稍改裝 (主要是相關的 js 與 css 資源相對位址調整), 上傳伺服器測試後發現效果不錯. 它主要是透過 HTML5 的 data-options 屬性來設定表格功能的 (當然也可以用 Javascript 物件屬性來設定) :
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'"
singleSelect 用來設定單列選定模式, collapsible 用來設定表格右上角是否要擺一個內容縮合按鈕; url 用來指定表格的 ajax 資料來源, method 則是 HTTP 方法. 其 API 參考 :
# jQuery EasyUI 參考文件
測試範例 1 : http://tony1966/test/easyuitest/easyui-datagrid-1.htm [看原始碼]
此處要詳細地來測試 datagrid 的各項功能與整理期設定方式.
首先我想先搞定資料來源議題, 上述範例 1 乃是從現成的靜態 json 檔提供表格資料來源, 其格式如下 :
{"total":28,"rows":[
{"productid":"FI-SW-01",
"productname":"Koi",
"unitcost":10.00,
"status":"P",
"listprice":36.50,
"attr1":"Large",
"itemid":"EST-1"},
...
]}
但實際應用中, 表格的資料來源通常是由資料庫動態取得, 亦即是由後端程式例如 PHP 從資料庫中動態擷取再輸出 JSON 格式的資料, 而 EasyUI 要求所需的 JSON 資料須有 total 與 rows 兩個屬性.
在下面範例 2 中, 我將參考之前測試 ExtJS 的 GridPanel 時所使用的範例, 利用 PHP 程式來動態地輸出表格所需的 JSON 資料. 參考 :
# ExtJS 4 測試 : GridPanel (三)
在此文的範例 28 中, 我使用一個 PHP 程式 get_stocks.php 從後端 MySQL 資料表 stocks 取得表格內容來源, 並輸出為 ExtJS 的 GridPanel 所需要的 JSON 格式 :
# http://tony1966.xyz/test/extjstest/get_stocks.php
ExtJS GridPanel 所需的 JSON 格式是 totalProperty 與 root 兩個屬性. 此處我將利用相同的後端 MySQL 資料表 stocks, 只要修改 PHP 程式, 更改為輸出 total 與 rows 屬性即可, 如下列 get_stocks.php :
# http://tony1966.xyz/test/easyuitest/get_stocks.php
結果如下 :
{"total":"6","rows":[{"name":"\u53f0\u7a4d\u96fb","id":"2330","close":"123","volumn":"4425119","meeting":"2014-06-04","election":"0","category":"\u534a\u5c0e\u9ad4"},{"name":"\u4e2d\u83ef\u96fb","id":"2412","close":"96.4","volumn":"5249","meeting":"2014-06-15","election":"0","category":"\u901a\u4fe1"},{"name":"\u4e2d\u78b3","id":"1723","close":"192.5","volumn":"918","meeting":"2014-07-05","election":"0","category":"\u5851\u5316"},{"name":"\u5275\u898b","id":"2451","close":"108","volumn":"733","meeting":"2014-06-30","election":"0","category":"\u6a21\u7d44"},{"name":"\u83ef\u64ce","id":"3515","close":"118.5","volumn":"175","meeting":"2014-07-20","election":"1","category":"\u4e3b\u6a5f\u677f"},{"name":"\u8a0a\u9023","id":"5203","close":"97","volumn":"235","meeting":"2014-05-31","election":"0","category":"\u8edf\u9ad4"}]}
其原始碼如下 :
<?php
header('Content-Type: text/html;charset=UTF-8');
$host="abc.xyz.com";
$username="test";
$password="123";
$database="testdb";
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$SQL="SELECT COUNT(*) FROM `stocks`";
$RS=mysql_query($SQL, $conn);
list($total)=mysql_fetch_row($RS); //紀錄總筆數
$SQL="SELECT * FROM `stocks`";
$result=mysql_query($SQL, $conn); //執行 SQL 指令
$stock=array();
for ($i=0; $i<mysql_numrows($result); $i++) { //走訪紀錄集 (列)
$row=mysql_fetch_array($result); //取得列陣列
$stock[$i]=array("name" => $row["name"],
"id" => $row["id"],
"close" => $row["close"],
"volumn" => $row["volumn"],
"meeting" => $row["meeting"],
"election" => $row["election"],
"category" => $row["category"]
);
} //end of for
$arr=array("total" => $total, "rows" => $stock);
echo json_encode($arr); //將陣列轉成 JSON 資料格式傳回
?>
接著修改上面範例 1 的 data-options 屬性中的 url 為 get_stocks.php, 並設定與資料表相關欄位對應的表格欄位如下 :
<table class="easyui-datagrid" title="台股" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'get_stocks.php',method:'get'">
<thead>
<tr>
<th data-options="field:'name',width:80">股票名稱</th>
<th data-options="field:'id',width:80">股票代號</th>
<th data-options="field:'close',width:100,align:'right'">收盤價 (元)</th>
<th data-options="field:'volumn',width:100,align:'right'">成交量 (張)</th>
<th data-options="field:'meeting',align:'left'">股東會日期</th>
<th data-options="field:'election',width:80,align:'center'">董監改選</th>
<th data-options="field:'category',width:60,align:'center'">類股</th>
</tr>
</thead>
</table>
將檔案存成 easyui-datagrid-2.htm 後上傳, 結果如下 :
測試範例 2 : http://tony1966.xyz/test/easyuitest/easyui-datagrid-2.htm [看原始碼]
果然順利地將 PHP 檔輸出的 JSON 資料渲染成所要的表格呈現. 注意, 如果 th 的 data-options 中沒有設定 witdth, 則 EasyUI 會以 fit (剛好適合資料寬度) 方式處理, 例如上面的股東會日期欄位. 如果全部資料欄位寬度超過表格寬度 (這裡是設定為 700px), 那麼就會出現水平卷軸, 若資料列太多, 超過表格高度 (這裡設定為 250px), 則會出現垂直卷軸.
比起 ExtJS 的複雜物件設定而言, jQuery 是比較簡單直觀, 非常適合網頁設計師學習網頁程式開發, 而 ExtJS 則適合一般程式設計師學習網頁開發.
上面範例 2 使用 HTML5 的 data-options 設定表格參數, 也可以像 ExtJS 那樣使用 Javascript 設定, 如下範例 3 所示 :
測試範例 3 : http://tony1966.xyz/test/easyuitest/easyui-datagrid-3.htm [看原始碼]
<table id="grid1" title="台股" style="width:700px;height:250px"></table>
<script language="javascript">
$(document).ready(function(){
$('#grid1').datagrid({
url:'get_stocks.php',
columns:[[
{field:'name',title:'股票名稱',width:80},
{field:'id',title:'股票代號',width:80},
{field:'close',title:'收盤價 (元)',width:100,align:'right'},
{field:'volumn',title:'成交量 (張)',width:100,align:'right'},
{field:'meeting',title:'股東會日期',align:'left'},
{field:'election',title:'董監改選',width:80,align:'center'},
{field:'category',title:'類股',width:60,align:'center'}
]],
singleSelect:true,
collapsible:true
});
});
</script>
可見效果是一樣的. 只要為 table 標籤指定一個 id, 就可以用 Javascript 設定各項參數. 以上範例均透過 Ajax 取得遠端資料來源, 如果資料由網頁本身提供, 則可以直接寫在 tbody 標籤內, 並且取消 url 設定即可, 如下列範例 4 所示 :
測試範例 4 : http://tony1966.xyz/test/easyuitest/easyui-datagrid-4.htm [看原始碼]
<table class="easyui-datagrid" title="台股" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true">
<thead>
<tr>
<th data-options="field:'name',width:80">股票名稱</th>
<th data-options="field:'id',width:80">股票代號</th>
<th data-options="field:'close',width:100,align:'right'">收盤價 (元)</th>
<th data-options="field:'volumn',width:100,align:'right'">成交量 (張)</th>
<th data-options="field:'meeting',align:'left'">股東會日期</th>
<th data-options="field:'election',width:80,align:'center'">董監改選</th>
<th data-options="field:'category',width:60,align:'center'">類股</th>
</tr>
</thead>
<tbody>
<tr>
<td>台積電</td>
<td>2330</td>
<td>123</td>
<td>4425119</td>
<td>2014-06-04</td>
<td>0</td>
<td>半導體</td>
</tr>
<tr>
<td>中華電</td>
<td>2412</td>
<td>96.4</td>
<td>5249</td>
<td>2014-06-15</td>
<td>0</td>
<td>通信</td>
</tr>
<tr>
<td>中碳</td>
<td>1723</td>
<td>192.5</td>
<td>918</td>
<td>2014-07-05</td>
<td>0</td>
<td>塑化</td>
</tr>
<tr>
<td>創見</td>
<td>2451</td>
<td>108</td>
<td>733</td>
<td>2014-06-30</td>
<td>0</td>
<td>模組</td>
</tr>
<tr>
<td>華擎</td>
<td>3515</td>
<td>118.5</td>
<td>175</td>
<td>2014-07-20</td>
<td>0</td>
<td>主機板</td>
</tr>
<tr>
<td>訊連</td>
<td>5203</td>
<td>97</td>
<td>235</td>
<td>2014-05-31</td>
<td>0</td>
<td>軟體</td>
</tr>
</tbody>
</table>
事實上這種應用較少, 除非是少量且固定的靜態資料.
接著來測試分頁功能, 只要將 paginate 屬性設為 true, 表格下方即出現分頁工具, 如下範例 5 所示 :
測試範例 5 : http://tony1966.xyz/test/easyuitest/easyui-datagrid-5.htm [看原始碼]
$(document).ready(function(){
$('#grid1').datagrid({
url:'get_stocks.php',
columns:[[
{field:'name',title:'股票名稱',width:80},
{field:'id',title:'股票代號',width:80},
{field:'close',title:'收盤價 (元)',width:100,align:'right'},
{field:'volumn',title:'成交量 (張)',width:100,align:'right'},
{field:'meeting',title:'股東會日期',align:'left'},
{field:'election',title:'董監改選',width:80,align:'center'},
{field:'category',title:'類股',width:60,align:'center'}
]],
singleSelect:true,
collapsible:true,
pagination:true
});
});
如果是用 HTML5 方式設定, 就在 table 標籤的 data-options 屬性中加上 paginate:true 即可. 本例是拿掉中文化檔案的結果, 可見預設是英文版的分頁工具列, 如果在 head 標籤內加上中文化檔案 :
<script type="text/javascript" src="../jquery/easyui-lang-zh_TW.js"></script>
這樣就會得到繁中的分頁工具列, 如下列範例 6 :
測試範例 6 : http://tony1966.xyz/test/easyuitest/easyui-datagrid-6.htm [看原始碼]
由於我們的後端資料不夠多, 只有一頁無法測試切換頁效果, 下面範例 7 將參考 ExtJS 測試的範例 12 所用之 PHP 程式 get_stocks_list_page.php 與 stocks_list 資料表來產生足夠長的資料列 :
# ExtJS 4 測試 : GridPanel (一)
因為 EasyUI 的 datagrid 會向後端傳送 page (頁數) 與 rows (列數, 即 page size) 這兩個參數, 而且所輸出的 JSON 資料須有 total 與 rows 兩個屬性, 因此這個 get_stocks_list_page.php 也需做些修改如下 :
<?php
header('Content-Type: text/html;charset=UTF-8');
$host="abc.xyz.com";
$username="test";
$password="123";
$database="testdb";
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$page=isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows=isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$start=($page-1) * $rows; //本頁第一個列索引 (0 起始)
$SQL="SELECT COUNT(*) FROM `stocks_list`";
$RS=mysql_query($SQL, $conn);
list($total)=mysql_fetch_row($RS); //紀錄總筆數
$SQL="SELECT * FROM `stocks_list` LIMIT ".$start.",".$rows;
$result=mysql_query($SQL, $conn); //執行 SQL 指令
$stock=array();
for ($i=0; $i<mysql_numrows($result); $i++) { //走訪紀錄集 (列)
$row=mysql_fetch_array($result); //取得列陣列
$stock_name=$row["stock_name"];
$stock_id="<a href='http://tw.stock.yahoo.com/q/q?s=".
$row["stock_id"]."' target='_blank'>".
$row["stock_id"]."</a>";
$stock[$i]=array("stock_name" => $stock_name,
"stock_id" => $stock_id);
} //end of for
$arr=array("total" => $total, "rows" => $stock);
echo json_encode($arr); //將陣列轉成 JSON 資料格式傳回
?>
此程式中用 $_POST 取得分頁工具列傳來的 page 與 rows 參數, 用三元運算子設定其未傳出時之初始值, 然後計算每頁第一列的索引, 再用 MySQL 的 SELECT ... LIMIT 語法取得該頁的列記錄. 最後會輸出指定頁次列數之 stock_name 與 stock_id 這兩欄資料, 參考 EasyUI tutorial :
# Add a pagination to DataGrid
注意, 這裡 stock_id 我給它加上 Yahoo 股市的超連結. 網頁程式如下範例 7 所示 :
測試範例 7 : http://tony1966.xyz/test/easyuitest/easyui-datagrid-7.htm [看原始碼]
<table id="grid1" title="台股" style="width:600px;"></table>
<script language="javascript">
$(document).ready(function(){
$('#grid1').datagrid({
url:'get_stocks_list_page.php',
columns:[[
{field:'stock_name',title:'股票名稱',width:100},
{field:'stock_id',title:'股票代號',width:100}
]],
singleSelect:true,
collapsible:true,
pagination:true,
pageSize:10,
rownumbers:true
});
});
</script>
此處我們將 rownumbers 設為 true, 這樣列首會出現列編號, pageSize:10 只是初始化時用到, 可以透過下拉式選單更改每頁列數. 其次, table 標籤僅設寬度, 其高度由列數多寡自動調整. 換頁時若使用 Chrome 按 F12 鍵可觀察到 Form Data 送出 page 與 rows 兩個參數 :
分頁工具列位置由 pagePosition 屬性決定, 預設為 'bottom', 其餘選項有 'top' 與 'both' (注意是字串) :
pagination:true,
pagePosition:'top',
如下列範例 7-1 與 7-2 所示 :
測試範例 7-1 : http://tony1966.xyz/test/easyuitest/easyui-datagrid-7-1.htm [看原始碼]
測試範例 7-2 : http://tony1966.xyz/test/easyuitest/easyui-datagrid-7-2.htm [看原始碼]
如果要讓欄位可排序, 可在欄位設定 Columns 的 field 中加上 sortable:true, 如下列範例 8 所示 :
測試範例 8 : http://tony1966.xyz/test/easyuitest/easyui-datagrid-8.htm [看原始碼]
$(document).ready(function(){
$('#grid1').datagrid({
url:'get_stocks_list_page.php',
columns:[[
{field:'stock_name',title:'股票名稱',width:100,sortable:true},
{field:'stock_id',title:'股票代號',width:100,sortable:true}
]],
singleSelect:true,
collapsible:true,
pagination:true,
pageSize:10,
rownumbers:true
});
});
兩個欄位 stock_name 與 stock_id 均設定為可排序, 這樣點擊欄位名稱時就會以該欄位來排序 (asc 與 desc 交替), 名稱右方會出現小三角形, 向上表示順序 (asc), 向下表示逆序 (desc).
但實際上範例 8 並不會正確地排序, 原因是後端的 PHP 程式也必須修改. 在 Chrome 按 F12 鍵, 切到 Network 可發現按排序欄位時, Form Data 除了傳出 page 與 rows 參數外, 還傳出 sort (排序欄位名稱) 與 order (排序方向) 兩個參數, 後端程式必須依據這些參數傳回正確的 JSON 資料.
<?php
header('Content-Type: text/html;charset=UTF-8');
$host="abc.xyz.com";
$username="test";
$password="123";
$database="testdb";
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$page=isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows=isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$sort=isset($_POST['sort']) ? $_POST['sort'] : 'stock_id';
$order=isset($_POST['order']) ? $_POST['order'] : 'asc';
$start=($page-1) * $rows; //本頁第一個列索引 (0 起始)
$SQL="SELECT COUNT(*) FROM `stocks_list`";
$RS=mysql_query($SQL, $conn);
list($total)=mysql_fetch_row($RS); //紀錄總筆數
$SQL="SELECT * FROM `stocks_list` ORDER BY ".$sort." ".$order.
" LIMIT ".$start.",".$rows;
$result=mysql_query($SQL, $conn); //執行 SQL 指令
$stock=array();
for ($i=0; $i<mysql_numrows($result); $i++) { //走訪紀錄集 (列)
$row=mysql_fetch_array($result); //取得列陣列
$stock_name=$row["stock_name"];
$stock_id="<a href='http://tw.stock.yahoo.com/q/q?s=".
$row["stock_id"]."' target='_blank'>".
$row["stock_id"]."</a>";
$stock[$i]=array("stock_name" => $stock_name,
"stock_id" => $stock_id);
} //end of for
$arr=array("total" => $total, "rows" => $stock);
echo json_encode($arr); //將陣列轉成 JSON 資料格式傳回
?>
此處 get_stocks_list_sort.php 以 $_POST 擷取 sort 與 order 兩個參數以便在 SQL 中加入排序資訊, 這樣就會傳回排序後的 JSON 資料, 當然網頁程式也要修改, 如下列範例 9 所示 :
$(document).ready(function(){
$('#grid1').datagrid({
url:'get_stocks_list_sort.php',
columns:[[
{field:'stock_name',title:'股票名稱',width:100,sortable:true},
{field:'stock_id',title:'股票代號',width:100,sortable:true}
]],
singleSelect:true,
collapsible:true,
pagination:true,
pageSize:10,
rownumbers:true
});
});
測試範例 9 : http://tony1966.xyz/test/easyuitest/easyui-datagrid-9.htm [看原始碼]
在 jQuery 外掛 Datatables 中, 預設就有一個搜尋框, EasyUI 也可以在上方添加搜尋工具列, 只要準備一個 div 包裹的搜尋框, 然後在 table 標籤裡用 toolbar 屬性指定搜尋框的 id 即可, 參考 :
# Add search functionality in DataGrid
搜尋框的網頁碼如下 :
<div id="search_bar" style="padding:3px">
<select id="search_field">
<option value="stock_name">股票名稱</option>
<option value="stock_id">股票代號</option>
</select>
<input id="search_what" style="line-height:15px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">搜尋</a>
</div>
這個搜尋框 id 要設定在 table 標籤的 toolbar 屬性中, 這樣在表格標題欄下方的工具列位置就會出現此搜尋框了. 這裡我用一個下拉式選單 search_field 來選擇要搜尋的欄位, 用 search_what 文字框輸入要搜尋的關鍵字, 用一個超連結 a 標籤來製作連結按鈕 (樣式類別為 easyui-linkbutton), 當按下搜尋時呼叫 doSearch() :
<script type="text/javascript">
function doSearch(){
$('#grid1').datagrid('load',{
search_field: $('#search_field').val(),
search_what: $('#search_what').val()
});
}
</script>
當然後端 PHP 程式也要修改, 將 search_field 與 search_what 加入 SQL 指令中 :
<?php
header('Content-Type: text/html;charset=UTF-8');
$host="abc.xyz.com";
$username="test";
$password="123";
$database="testdb";
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$page=isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows=isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$sort=isset($_POST['sort']) ? $_POST['sort'] : 'stock_id';
$order=isset($_POST['order']) ? $_POST['order'] : 'asc';
if (isset($_POST['search_field'])) { //有 search
$where=" WHERE ".$_POST['search_field']." LIKE '%".
$_POST['search_what']."%'";
}
else {$where="";} //無 search
$start=($page-1) * $rows; //本頁第一個列索引 (0 起始)
$SQL="SELECT COUNT(*) FROM `stocks_list`".$where;
$RS=mysql_query($SQL, $conn);
list($total)=mysql_fetch_row($RS); //紀錄總筆數
$SQL="SELECT * FROM `stocks_list` ".$where." ORDER BY ".
$sort." ".$order." LIMIT ".$start.",".$rows;
$result=mysql_query($SQL, $conn); //執行 SQL 指令
$stock=array();
for ($i=0; $i<mysql_numrows($result); $i++) { //走訪紀錄集 (列)
$row=mysql_fetch_array($result); //取得列陣列
$stock_name=$row["stock_name"];
$stock_id="<a href='http://tw.stock.yahoo.com/q/q?s=".
$row["stock_id"]."' target='_blank'>".
$row["stock_id"]."</a>";
$stock[$i]=array("stock_name" => $stock_name,
"stock_id" => $stock_id);
} //end of for
$arr=array("total" => $total, "rows" => $stock);
echo json_encode($arr); //將陣列轉成 JSON 資料格式傳回
?>
我們用 isset() 判斷有無傳出 search_field 欄位 (用 search_what 或兩者 AND 亦可), 有的話就製作 $where 字串, 此處用 %...% 將 search_what 包起來, 表示只要欄位值含有 search_what 即符合. 網頁程式也要改用此具搜尋功能之 get_stocks_list_search.php, 同時也要增加一個 toolbar 屬性, 並指定其值為上面的搜尋框 id :
<table id="grid1" title="台股" style="width:600px;" toolbar="#search_bar"></table>
<script language="javascript">
$(document).ready(function(){
$('#grid1').datagrid({
url:'get_stocks_list_search.php',
columns:[[
{field:'stock_name',title:'股票名稱',width:100,sortable:true},
{field:'stock_id',title:'股票代號',width:100,sortable:true}
]],
singleSelect:true,
collapsible:true,
pagination:true,
pageSize:10,
rownumbers:true
});
});
</script>
如下列範例 10 所示 :
測試範例 10 : http://tony1966.xyz/test/easyuitest/easyui-datagrid-10.htm [看原始碼]
我們搜尋股票名稱含有 "富" 字者共有 11 筆, 用 Chrome 的 F12/Network/Headers/Form Data 觀察可知, 的確會向後端傳出 search_field 與 search_what 參數 :
在上面範例 10 中, 放在工具列位置的搜尋框, 我們使用超連結來製作搜尋按鈕, 其中 a 標籤的 plain="true" 屬性設定表示只顯示按鈕文字, 不顯示按鈕外框, 但當滑鼠移到按鈕上面時就會顯示外框. 如果 plain 設為 "false" 或不加 plain 屬性, 那麼就會出現按鈕外框了 (plain 屬性預設為 false).
事實上, 除了文字連結按鈕外, EasyUI 提供了許多常用的圖形按鈕樣式, 可用 iconCls 屬性加以指定, 例如 :
- icon-cancel : 取消
- icon-reload : 重新載入
- icon-search : 搜尋
- icon-print : 列印
- icon-help : 協助
- icon-save : 儲存
- icon-cut : 剪下
- icon-edit : 編輯
- icon-remove : 刪除
- icon-new : 新增
- icon-back : 返回
# Create a Link Button
根據 "Jquery EasyUI 中图标问题" 這篇文章, EasyUI 的圖示都放在 themes/icons 目錄下, 所以在上面的所有範例中均有指定 icon.css 這個樣式設定檔, 只要指定 iconCls 屬性即可直接使用這些圖檔 :
<link rel="stylesheet" type="text/css" href="../jquery/easyui-themes/icon.css">
在下面範例 11 中我在工具列中多放了三個連結按鈕 : 新增, 編輯, 刪除, 儲存, 因此我把工具列 div 標籤的 id 改為 tool_bar :
<div id="tool_bar" style="padding:3px">
<select id="search_field">
<option value="name">股票名稱</option>
<option value="id">股票代號</option>
</select>
<input id="search_what" style="line-height:15px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="doSearch()">搜尋</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="doAdd()">新增</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="doEdit()">編輯</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="doRemove()">刪除</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="doSave()">儲存</a>
</div>
因此 table 標籤的 toolbar 屬性也要改為 tool_bar :
<table id="grid1" title="台股" style="width:600px;" toolbar="#tool_bar"></table>
為了簡單起見, 這三個按鈕的 click 事件處理函式都只是顯示一個訊息盒 :
function doAdd(){$.messager.alert('訊息','新增!');}
function doEdit(){$.messager.alert('訊息','編輯!');}
function doRemove(){$.messager.alert('訊息','刪除!');} function doSave(){$.messager.alert('訊息','儲存!');}
另外, 為了接下來要測試線上編輯後端資料表內容, 我改用上面範例 6 以前所使用的 stocks 資料表 (因為我不想變動 stocks_list 資料表的內容), 所以遠端 JSON 資料來源為 get_stocks_search.php :
$(document).ready(function(){
$('#grid1').datagrid({
url:'get_stocks_search.php',
columns:[[
{field:'name',title:'股票名稱',width:80,sortable:true},
{field:'id',title:'股票代號',width:80,sortable:true},
{field:'close',title:'收盤價 (元)',width:100,align:'right',sortable:true},
{field:'volumn',title:'成交量 (張)',width:100,align:'right',sortable:true},
{field:'meeting',title:'股東會日期',align:'left',sortable:true},
{field:'election',title:'董監改選',width:80,align:'center',sortable:true},
{field:'category',title:'類股',width:60,align:'center',sortable:true}
]],
singleSelect:true,
collapsible:true
});
參考 get_stocks_list_search.php 修改為 get_stocks_search.php :
<?php
header('Content-Type: text/html;charset=UTF-8');
$host="abc.xyz.com";
$username="test";
$password="123";
$database="testdb";
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$page=isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows=isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$sort=isset($_POST['sort']) ? $_POST['sort'] : 'id';
$order=isset($_POST['order']) ? $_POST['order'] : 'asc';
if (isset($_POST['search_field'])) { //有 search
$where=" WHERE ".$_POST['search_field']." LIKE '%".
$_POST['search_what']."%'";
}
else {$where="";} //無 search
$start=($page-1) * $rows; //本頁第一個列索引 (0 起始)
$SQL="SELECT COUNT(*) FROM `stocks`".$where;
$RS=mysql_query($SQL, $conn);
list($total)=mysql_fetch_row($RS); //紀錄總筆數
$SQL="SELECT * FROM `stocks` ".$where." ORDER BY ".
$sort." ".$order." LIMIT ".$start.",".$rows;
$result=mysql_query($SQL, $conn); //執行 SQL 指令
$stock=array();
for ($i=0; $i<mysql_numrows($result); $i++) { //走訪紀錄集 (列)
$row=mysql_fetch_array($result); //取得列陣列
$stock[$i]=array("name" => $row["name"],
"id" => $row["id"],
"close" => $row["close"],
"volumn" => $row["volumn"],
"meeting" => $row["meeting"],
"election" => $row["election"],
"category" => $row["category"]
);
} //end of for
$arr=array("total" => $total, "rows" => $stock);
echo json_encode($arr); //將陣列轉成 JSON 資料格式傳回
?>
如下列範例 11 所示 :
<div id="tool_bar" style="padding:3px">
<select id="search_field">
<option value="name">股票名稱</option>
<option value="id">股票代號</option>
</select>
<input id="search_what" style="line-height:15px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="doSearch()">搜尋</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="doAdd()">新增</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="doEdit()">編輯</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="doRemove()">刪除</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="doSave()">儲存</a>
</div>
因此 table 標籤的 toolbar 屬性也要改為 tool_bar :
<table id="grid1" title="台股" style="width:600px;" toolbar="#tool_bar"></table>
為了簡單起見, 這三個按鈕的 click 事件處理函式都只是顯示一個訊息盒 :
function doAdd(){$.messager.alert('訊息','新增!');}
function doEdit(){$.messager.alert('訊息','編輯!');}
function doRemove(){$.messager.alert('訊息','刪除!');} function doSave(){$.messager.alert('訊息','儲存!');}
另外, 為了接下來要測試線上編輯後端資料表內容, 我改用上面範例 6 以前所使用的 stocks 資料表 (因為我不想變動 stocks_list 資料表的內容), 所以遠端 JSON 資料來源為 get_stocks_search.php :
$(document).ready(function(){
$('#grid1').datagrid({
url:'get_stocks_search.php',
columns:[[
{field:'name',title:'股票名稱',width:80,sortable:true},
{field:'id',title:'股票代號',width:80,sortable:true},
{field:'close',title:'收盤價 (元)',width:100,align:'right',sortable:true},
{field:'volumn',title:'成交量 (張)',width:100,align:'right',sortable:true},
{field:'meeting',title:'股東會日期',align:'left',sortable:true},
{field:'election',title:'董監改選',width:80,align:'center',sortable:true},
{field:'category',title:'類股',width:60,align:'center',sortable:true}
]],
singleSelect:true,
collapsible:true
});
參考 get_stocks_list_search.php 修改為 get_stocks_search.php :
<?php
header('Content-Type: text/html;charset=UTF-8');
$host="abc.xyz.com";
$username="test";
$password="123";
$database="testdb";
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$page=isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows=isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$sort=isset($_POST['sort']) ? $_POST['sort'] : 'id';
$order=isset($_POST['order']) ? $_POST['order'] : 'asc';
if (isset($_POST['search_field'])) { //有 search
$where=" WHERE ".$_POST['search_field']." LIKE '%".
$_POST['search_what']."%'";
}
else {$where="";} //無 search
$start=($page-1) * $rows; //本頁第一個列索引 (0 起始)
$SQL="SELECT COUNT(*) FROM `stocks`".$where;
$RS=mysql_query($SQL, $conn);
list($total)=mysql_fetch_row($RS); //紀錄總筆數
$SQL="SELECT * FROM `stocks` ".$where." ORDER BY ".
$sort." ".$order." LIMIT ".$start.",".$rows;
$result=mysql_query($SQL, $conn); //執行 SQL 指令
$stock=array();
for ($i=0; $i<mysql_numrows($result); $i++) { //走訪紀錄集 (列)
$row=mysql_fetch_array($result); //取得列陣列
$stock[$i]=array("name" => $row["name"],
"id" => $row["id"],
"close" => $row["close"],
"volumn" => $row["volumn"],
"meeting" => $row["meeting"],
"election" => $row["election"],
"category" => $row["category"]
);
} //end of for
$arr=array("total" => $total, "rows" => $stock);
echo json_encode($arr); //將陣列轉成 JSON 資料格式傳回
?>
如下列範例 11 所示 :
圖形按鈕看起來很不錯 !
2 則留言 :
案例跟原始碼都無法看了
嗯, 這家虛擬主機偶而會這樣秀逗, 後台還可以連進去 (以前有寫信請他們手下留情, 不要砍我的免費帳號), 但開不了檔案管理器, 帳號還 active 的, 應該只是伺服器暫時有 trouble 而已. 有時間我會把原始碼放 dropbox 供同好們下載. 我 dropbox 目前也滿了.
張貼留言