http://www.cnblogs.com/wuhuacong/p/4093778.html

在很多Web系統中，一般都可能提供一些圖標的選擇，方便配置按鈕，菜單等界面元素的圖標，從而是Web系統界面看起來更加美觀和協調。但是在系統中一般內置的圖標樣式相對比較有限，而且硬編碼寫到樣式表里面，這樣給我們擴展使用有很多的不方便。基于這個原因，我想如果能夠獨立一個模塊，自動根據圖標生成圖標CSS樣式文件，并存儲相應的記錄到數據庫里面，方便我們查詢顯示，那樣我們使用起來就很方便了，最后有了這些數據，只需要做一個通用的圖標選擇界面，并可以在很多地方重用了。本文正是基于這個思路，開發了一個圖標管理模塊和圖標選擇界面，本文主要闡述這個開發過程和最終的效果展示。

1、圖標樣式生成管理

為了方便根據讀取的圖標文件列表，生成對應的圖標樣式文件，我們可以利用NVelocity組件，基于模板進行CSS樣式文件的生成。關于NVelocity的使用，可以參考我多篇關于它的介紹，這個組件非常強大，我自己的代碼生成工具也是基于它編寫了很多模板進行代碼生成，具體可以參考一下《使用NVelocity生成內容的幾種方式》這篇文章。

1.1 圖標樣式文件準備

有了這些準備，我們可以定義一個模板的文件用來生成樣式文件了，我們先看最終的樣式文件效果。

.icon-table{background:url('table.png') no-repeat center center; } .icon-telephone{background:url('telephone.png') no-repeat center center; } .icon-user{background:url('user.png') no-repeat center center; } .icon-view{background:url('view.png') no-repeat center center; } .icon-word{background:url('word.png') no-repeat center center; }

根據以上組織效果，我們可以定義一個模板內容如下所示。

#foreach($item in ${FileNameList}) .${item.Text}{background:url('${item.Value}') no-repeat center center; } #end ##endforeach

其中FileNameList變量是一個基于名稱和值的集合對象，我們遍歷它進行生成就可以了。

1.2 圖標樣式的生成操作

有了模板，我們還需要組織好對應的文件目錄，一般來說，Web的圖標可以使用16,24,32這些標準大小的圖表，適應不同場合的需要。

因此我們創建幾個不同的目錄，并放入對應的模板文件和圖標文件。

生成圖標樣式文件的操作分為下面幾個步驟：

獲取對應目錄的圖標文件，轉換為實際的對象格式集合，生成圖標樣式文件，存儲圖表樣式到數據庫方便查詢。

這些操作我們在圖標管理的控制器?IconController?里面增加方法完成，部分代碼如下所示。

/// <summary>/// 生成圖標文件/// </summary>/// <param name="iconSize">圖表尺寸，可選16,32等</param>/// <returns></returns>public ActionResult GenerateIconCSS(int iconSize = 16){CommonResult result = new CommonResult();string realPath = Server.MapPath("~/Content/icons-customed/" + iconSize);if (Directory.Exists(realPath)){List<CListItem> list = GetImageToList(realPath, iconSize);try{//使用相對路徑進行構造處理string template = string.Format("Content/icons-customed/{0}/icon.css.vm", iconSize);NVelocityHelper helper = new NVelocityHelper(template);helper.AddKeyValue("FileNameList", list);helper.FileNameOfOutput = "icon";helper.FileExtension = ".css";helper.DirectoryOfOutput = realPath;//指定實際路徑string outputFilePath = helper.ExecuteFile();if (!string.IsNullOrEmpty(outputFilePath)){result.Success = true;//寫入數據庫bool write = BLLFactory<Icon>.Instance.BatchAddIcon(list, iconSize);}}catch (Exception ex){LogTextHelper.Error(ex);result.ErrorMessage = ex.Message;}}else{result.ErrorMessage = "沒有找到圖片文件";}return ToJsonContent(result);}

上面的方法很好的完成了對圖標樣式的生成和保存數據庫的操作，這個生成操作主要就是基于模板化的生成，非常方便。

在構建名稱值的集合的時候，注意圖標樣式名稱，不能包含有 一些特殊的字符，如[]()這些符號需要去掉，因此可以通過下面的正則表達式替換方法進行去除。

string displayText = Path.GetFileNameWithoutExtension(file);//文件名需要去除（）和[]等符號displayText = CRegex.Replace(displayText, @"[)\];,\t\r ]|[\n]", "", 0);displayText = CRegex.Replace(displayText, @"[(\[]", "-", 0);

最終，我們可以構建一個獨立的頁面，用來實現生成圖標樣式并保存的操作，界面如下所示。

界面操作代碼如下所示。

//綁定按鈕的的點擊事件function BindEvent() { $("#btnGenerateCSS").click(function () {$.messager.confirm("操作確認", "您確認重新生成圖標記錄嗎？", function (action) {if (action) {//圖表尺寸var iconSize = $("#IconSize").combobox('getValue');//alert(iconSize);var postData = "";$.ajax({type: 'POST',url: '/Icon/GenerateIconCSS?iconSize=' + iconSize,dataType: 'json',data: postData,success: function (data) {if (data.Success) {showTips("操作成功");location.reload();}else {showError("操作失敗：" + data.ErrorMessage, 3000);}}});}});});}

??

2、圖標的分頁展示

為了有效查看我們生成在數據庫的圖標列表，我們需要一個合理的界面表現方式，用來顯示圖標信息。傳統的使用datagrid的方式比較呆板，也不是很方便，所以我們需要自定義分頁處理進行展現，基于重用一些優秀組件的原則，我側重于使用一些現成的組件模塊，MVC分頁方面，考慮使用楊濤的MVC分頁控件（http://www.webdiyer.com/mvcpager/），這個功能看起來很不錯。

