基於Metronic的Bootstrap開發框架經驗總結（18）-- 在代碼生成工具Database2Sharp中集成對Bootstrap-table插件的分頁及排序支持

在咱們開發系統界面，包括Web和Winform的都同樣，主要的界面就是列表展現主界面，編輯查看界面，以及一些輔助性的如導入界面，選擇界面等，其中列表展現主界面是綜合性的數據展現界面，通常每每須要對記錄進行合理的分頁，集成各類增刪改查的按鈕等功能。隨着開發項目的需求變化，對數據記錄分頁展現、排序等功能都是常態的要求，所以在代碼生成工具中調整了主列表界面的列表展現插件爲Bootstrap-table插件，本篇隨筆主要介紹在代碼生成工具Database2Sharp中集成對Bootstrap-table插件的分頁及排序支持功能。

一、Web界面列表分頁處理

1）常規分頁方式

最開始的Web界面列表分頁，使用較爲常規Bootstrap Paginator分頁模式，內容生成以HTML組合方式，先設置表頭，而後獲取分頁列表數據，遍歷生成相關的HTML數據，增長到頁面上，這種方式也是比較高效的處理方式，如我在本系列開始的隨筆《基於Metronic的Bootstrap開發框架經驗總結（2）--列表分頁處理和插件JSTree的使用》介紹中同樣。有時候爲了業務數據的快速查詢，也會在左側放置一個樹列表方便查詢分類，界面以下所示。

 這種方式可控性很是好，並且能夠對HTML代碼進行徹底的控制，很是適合在自定義界面中展現一些數據，如我以前介紹過的圖標分頁展現界面 同樣，徹底是自定義的內容展現，圖標界面以下所示。

 

2）Bootstrap-table插件分頁

使用常規的分頁方式界面可控性很是方便，不過隨着不一樣項目的一些特殊要求，對錶頭排序的需求也是很是強烈的，上面的分頁處理方式沒法實現表頭的排序功能，所以引入了使用很是普遍的Bootstrap-Table插件，該插件應用很廣、功能很是強大，能夠經過屬性配置實現很細緻的功能控制。Bootstrap-table插件提供了很是豐富的屬性設置，能夠實現查詢、分頁、排序、複選框、設置顯示列、Card View視圖、主從表顯示、合併列、國際化處理等處理功能，並且該插件同時也提供了一些不錯的擴展功能，如移動行、移動列位置等一些特殊的功能。

所以我對這個插件進行了使用研究並進行總結，這個插件的詳細使用能夠參考個人隨筆《基於Metronic的Bootstrap開發框架經驗總結（16）-- 使用插件bootstrap-table實現表格記錄的查詢、分頁、排序等處理》進行了解。這個插件界面展現也是很是美觀的。

這個插件最顯著的特色就是完美支持客戶端或者服務器的數據列排序處理，單擊表頭就能夠實現排序操做。

 

 二、在代碼生成工具Database2Sharp中集成對Bootstrap-table插件的分頁及排序支持

咱們的代碼生成工具Database2Sharp是爲了框架開發服務的，不論是Winform仍是Web開發，均可以基於數據庫的基礎上進行框架代碼的快速生成，以及界面的代碼生成，本次調整的代碼生成工具功能，在列表界面代碼中增長了對Bootstrap-table插件分頁的支持，使得咱們開發Bootstrap框架的界面代碼更加豐富、快捷。

在代碼生成工具Database2Sharp上，咱們先使用Enterprise Library代碼增量生成主體框架的框架代碼。

而後在使用Bootstrap的Web界面代碼生成功能，以下能夠在工具欄界面中選擇。

選擇數據庫和表後，能夠進行界面代碼（包括控制器代碼、視圖界面代碼）兩部分，其中視圖分爲兩種模式，一種是利用Bootstrap-table插件的分頁及排序（index.cshtml），一種是常規的Bootstrap Paginator分頁處理（index2.cshtml）。

老客戶能夠繼續使用index2.cshtml的樣式，也可使用最新的Bootstrap-table插件的分頁及排序方式（index.cshtml）。

生成的界面分爲HTML部分和JS部分，都是比較緊密聯繫的兩部分，咱們進行必定的調整便可實現豐富的界面排版。

部分的JS代碼（展現分頁部分處理）以下所示。

列表數據的顯示列，默認是以數據庫的字段進行生成，咱們在生成後能夠進行必定的調整，能夠合理顯示咱們關注的數據。

固然生成的界面代碼還有不少其餘的JS代碼，如編輯、查看的代碼和控件對應，導入、導出等代碼的處理，都是一併生成的，咱們根據須要進行必定的裁剪調整便可完成整個界面的處理了，極大的提升開發效率。