在我們開發(fā)系統(tǒng)界面太防，包括Web和Winform的都一樣辞嗡，主要的界面就是列表展示主界面蝙云，編輯查看界面氓皱，以及一些輔助性的如導(dǎo)入界面，選擇界面等，其中列表展示主界面是綜合性的數(shù)據(jù)展示界面波材，一般往往需要對記錄進行合理的分頁股淡，集成各種增刪改查的按鈕等功能。隨著開發(fā)項目的需求變化廷区，對數(shù)據(jù)記錄分頁展示唯灵、排序等功能都是常態(tài)的要求，因此在代碼生成工具中調(diào)整了主列表界面的列表展示插件為Bootstrap-table插件隙轻，本篇隨筆主要介紹在代碼生成工具Database2Sharp中集成對Bootstrap-table插件的分頁及排序支持功能埠帕。
1、Web界面列表分頁處理
1）常規(guī)分頁方式
最開始的Web界面列表分頁玖绿，使用較為常規(guī)Bootstrap Paginator分頁模式敛瓷，內(nèi)容生成以HTML組合方式，先設(shè)置表頭镰矿，然后獲取分頁列表數(shù)據(jù)琐驴，遍歷生成相關(guān)的HTML數(shù)據(jù)，增加到頁面上秤标，這種方式也是比較高效的處理方式绝淡，如我在本系列開始的隨筆《基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)（2）--列表分頁處理和插件JSTree的使用》介紹中一樣。有時候為了業(yè)務(wù)數(shù)據(jù)的快速查詢苍姜，也會在左側(cè)放置一個樹列表方便查詢分類牢酵，界面如下所示。
這種方式可控性非常好衙猪，而且可以對HTML代碼進行完全的控制馍乙，非常適合在自定義界面中展示一些數(shù)據(jù)，如我之前介紹過的圖標分頁展示界面 一樣垫释，完全是自定義的內(nèi)容展示丝格，圖標界面如下所示。
2）Bootstrap-table插件分頁
使用常規(guī)的分頁方式界面可控性非常方便棵譬，不過隨著不同項目的一些特殊要求显蝌，對表頭排序的需求也是非常強烈的，上面的分頁處理方式無法實現(xiàn)表頭的排序功能订咸，因此引入了使用非常廣泛的Bootstrap-Table插件曼尊，該插件應(yīng)用很廣、功能非常強大脏嚷，可以通過屬性配置實現(xiàn)很細致的功能控制骆撇。Bootstrap-table插件提供了非常豐富的屬性設(shè)置，可以實現(xiàn)查詢父叙、分頁神郊、排序肴裙、復(fù)選框、設(shè)置顯示列涌乳、Card View視圖践宴、主從表顯示、合并列爷怀、國際化處理等處理功能，而且該插件同時也提供了一些不錯的擴展功能带欢，如移動行运授、移動列位置等一些特殊的功能。
因此我對這個插件進行了使用研究并進行總結(jié)乔煞，這個插件的詳細使用可以參考我的隨筆《基于Metronic的Bootstrap開發(fā)框架經(jīng)驗總結(jié)（16）-- 使用插件bootstrap-table實現(xiàn)表格記錄的查詢吁朦、分頁、排序等處理》進行了解渡贾。這個插件界面展示也是非常美觀的逗宜。
這個插件最顯著的特點就是完美支持客戶端或者服務(wù)器的數(shù)據(jù)列排序處理，單擊表頭就可以實現(xiàn)排序操作空骚。
2纺讲、在代碼生成工具Database2Sharp中集成對Bootstrap-table插件的分頁及排序支持
我們的代碼生成工具Database2Sharp是為了框架開發(fā)服務(wù)的，不管是Winform還是Web開發(fā)囤屹，都可以基于數(shù)據(jù)庫的基礎(chǔ)上進行框架代碼的快速生成熬甚，以及界面的代碼生成，本次調(diào)整的代碼生成工具功能肋坚，在列表界面代碼中增加了對Bootstrap-table插件分頁的支持乡括，使得我們開發(fā)Bootstrap框架的界面代碼更加豐富、快捷智厌。
在代碼生成工具Database2Sharp上诲泌，我們先使用Enterprise Library代碼增量生成主體框架的框架代碼。
然后在使用Bootstrap的Web界面代碼生成功能铣鹏，如下可以在工具欄界面中選擇敷扫。
選擇數(shù)據(jù)庫和表后，可以進行界面代碼（包括控制器代碼吝沫、視圖界面代碼）兩部分呻澜，其中視圖分為兩種模式，一種是利用Bootstrap-table插件的分頁及排序（index.cshtml）惨险，一種是常規(guī)的Bootstrap Paginator分頁處理（index2.cshtml）羹幸。
老客戶可以繼續(xù)使用index2.cshtml的樣式，也可以使用最新的Bootstrap-table插件的分頁及排序方式（index.cshtml）辫愉。
生成的界面分為HTML部分和JS部分栅受，都是比較緊密聯(lián)系的兩部分，我們進行一定的調(diào)整即可實現(xiàn)豐富的界面排版。
部分的JS代碼（展示分頁部分處理）如下所示屏镊。
列表數(shù)據(jù)的顯示列依疼，默認是以數(shù)據(jù)庫的字段進行生成，我們在生成后可以進行一定的調(diào)整而芥，可以合理顯示我們關(guān)注的數(shù)據(jù)律罢。
當然生成的界面代碼還有很多其他的JS代碼，如編輯棍丐、查看的代碼和控件對應(yīng)误辑，導(dǎo)入、導(dǎo)出等代碼的處理歌逢，都是一并生成的巾钉，我們根據(jù)需要進行一定的裁剪調(diào)整即可完成整個界面的處理了，極大的提高開發(fā)效率秘案。