圖表的展現方式，我希望通過easyui的這個例子進行展現一組圖表的效果。

2.1 圖表展現的界面效果

然后系統通過把它們進行分頁處理，選擇一些好的分頁樣式表現方式

最終實現的圖表樣式顯示效果如下所示。

小圖標效果如下所示。

大圖標效果如下所示。

?

2.2 圖標的分頁處理操作

楊濤的分頁控件，提供了很多綁定分頁的方式，不過都主要是基于MVC的模型數據處理，在我的Web框架里面主要利用JS綁定數據，有 一定的差異，但是既然大家都是MVC應用，整合還是沒問題的。

為了展現上面的效果，我們需要建立一個表單查詢的內容，代碼如下所示。

<fieldset><legend>功能操作</legend>@using (Html.BeginForm("select", "Icon", new RouteValueDictionary { { "id", "" } }, FormMethod.Get)){<span>尺寸：</span><select class="easyui-combobox" id="IconSize" name="IconSize" style="width:100px"><option value="16">16×16</option><option value="24">24×24</option><option value="32">32×32</option></select><input type="submit" value="搜索(S)" accesskey="S" />}</fieldset>

數據內容的展現，主要就是利用了easyUI的樣式，創建一些linkbutton的代碼，代碼如下所示。這里注意的是，我也是用了model，它是PagedList<WHC.MVCWebMis.Entity.IconInfo>類型的。

也就是說，最終這個視圖界面后臺，是有一個模型的綁定的。

<div id="contents">@using Webdiyer.WebControls.Mvc;@model PagedList<WHC.MVCWebMis.Entity.IconInfo>@foreach (var item in Model){<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="SelectItem(this, '@item.IconCls')" id="@item.ID" data-options="plain:true,iconCls:'@item.IconCls',size:'large',toggle:true"> </a>}</div>

圖標后臺處理的控制器方法如下所示。

/// <summary>/// 根據條件獲取基于PagedList的對象集合，并返回給分頁視圖使用/// </summary>/// <param name="id">分頁頁碼</param>/// <param name="iconsize">圖標尺寸</param>/// <returns></returns>private PagedList<IconInfo> GetPageList(int? id, int? iconsize = 16){int size = iconsize ?? 16;int pageIndex = id ?? 1;int pageSize = 200;PagerInfo pagerInfo = new PagerInfo();pagerInfo.CurrenetPageIndex = pageIndex;pagerInfo.PageSize = pageSize;string where = string.Format("iconsize = {0}", size);List<IconInfo> list = BLLFactory<Icon>.Instance.FindWithPager(where, pagerInfo);PagedList<IconInfo> pageList = pageList = new PagedList<IconInfo>(list, pageIndex, pageSize, pagerInfo.RecordCount);return pageList;}/// <summary>/// 根據條件獲取分頁數據集合，并綁定到視圖里面/// </summary>/// <param name="id">分頁頁碼</param>/// <param name="iconsize">圖標尺寸</param>/// <returns></returns>public ActionResult Select(int? id = 1, int? iconsize = 16){PagedList<IconInfo> pageList = GetPageList(id, iconsize);return View("select", pageList);}

最后部分是分頁部分的展現了，就是在底部展現各頁的頁碼等信息了。

這個部分很簡單，代碼如下所示。

<div><div style="float:left;width:50%">共 @Model.TotalPageCount 頁 @Model.TotalItemCount 條記錄，當前為第 @Model.CurrentPageIndex 頁</div>@Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id" }, new { style = "float:right", id = "badoopager" })</div>

在分頁的時候，可能很多時候，發現更新頁面后，條件就消失了，這種情況是因為沒有很好綁定條件的值到界面上，我們可以通過頁面加載完成后，把URL里面的參數值賦值給控件就可以了。

$(function () {var iconSize = '@Request.QueryString["iconSize"]';if(iconSize != undefined && iconSize != ""){$("#IconSize").combobox('setValue', iconSize);}});

這樣圖表大小的條件就一直可以保持正確的內容，提交表單后依舊可以正常保持了。

3、圖標的選擇

既然生成了圖標文件，并且構建了圖標的展示界面，那么我們就需要在一些需要配置圖標的地方，能夠提供一個界面選擇圖標了。

綁定彈出選擇圖標界面操作，在EasyUI的基礎上，使用了擴展對話框的操作，可以彈出一個外部頁面的選擇圖標菜單。

function SelectIcon(id, value) {$.showWindow({title: '選擇圖標',useiframe: true,width: 960,height: 640,content: 'url:/Icon/Select',data: { id: $(id), value: $(value) },buttons: [{text: 'OK',iconCls: 'icon-ok',handler: 'doOK' //此方法在_content3.html中}, {text: '取消',iconCls: 'icon-cancel',handler: function (win) {win.close();}}],onLoad: function (win, content) {//window打開時調用，初始化form內容if (content) {content.doInit(win);}}});}//綁定選擇按鈕的事件function BindSelectIconEvent() {$("#tdIcon").click(function () { SelectIcon("#imgIcon", "#WebIcon") });$("#tdIcon1").click(function () { SelectIcon("#imgIcon1", "#WebIcon1") });}

選擇好每個圖標后，我們就會返回到主界面上，并設置好主界面上的圖表樣式，讓它顯示出我們選擇的圖標效果。

總結

以上是生活随笔為你收集整理的（转）基于MVC4+EasyUI的Web开发框架经验总结（14）--自动生成图标样式文件和图标的选择操作...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。