zoukankan      html  css  js  c++  java
  • datagrid在MVC中的运用05-加入时间搜索条件,枚举填充下拉框

    本文主要来体验在搜索区域增加更多的搜索条件,主要包括:

    ※ 使用jQuery ui的datepicker显示时间,设置显示格式、样式。
    ※ 设置jQuery ui的onClose事件,使开始和结束时间形成约束,即选择开始时间为某天,结束时间的选择范围只能在该天以后,反之亦然。
    ※ 下拉框显示枚举值

    本文只关注视图显示,不涉及后台逻辑。关于搜索条件的过滤,请参照"datagrid在MVC中的运用02"。 

      关于显示时间

    □ Html

     <!--搜索开始--> 
        <div id="tb" style="padding:3px">        
            时间从:<input type="text" name="joinStartTime" id="joinStartTime" /> 
            到:<input type="text" name="joinEndTime" id="joinEndTime" /> 
            <a href="#" class="easyui-linkbutton" plain="false" id="btnQuery">搜索</a> 
        </div> 
        <!--搜索结束-->

    □ js部分

        <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" /> 
        <link href="~/Content/themes/default/easyui.css" rel="stylesheet" /> 
        <link href="~/Content/themes/icon.css" rel="stylesheet" /> 
        
        <script src="~/Scripts/jquery-1.10.2.js"></script> 
        <script src="~/Scripts/jquery.easyui.min.js"></script> 
        <script src="~/Scripts/easyui-lang-zh_CN.js"></script> 
        
        <script src="~/Scripts/jquery.ui.core.min.js"></script> 
        <script src="~/Scripts/jquery.ui.datepicker.min.js"></script> 
        <script src="~/Scripts/jquery.ui.datepicker-zh-CN.js"></script> 
        <script type="text/javascript"> 
            $(function() { 
                //限制起始时间 
                fromDateToDate(); 
            });
     
           
            //起始日期 
            function fromDateToDate() { 
                $('#joinStartTime').datepicker({ 
                    dateFormat: "yy-mm-dd", 
                    changeMonth: true, 
                    changeYear: true, 
                    numberOfMonths: 2, 
                    onClose: function (selectedDate) { 
                        $("#joinEndTime").datepicker("option", "minDate", selectedDate); 
                    } 
                });
     
                $('#joinEndTime').datepicker({ 
                    dateFormat: "yy-mm-dd", 
                    changeMonth: true, 
                    changeYear: true, 
                    numberOfMonths: 2, 
                    onClose: function (selectedDate) { 
                        $("#joinStartTime").datepicker("option", "maxDate", selectedDate); 
                    } 
                }); 
            }
     
        </script>    
     

    注意:
    datepicker在显示年份月份的时候,显示时间界面有撑开的情况。可以找到jquery.ui.datepicker.css文件,修改其中的i-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year { 40%;}属性。

    效果一:选择开始时间为某天,结束时间的的选择范围在该天以后

    6

    效果二:选择结束时间为某天,开始时间的选择范围在该天以前

    7

      视图下拉框显示枚举值

    □ 创建枚举

        public enum StatusEnum
        {
            Enabled = 0,
            Disabled = 1
        }

    □ 考虑到下拉框需要显示中文,我们可以在枚举成员字段打上自定义系统属性,然后利用反射来读取自定义系统属性类的某属性。自定义系统属性如下:

    using System; 
    namespace DataGridInMvc.Helper 
    { 
        /// <summary> 
        /// 打到Enum字段上的自定义系统属性 
        /// </summary> 
        public class EnumDisplayNameAttribute : Attribute 
        { 
            private string _displayName; 
            public EnumDisplayNameAttribute(string displayName) 
            { 
                _displayName = displayName; 
            }
     
            public string DisplayName 
            { 
                get 
                { 
                    return _displayName; 
                } 
            } 
        } 
    }
     

    □ 把自定义系统属性打到枚举成员上

    using DataGridInMvc.Helper; 
    namespace DataGridInMvc.Models 
    { 
        public enum StatusEnum 
        { 
            [EnumDisplayName("启用")] 
            Enabled = 0, 
            [EnumDisplayName("禁用")] 
            Disabled = 1 
        } 
    }

    □ 自定义枚举扩展类

    主要完成以下使命:
    1、前台Html.DropDownList需要List<SelectListItem>源,所以自定义枚举扩展类需要方法返回List<SelectListItem>。
    2、把枚举中的自定义系统属性反射出来作为 SelectListItem的Text属性值。

    展开

    □ 控制器

            public ActionResult Index() 
            { 
                ViewData["s"] = EnumExt.GetSelectList(typeof (StatusEnum)); 
                return View(); 
            }

    □ 视图

        <!--搜索开始--> 
        <div id="tb" style="padding:3px">        
            时间从:<input type="text" name="joinStartTime" id="joinStartTime" /> 
            到:<input type="text" name="joinEndTime" id="joinEndTime" /> 
            状态:@Html.DropDownList("ss",(List<SelectListItem>)ViewData["s"]); 
            <a href="#" class="easyui-linkbutton" plain="false" id="btnQuery">搜索</a> 
        </div> 
        <!--搜索结束--> 


    □ 效果

    8

  • 相关阅读:
    强化学习的基本迭代方法
    基于文本描述的事务聚类
    学习强化学习之前需要掌握的3种技能
    其它 华硕 ASAU S4100U 系统安装 win10安装 重装系统 Invalid Partition Table 解决
    数据分析 一些基本的知识
    Python 取样式的内容 合并多个文件的样式 自定义样式
    电商 Python 生成补单公司需要的评论格式3
    SpringBlade 本地图片上传 生成缩略图
    SQL Server 字符串截取
    SpringBlade 本地图片上传
  • 原文地址:https://www.cnblogs.com/darrenji/p/3574067.html
Copyright © 2011-2022 走看看