$('#sector_changes').datagrid({
url:"apps/STOCK.php",
queryParams:{op:"list_sector_changes"},
fitColumns:true,
singleSelect:true,
pagination:true,
pageSize:10, //只能使用 pageList 裡面的 10, 20, 30, 40, 50
rownumbers:true
});
在提供 json 內容的程式中, 預設也是 10 列 :
case "list_sector_changes" : {
$page=isset($_REQUEST['page']) ? intval($_REQUEST['page']) : 1;
$rows=isset($_REQUEST['rows']) ? intval($_REQUEST['rows']) : 10;
$sort=isset($_REQUEST['sort']) ? $_REQUEST['sort'] : 'trade_date';
$order=isset($_REQUEST['order']) ? $_REQUEST['order'] : 'desc';
if (isset($_REQUEST['search_trade_date'])) { //有 search
$where="WHERE `trade_date`='".$_REQUEST['search_trade_date']."'";
}
else {$where="";}
$SQL="SELECT trade_date,listed_volume_ratio,listed_volume_change,".
"listed_index_change FROM sector_changes ".$where." ORDER BY ".
$sort." ".$order." LIMIT ".$start.",".$rows;
$RS=run_sql($SQL);
其效果如下 :
可正常顯示表格內容
但是在上面顯示類股行情排序的表格中, 我覺得 10 列對一般 22 吋螢幕會太長, 於是就直接將程式中的兩個 10 改成 5, 結果竟然整個表格內容都不見了, 而下拉式選單仍然是以 10 為步階的選單, 可見這樣改是不行的 :
無法正常顯示表格內容
網路上也找到類似問題, 提到要使用 pageList 屬性, 參考 :
# easyui datagrid pagesize设置无效
# http://www.jeasyui.com/forum/index.php?topic=3111.0
我找了官方文件, 果然找到這個 pageList 屬性用法, 原來它就是用來設定下拉式選單中的選項用的, 參考 :
# http://www.jeasyui.com/documentation/pagination.php
我在程式中添加 pageList 屬性, 包含了 5 這個選項, 這樣 pageSize 屬性才可以設定預設值 5 :
$('#listed_sector_changes').datagrid({
url:"apps/STOCK.php",
queryParams:{op:"list_listed_sector_changes"},
fitColumns:true,
singleSelect:true,
striped: true,
pagination:true,
pageSize:5,
pageList:[5,10,15,20,50],
rownumbers:true
});
此外我也參考下列文章添加了 striped 屬性, 它會讓各列以不同背景色交替顯示, 參考 :
# http://www.jeasyui.com/forum/index.php?topic=64.0 (Datagrid 顏色交替 striped)
總之, 如果 pageSize 使用了 pageList 中沒有的選項, Datagrid 就無法正常顯示內容了.
另外, 我也將 sector_changes 資料表大翻新, 原先的結構如下, 我將其中的 Sx, dSx 欄位都刪除 (藍色部分), 只留下 trade_date, volume_ratio, volume_change, index_change 這四個欄位就夠了 :
--
-- 表的結構 `sector_changes`
--
CREATE TABLE IF NOT EXISTS `sector_changes` (
`trade_date` date DEFAULT NULL,
`S1` float DEFAULT NULL,
`dS1` float DEFAULT NULL,
`S2` float DEFAULT NULL,
`dS2` float DEFAULT NULL,
`S3` float DEFAULT NULL,
`dS3` float DEFAULT NULL,
`S4` float DEFAULT NULL,
`dS4` float DEFAULT NULL,
`S5` float DEFAULT NULL,
`dS5` float DEFAULT NULL,
`S6` float DEFAULT NULL,
`dS6` float DEFAULT NULL,
`S7` float DEFAULT NULL,
`dS7` float DEFAULT NULL,
`S8` float DEFAULT NULL,
`dS8` float DEFAULT NULL,
`S9` float DEFAULT NULL,
`dS9` float DEFAULT NULL,
`S10` float DEFAULT NULL,
`dS10` float DEFAULT NULL,
`S11` float DEFAULT NULL,
`dS11` float DEFAULT NULL,
`S12` float DEFAULT NULL,
`dS12` float DEFAULT NULL,
`S13` float DEFAULT NULL,
`dS13` float DEFAULT NULL,
`S14` float DEFAULT NULL,
`dS14` float DEFAULT NULL,
`S15` float DEFAULT NULL,
`dS15` float DEFAULT NULL,
`S16` float DEFAULT NULL,
`dS16` float DEFAULT NULL,
`S17` float DEFAULT NULL,
`dS17` float DEFAULT NULL,
`S18` float DEFAULT NULL,
`dS18` float DEFAULT NULL,
`S19` float DEFAULT NULL,
`dS19` float DEFAULT NULL,
`volume_ratio` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT '類股成交量比重排序',
`volume_change` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT '類股成交量增減幅度排序',
`index_change` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT '類股指數漲幅排序'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
沒有留言 :
張貼留言