在基于Metronic的Bootstrap開發(fā)框架中限书，一直都希望整合較新戏羽、較好的前端技術(shù)婆芦，結(jié)合MVC的后端技術(shù)進(jìn)行項(xiàng)目的開發(fā)蜂怎，隨著時(shí)間的推移穆刻，目前Metronic也更新到了4.75版本，因此著手對這個(gè)版本的內(nèi)容進(jìn)行一次更新調(diào)整杠步，以期達(dá)到與時(shí)俱進(jìn)的目的氢伟。從最近這幾個(gè)版本來看，Metronic本身的目錄結(jié)構(gòu)以及功能沒有太多的變化幽歼，但增加了一些較為方便的功能朵锣，本篇隨筆對比它們進(jìn)行介紹。
1甸私、Metronic版本更新
首先我們來對空白頁面進(jìn)行不同版本的對比诚些，文件的對比首選Beyond Compare，兩個(gè)版本文件一對比皇型，差異一目了然诬烹。
從對比差異內(nèi)容中可以看到砸烦，新版本的JS、CSS目錄結(jié)構(gòu)沒有變化绞吁，不過增加了幾個(gè)功能頁面幢痘，如下所示。
ui_metronic_grid.html掀泳、ui_sweetalert.html雪隧、components_bootstrap_multiselect_dropdown.html西轩、components_clipboard.html员舵、form_repeater.html、page_general_pricing_2.html藕畔，這幾個(gè)頁面的內(nèi)容如下所示马僻。
其中ui_metronic_grid.html主要是介紹Bootstrap柵格的各種使用方法。
ui_sweetalert.html頁面這是整合了一個(gè)非常美觀的彈出對話框控件注服，如下所示韭邓。
components_bootstrap_multiselect_dropdown.html則是介紹下拉列表多選的一個(gè)新組件實(shí)現(xiàn)。
components_clipboard.html則是介紹使用粘貼復(fù)制的基本操作溶弟，方便在頁面中使用對控件女淑、選定內(nèi)容進(jìn)行剪切板的處理。
另外增加了一個(gè)快速導(dǎo)航菜單的東西辜御，頁面代碼增加如下部分鸭你，
頁面右側(cè)增加的導(dǎo)航菜單
展開后效果如下所示。
2擒权、框架插件的更新調(diào)整
隨著這個(gè)Metronic的模板的調(diào)整袱巨，同時(shí)也使用了各個(gè)新版本的插件，因此也同時(shí)需要對這些插件的使用進(jìn)行一個(gè)調(diào)整碳抄。
1）Select2插件的調(diào)整
這個(gè)插件是基于Select的擴(kuò)展插件愉老，能夠提供更加豐富的功能和用戶體驗(yàn)，它的github官網(wǎng)地址為:https://select2.github.io/剖效，具體的使用案例嫉入，可以參考地址：https://select2.github.io/examples.html。
以Select2插件的更新為例璧尸，原來我在隨筆《基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（3）--下拉列表Select2插件的使用》中對它進(jìn)行了介紹咒林，如下所示，很多下拉列表都使用這個(gè)Select2的插件進(jìn)行展示逗宁，比較方便美觀映九。
其中賦值部分原來為：
$("#CustomerType").select2("val", info.CustomerType);
新版本統(tǒng)一了賦值的操作，和常規(guī)的控件賦值代碼保持一致瞎颗，變更如下件甥。
$("#CustomerType").val(info.CustomerType).trigger('change');
如果涉及下拉列表聯(lián)動(dòng)的話捌议，代碼還是不變：
$("#City").trigger('change');//聯(lián)動(dòng)
初始化Select2的代碼也需要進(jìn)行一定的微調(diào)，如下所示引有。
var control = $('#' + ctrlName);
//設(shè)置Select2的處理
control.select2({
placeholder: "選擇" + dictTypeName, //設(shè)置顯示占位符
allowClear: true,
escapeMarkup: function (markup) { return markup; },
templateResult: formatResult,
templateSelection: formatSelection,
width: '100% !important', //設(shè)置自動(dòng)適應(yīng)的寬度
});
2）SweetAlert對話框
這個(gè)在Metronic的早一點(diǎn)版本是沒有的瓣颅，我在隨筆《基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（6）--對話框及提示框的處理和優(yōu)化》介紹單獨(dú)采用這個(gè)插件來做刪除確認(rèn)的操作的，目前這個(gè)版本已經(jīng)整合在Metronic里面了譬正，那么我們就直接引用它的即可了宫补。
插件的地址是：http://lipis.github.io/bootstrap-sweetalert/
調(diào)整CSS和JS的引用地址，使用代碼完全一樣曾我，就完成了這個(gè)SweetAlert對話框的更新處理了粉怕。
//刪除操作的確認(rèn)
function showDelete(delFunction, tips) {
var newtips = arguments[1] || "您確認(rèn)刪除選定的記錄嗎？"
var result = false;
swal({
title: "操作提示",
text: newtips,
type: "warning", showCancelButton: true,
//confirmButtonColor: "#DD6B55",
confirmButtonClass: "btn-danger",
cancelButtonText: "取消",
confirmButtonText: "是的抒巢，執(zhí)行刪除贫贝！",
closeOnConfirm: true
}, function () {
delFunction();
});
return result;
}
相關(guān)主題文章如下所示：
從開發(fā)框架提高開發(fā)效率說起
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（14）--條碼和二維碼的生成及打印處理
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（13）--頁面鏈接收藏夾功能的實(shí)現(xiàn)2
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（12）--頁面鏈接收藏夾功能的實(shí)現(xiàn)
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（11）--頁面菜單的幾種呈現(xiàn)方式
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（10）--優(yōu)化Bootstrap圖標(biāo)管理
在MVC控制器里面使用dynamic和ExpandoObject，實(shí)現(xiàn)數(shù)據(jù)轉(zhuǎn)義的輸出
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（9）--實(shí)現(xiàn)Web頁面內(nèi)容的打印預(yù)覽和保存操作
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（8）--框架功能總體界面介紹
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（7）--數(shù)據(jù)的導(dǎo)入蛉谜、導(dǎo)出及附件的查看處理
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（6）--對話框及提示框的處理和優(yōu)化
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（5）--Bootstrap文件上傳插件File Input的使用
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（4）--Bootstrap圖標(biāo)的提取和利用
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（3）--下拉列表Select2插件的使用
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（2）--列表分頁處理和插件JSTree的使用
基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)（1）-框架總覽及菜單模塊的處理
