廣告贊助

   HGrid為繼承自SimpleGrid的物件,主要是加入瀏覽翻頁、瀏覽篩選、單筆編輯功能。

擴充物件變數

擴充與覆蓋之方法 

範例

HGDE-增加活頁的方法

  HGrid的活頁是使用jQuery UI的Tabs,預設只有固定的兩頁#hgrid與#detail。你可以依需要加以增減其他活頁。

HGDE-篩選功能

  HGDE允許你自行設計各種篩選條件。

HGDE-如何建立連結欄位

  連結欄位,指在Grid中的一個欄位,點選就會開啟一個新的視窗並連結到某一個網頁。

HGDE-多瀏覽活頁

  HGrid物件通常就是一個瀏覽活頁,加一個編輯活頁。如果我們希望是一個瀏覽活頁,加數個瀏覽活頁...。

HGDE-變動式選單

  所謂「變動式選單」,指當使用者輸入某一個值以後,立刻帶出相關的內容選單,比如:輸入「台灣」,立刻顯示「所有台灣縣市」選單,再選擇某一縣市後,立刻出現當地的旅館。


擴充物件變數

    protected $filter;//篩選條件
    protected $aTabs; //String[] 更多的活頁標籤(如{"操作說明","入會辦法"}
    protected $page, $old_page;//目前頁數與原頁數
    protected $page_rows;//一頁幾行
    protected $num_rows;//總行數
    protected $isAjax;//預設為false指第一次顯示,true指翻頁等非第一次顯示
    protected $isAdd;//是否可以「新增紀錄」,預設為true

    function __Construct($p_oStk) {
        parent::__Construct($p_oStk);
        $this->page = 1;
        $this->old_page = 1;
        $this->page_rows = 10;
        $this->isAjax = false; // not at ajax post step
        $this->aTabs = array();
        $this->isAdd = true;
    }

擴充與覆蓋之方法 

override showGrid()

  以下紅字為新增加的方法,主要改變為顯示頁次與控制翻頁。

    public function showGrid($title,$rslt) {
        if (!$this->isAjax) { // only first Time Show It
            $this->showDivHeader();
        }
        $this->showBeforeGrid();
        ...
        $this->strBuf .= $this->getTableStr($rslt);
        $this->strBuf .= "<P>第<INPUT TYPE='TEXT' SIZE='3' ID='PAGE' NAME='PAGE' VALUE=" .
                $this->page . " onchange=GoToPage()>\n";
        $this->strBuf .= "頁/共" . ceil($this->num_rows / $this->page_rows) . "頁 每頁行數 ";
        $this->strBuf .= "<INPUT TYPE='TEXT' size=3 ID='PAGE_ROWS' NAME='PAGE_ROWS' VALUE=" .
                $this->page_rows . " onchange=ChgPageRows()>\n";
        $this->strBuf .= $this->getHiddenFields();
        echo $this->strBuf;		
        ...
        $this->showCtrlTail(true);
        if (!$this->isAjax) {
            $this->showDivTail();
        }
    }

showDivHeader()

  顯示jQuery UI的Tabs控制碼,以下顯示第一個活頁固定為hgrid, 第二個活頁如果有則固定為detail,你還可以增加其他活頁:

    public function showDivHeader() {
        $gridLabel = $this->getGridId();
        $detailLabel = $this->getDetailId();
        echo "<div id='tabs'><ul><li><a href='#hgrid'>$gridLabel</a></li>";
        if ("" != $detailLabel) {
            echo "<li><a href='#detail'>$detailLabel</a></li>";
        }

        for ($i = 0; $i < count($this->aTabs); $i++) {
            echo sprintf("<li><a href='#%s'>%s</a></li>", $this->aTabs[$i], $this->aTabs[$i]);
        }
        echo "</ul><div id='hgrid'>";
    }

  有關「活頁」的用法,請參考《jQuery UI Tabls》。在搭配的前端javascript檔「HGrid.js」有如下相關片段:

  $(document).ready(function () {
    $("#tabs").tabs({
        beforeActivate: function (event, ui) {
            if (g_isChange == "Y") {
                var tabId = ui.newPanel.attr('id');
                if (tabId == "hgrid") {
                    GoToPage();
                    g_isChange = "N";
                }
            }
        }
    });

showHead()

  在<head>...</head>中間我們常加入<script> 或 <style> 描述,HGrid物件預設了一些基本描述,如下:

    public function showHead($title) {
        echo "<title>" . $title . "</title>";
        $this->showStyle();
        $this->showScript();
  }
    public function showStyle() {
        echo <<<STYLE
<style type="text/css">
    table { $this->tableStyle; }
    th { $this->tableHeadStyle }
    td { $this->tdStyle }
    .link {
        padding: 0px;
        background-color: #000000;
        font-size: small;
        color: #FFFFFF;
        cursor:pointer;
    }
</style>
STYLE;
    }

    public function showScript() {
        
    }

範例

   以下為使用 HGrid 物件開發的範例。程式碼請看 StockSD_dist/htdocs/ssd/

  • mngMyStk.php -- 交易管理子系統
  • MystkGrid.php -- extends HGrid class
  • MystkHDE.php -- 單筆編輯 extends HDataEdit class

創作者介紹
創作者 jesse0606 的頭像
jesse0606

奇正

jesse0606 發表在 痞客邦 留言(0) 人氣()