在很多頁面裡面，我們一般都需要對資料庫記錄進行清單展示并進行分頁。
左側的樹清單下面小節介紹，右邊就是我們一般的資料查詢顯示區域，分為查詢内容和資料清單兩部分，查詢内容，我們一般放在一個表單裡面進行處理，使用者觸發查詢的時候，我們對事件進行處理，并從MVC背景的控制器裡面請求對應的資料傳回給頁面前端，對資料進行顯示和分頁處理即可。
如菜單頁面的查詢代碼如下所示。
我們在頁面的JS代碼裡面，處理頁面初始化後，對資料進行查詢的處理操作，如下腳本所示。
而資料的顯示部分，HTML代碼如下所示。主要就是顯示了表頭内容，表格的主體内容grid_body則有腳本動态建構并顯示
而資料的顯示，是在頁面準備完成後，通過Search腳本函數進行處理，處理的時候，先序列号表單的條件和分頁的條件資訊，傳入MVC控制器，擷取對應的清單資料，在界面上進行動态綁定即可完成整個處理過程了。具體代碼截圖如下所示。
而其中的代碼
tr += getActionHtml(item.ID);
則是通過腳本生成一些操作按鈕，界面如下所示。
我們頁面顯示的資料一般不是固定的記錄，是以分頁也是很必要的處理，可以提高性能，也可以提高使用者的友好體驗，其中的資料分頁是采用了Bootstrap的插件Bootstrap Paginator 進行處理的。這個控件用的很多，是一個很強大的分頁插件。
該控件使用的時候，引入Jquery和Bootstrap樣式和類庫後，通過下面的代碼行即可添加使用。
該控件分頁可以通過處理page-clicked和page-changed事件進行實作。
分頁展示内容，我們通過在HTML代碼裡面添加一個DIV進行，聲明一個ID為grid_paging的UL元素，代碼如下所示。
然後具體的JS裡面處理代碼如下所示。
在MVC的背景，我們需要擷取使用者在前端頁面傳入的分頁條件和表單資料條件，這樣我們就可以根據這些參數，擷取到對應的資料傳回給用戶端了。
由于這些處理都是很通用的，是以我們可以放到基類控制器進行處理，如果需要特殊化處理，再在子類控制器裡面重寫分頁函數 FindWithPager 即可。
其中GetPagerInfo就是擷取使用者傳入進來的分頁參數，還記得我們上面前端頁面處理的URL參數嗎，如下所示。
具體MVC控制器GetPagerInfo函數的實作代碼如下所示。
然後擷取到表單條件和分頁條件後，傳入給架構的業務邏輯類處理就可以了，這裡已經是架構底層的支援範疇了，不在繼續展開。
最後的界面效果如下所示
前面小節也提高的樹清單的展示，在一般情況下，如果資料有層次的，那麼通過樹清單展示，可以很直覺的顯示出它們的結構，是以樹清單在很多情況下，可以輔助我們對資料的分類展示。
如對于使用者資料來說，我們可以根據使用者的組織機構或者角色進行分類，他們兩者可以通過樹清單進行直覺的展示，這樣我們在尋找不同類型的使用者清單的時候，就很好找了。
或者對于字典資料或者省份城市的資料，一樣更可以通過樹清單進行展示
網站對JSTree控件的使用說明及案例講解的已經很清晰了，一般情況下，我們直接參考例子就可以使用了。
簡單的JSTree使用代碼如下所示
對于JSTree的事件，我們一般可以通過下面代碼進行綁定事件。
如果我們需要擷取JStree控件選中節點的内容，然後進行相關的處理操作，那麼它的處理代碼如下所示。
輕按兩下事件，其實是連續的單擊事件處理，一般情況下，或先選中目前節點，我們也可以在輕按兩下的時候，擷取對應的節點ID，如下代碼所示。
也就是可以通過
擷取輕按兩下的節點ID，擷取選擇節點的名稱則可以通過代碼擷取：
JSTree一般我們會通過JSON資料進行動态綁定，這個JSON的資料格式定義如下所示。
一般情況下，我們通過下面的腳本進行資料的清空和綁定操作
如果我們需要給使用者提供複選框，設定JSTree的選中狀态，界面效果如下所示。
那麼一般的初始化函數就需要變化一下，如下代碼所示
綜合兩者，我們可以進一步把JSTree控件的初始化綁定提煉為一個JS的公共函數bindJsTree即可。
是以在頁面的綁定JSTree的時候，代碼可以簡化一下
對于複選框的清單，初始化代碼如下所示。
對于複選框，我們一般是初始化資料，然後在根據需要設定樹清單的選中狀态，這種不用頻繁初始化樹，可以有效提高性能和響應體驗。
那麼我們在初始化樹清單後，就需要清空選擇項，然後設定我們所需要的選擇項即可，具體代碼如下所示，注意其中的uncheck_all和check_node事件的處理。
資料儲存的時候，我們獲得JSTree的節點選中清單就可以進行資料的儲存了，具體代碼如下所示。
好了，介紹到這裡，基本上也把正常的資料展示，資料分頁；JSTree的綁定、事件處理，資料儲存等操作介紹的相對完整了，希望得到大家的繼續支援，我會繼續詳細介紹Bootstrap開發裡面涉及到的要點和各個插件的使用，以便把學習更加具體化，實用化，能夠給我們實價開發項目做有用的參考。
如果有興趣，可以繼續參考系列文章：
<a href="http://www.cnblogs.com/wuhuacong/p/4757984.html">基于Metronic的Bootstrap開發架構經驗總結（1）-架構總覽及菜單子產品的處理</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4759564.html">基于Metronic的Bootstrap開發架構經驗總結（2）--清單分頁處理和插件JSTree的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4774396.html">基于Metronic的Bootstrap開發架構經驗總結（5）--Bootstrap檔案上傳插件File Input的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4777720.html">基于Metronic的Bootstrap開發架構經驗總結（7）--資料的導入、導出及附件的檢視處理</a>