基於MVC4+EasyUI的Web開發框架經驗總結（14）--自動生成圖標樣式文件和圖標的選擇操做

時間 2019-11-20

標籤基於 mvc4+easyui mvc easyui web 開發框架經驗總結自動生成圖標樣式文件選擇欄目 HTML 简体版

原文原文鏈接

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

一、圖標樣式生成管理

爲了方便根據讀取的圖標文件列表，生成對應的圖標樣式文件，咱們能夠利用NVelocity組件，基於模板進行CSS樣式文件的生成。關於NVelocity的使用，能夠參考我多篇關於它的介紹，這個組件很是強大，我本身的代碼生成工具也是基於它編寫了不少模板進行代碼生成，具體能夠參考一下《使用NVelocity生成內容的幾種方式》這篇文章。css

1.1 圖標樣式文件準備

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

.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;
}

根據以上組織效果，咱們能夠定義一個模板內容以下所示。java

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

其中FileNameList變量是一個基於名稱和值的集合對象，咱們遍歷它進行生成就能夠了。web

1.2 圖標樣式的生成操做

有了模板，咱們還須要組織好對應的文件目錄，通常來講，Web的圖標可使用16,24,32這些標準大小的圖表，適應不一樣場合的須要。ajax

所以咱們建立幾個不一樣的目錄，並放入對應的模板文件和圖標文件。正則表達式

生成圖標樣式文件的操做分爲下面幾個步驟：數據庫

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

這些操做咱們在圖標管理的控制器 IconController 裏面增長方法完成，部分代碼以下所示。mvc

        /// <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);
                                    }
                                }
                            });
                        }
                    });
                });
            }

二、圖標的分頁展現

爲了有效查看咱們生成在數據庫的圖標列表，咱們須要一個合理的界面表現方式，用來顯示圖標信息。傳統的使用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" onclick="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);
            }
        });

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

三、圖標的選擇

既然生成了圖標文件，而且構建了圖標的展現界面，那麼咱們就須要在一些須要配置圖標的地方，可以提供一個界面選擇圖標了。

綁定彈出選擇圖標界面操做，在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") });
        }