根据MVC4+EasyUI的Web开发框架经验总括(14)–自动生成图标样式文件和图标的选料操作

1.2 图标样式的变通操作

有了模版,大家还亟需协会好相应的文件目录,一般的话,Web的图标可以选取16,24,32那些专业尺寸的图形,适应差别场所的要求。

故而大家创设几个不等的目录,并放入对应的模版文件和图标文件。

EasyUI 1

变迁图标样式文件的操作分为上边几个步骤:

赢得相应目录的图标文件,转换为实在的目标格式集合,生成图标样式文件,存储图表样式到数据库方便查询。

那几个操作我们在图标管理的控制器 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);

末尾,大家可以打造一个独立的页面,用来贯彻生成图标样式并保存的操作,界面如下所示。

EasyUI 2

界面操作代码如下所示。

            //绑定按钮的的点击事件
            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);
                                    }
                                }
                            });
                        }
                    });
                });
            }

  

在广大Web系统中,一般都可能提供一些图标的拔取,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更为美观和协调。可是在系统中一般内置的图标样式相相比较较单薄,而且硬编码写到样式表里面,那样给大家扩展使用有过多的不便利。基于这几个原因,我想只要能够独立一个模块,自动根据图标生成图标CSS样式文件,并蕴藏相应的笔录到数据库里面,方便我们查询突显,那样我们运用起来就很有益于了,最终有了那几个数量,只要求做一个通用的图标选拔界面,并得以在诸多地点重用了。本文正是根据那几个思路,开发了一个图标管理模块和图标接纳界面,本文主要演讲那么些开发进程和末段的出力体现。

2.2 图标的分页处理操作

杨涛的分页控件,提供了累累绑定分页的艺术,不过都重若是根据MVC的模型数据处理,在我的Web框架之中紧要使用JS绑定数据,有
一定的距离,但是既然我们都是MVC应用,整合如故没难点的。

为了显示地方的作用,大家必要树立一个表单查询的情节,代码如下所示。

            <fieldset>
                <legend>功能操作</legend>
                @using (Html.BeginForm("select", "Icon", new RouteValueDictionary { { "id", "" } }, FormMethod.Get))
                {
                    尺寸:
                    <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);
        }

最终部分是分页部分的变现了,就是在底层突显各页的页码等音讯了。

EasyUI 3

以此局地很简短,代码如下所示。

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

如此图表大小的标准就平素可以保持正确的内容,提交表单后仍是可以正常保持了。

1、图标样式生成管理

为了便于依据读取的图标文件列表,生成对应的图标样式文件,大家可以运用NVelocity组件,基于模板举行CSS样式文件的变化。关于NVelocity的行使,可以参照我多篇有关它的牵线,这些组件分外强大,我要好的代码生成工具也是依据它编写了众多模板举行代码生成,具体可以参考一下《动用NVelocity生成内容的两种艺术》那篇小说。

2、图标的分页体现

EasyUI,为了使得查看大家转移在数据库的图标列表,我们需求一个创设的界面表现格局,用来显示图标音信。传统的利用datagrid的法子相比较呆板,也不是很有益,所以大家需求自定义分页处理举办呈现,基于重用一些一石二鸟组件的口径,我尊重于采纳部分现成的零部件模块,MVC分页方面,考虑使用杨涛的MVC分页控件(http://www.webdiyer.com/mvcpager/),这个功能看起来很不错。

图片的突显方式,我愿意因此easyui的这么些例子举行突显一组图片的法力。

按照MVC4+EasyUI的Web开发框架的一连串文章:

依据MVC4+EasyUI的Web开发框架形成之旅–总体介绍

据悉MVC4+EasyUI的Web开发框架形成之旅–MVC控制器的安排性

据悉MVC4+EasyUI的Web开发框架形成之旅–界面控件的施用

基于MVC4+EasyUI的Web开发框架形成之旅–附件上传组件uploadify的使用

基于MVC4+EasyUI的Web开发框架形成之旅–框架总体界面介绍

依照MVC4+EasyUI的Web开发框架形成之旅–基类控制器CRUD的操作

依照MVC4+EasyUI的Web开发框架形成之旅–权限决定

依据MVC4+EasyUI的Web开发框架经验统计(1)-利用jQuery Tags Input
插件突显选用记录

按照MVC4+EasyUI的Web开发框架经验总计(2)-
使用EasyUI的树控件营造Web界面

据悉MVC4+EasyUI的Web开发框架经验统计(3)-
使用Json实体类营造菜单数据

据悉MVC4+EasyUI的Web开发框架经验总结(4)–使用图表控件Highcharts

基于MVC4+EasyUI的Web开发框架经验计算(5)–使用HTML编辑控件CKEditor和CKFinder

基于MVC4+EasyUI的Web开发框架经验统计(6)–在页面中使用下拉列表的拍卖

据悉MVC4+EasyUI的Web开发框架经验总计(7)–达成省份、城市、行政区三者联动

基于MVC4+EasyUI的Web开发框架经验总计(8)–达成Office文档的预览

基于MVC4+EasyUI的Web开发框架经验总计(9)–在Datagrid里面已毕外键字段的转义操作

基于MVC4+EasyUI的Web开发框架经验统计(10)–在Web界面上落到实处数据的导入和导出

基于MVC4+EasyUI的Web开发框架经验总括(11)–使用Bundles处理简化页面代码

基于MVC4+EasyUI的Web开发框架经验总括(12)–利用Jquery处理多少交互的二种方法

基于MVC4+EasyUI的Web开发框架经验总括(13)–DataGrid控件完毕自动适应宽带高度

基于MVC4+EasyUI的Web开发框架经验统计(14)–自动生成图标样式文件和图标的选项操作

3、图标的挑选

既然生成了图标文件,并且创设了图标的来得界面,那么我们就须要在一些内需安排图标的地点,能够提供一个界面采取图标了。

EasyUI 4

绑定弹出拔取图标界面操作,在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") });
        }

慎选好每个图标后,大家就会回到到主界面上,并安装好主界面上的图形样式,让它显得出大家选拔的图标效果。

EasyUI 5

 

2.1 图表彰显的界面效果

EasyUI 6

下一场系统通过把它们进行分页处理,拔取一些好的分页样式表现方法

EasyUI 7

最后落到实处的图片样式显示效果如下所示。

小图标效果如下所示。

EasyUI 8

大图标效果如下所示。

EasyUI 9

 

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变量是一个基于名称和值的聚合对象,大家遍历它举办生成就可以了。