如何更改 Easyui Datagrid 的分頁選單 pageList 設定

最近在寫 PHP 專案時發現, EasyUI 的 Datagrid 元件底下的分頁工具列, 控制分頁的下拉式選單如果改成 5 似乎無效, 查閱了使用說明, 發現 pageSize 屬性預設就是 10, 一般設定方式如下 :

    $('#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;