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

※ 使用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 { width: 40%;}属性。

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

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

视图下拉框显示枚举值

□ 创建枚举

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属性值。

展开using System;
using System.Collections.Generic;
using System.Reflection;
using System.Web.Mvc; namespace DataGridInMvc.Helper
{
/// <summary>
/// 把枚举转换成SelectListItem
/// </summary>
public class EnumExt
{
/// <summary>
/// 获取枚举成员的自定义Attribute的一个属性值
/// </summary>
/// <param name="e">枚举成员</param>
/// <returns></returns>
public static string GetEnumDescription(object e)
{
//获取枚举成员的Type对象
Type t = e.GetType(); //获取Type对象的所有字段
FieldInfo[] ms = t.GetFields(); //遍历所有字段
foreach (FieldInfo f in ms)
{
//如果当前所遍历字段的名称和枚举成员名称不一致,就跳出本次循环
if (f.Name != e.ToString())
{
continue;
} //判断当前所遍历字段中是否包含自定义系统属性
if (f.IsDefined(typeof(EnumDisplayNameAttribute), true))
{
//从当前所遍历字段中获取自定义系统属性,并根据自定义系统属性拿到它的属性值DisplayName,并返回
if (f.GetCustomAttributes(typeof(EnumDisplayNameAttribute), true) != null)
{
return (f.GetCustomAttributes(typeof(EnumDisplayNameAttribute), true)[0] as EnumDisplayNameAttribute).DisplayName;
} }
}
//如果以上失败就返回枚举成员的名称,比如Disabled
return e.ToString();
} //List<SelectListItem>正是前台视图所需要的集合
public static List<SelectListItem> GetSelectList(Type enumType)
{
List<SelectListItem> selectList = new List<SelectListItem>();
selectList.Add(new SelectListItem {Text = "--请选择--", Value = ""});
//通过Enum.GetValues(enumType)获取到的是Dictionary<int, value>键值集合
//key=0,value=Enabled类似这样的键值对
//(int)e 实际上拿到的就是key
foreach (object e in Enum.GetValues(enumType))
{
selectList.Add(new SelectListItem {Text = GetEnumDescription(e), Value = ((int) e).ToString()});
}
return selectList;
} }
}

□ 控制器

        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> 
    <!--搜索结束--> 

□ 效果

datagrid在MVC中的运用05-加入时间搜索条件,枚举填充下拉框的更多相关文章

  1. ASP.NET MVC 中枚举生成下拉框

    最近公司在开发财务系统,在工作中遇到不少的地方需要下拉框. 但是枚举框中数据的内容又来自枚举. 枚举代码如下: public class EnumDemo { public enum Value { ...

  2. datagrid在MVC中的运用02-结合搜索

    本文接着上一篇,来体验给datagrid加上搜索功能.主要涉及到: ※ 把一个div与datagrid相关起来 ※ datagrid接收查询参数 ※ 查询参数的封装 效果图: 查询参数封装 分页相关的 ...

  3. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  4. datagrid在MVC中的运用01-基本属性并实现分页

    本文体验jQuery EasyUI的datagrid在MVC中的应用.主要涉及到: ※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view ...

  5. MVC 中的@Html.DropDownList下拉框的使用

    MVC 中的下拉框 实现方式,下面为大家介绍一个我自己认为比较好用的实现方式,而二话不说直接上代码: 第一步: 后台代码 //公共的方法 //在每次需要展示下拉框的时候,需要调用一下这个方法 [数据源 ...

  6. ASP.NET MVC中的cshtml页面中的下拉框的使用

    ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...

  7. 实现在easyui中的datagrid,点击某一列的列头弹出combobox下拉框

    easyUI  datagrid在列头加下拉框,实现对列内容的筛选. 代码: onLoadSuccess: function (data) {//Fires when data is loaded s ...

  8. jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...

  9. 用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”

    接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...

随机推荐

  1. JavaEE:JavaEE技术组成

    Java平台版本: JavaSE:Java Platform Standard Edition,标准版,用来开发桌面应用系统: JavaEE:Java Plateform Enterprise Edi ...

  2. .NET魔法堂:工程构建基石-&gt;MSBuild

    一.前言 MSBuild是一个既熟悉又陌生的名字,Visual Studio的项目加载和构建均通过MSBuild来实现.VS中右键打开项目菜单,对应MSBuild的Build目标,对应MSBuild的 ...

  3. C# 词法分析器(三)正则表达式

    系列导航 (一)词法分析介绍 (二)输入缓冲和代码定位 (三)正则表达式 (四)构造 NFA (五)转换 DFA (六)构造词法分析器 (七)总结 正则表达式是一种描述词素的重要表示方法.虽然正则表达 ...

  4. Codeforces Round 261 Div.2 E Pashmak and Graph --DAG上的DP

    题意:n个点,m条边,每条边有一个权值,找一条边数最多的边权严格递增的路径,输出路径长度. 解法:先将边权从小到大排序,然后从大到小遍历,dp[u]表示从u出发能够构成的严格递增路径的最大长度. dp ...

  5. #import与@class的区别

    转自:http://www.cnblogs.com/jqyp/archive/2012/01/13/2321707.html 1.import会包含这个类的所有信息,包括实体变量和方法,而@class ...

  6. ios Swift 算法

    // Playground - noun: a place where people can play import Cocoa var nums = Int[]() ... { nums.appen ...

  7. Redux的工作流程

    1.Redux 是一个专门用来管理数据业务或逻辑状态的框架,它也可以实现代码结构的规范化并提供组件之间通信的便利,而这两点,对于大型应用来说非常关键. 2.工作流程: Redux 三大原则 单一数据源 ...

  8. 异步编程之asyncio简单介绍

    引言: python由于GIL(全局锁)的存在,不能发挥多核的优势,其性能一直饱受诟病.然而在IO密集型的网络编程里,异步处理比同步处理能提升成百上千倍的效率,弥补了python性能方面的短板. as ...

  9. 浅析ARM公司在物联网领域的战略布局(转)

    随着ARM芯片的出货量越来越多,自信满满的ARM公司统一软硬件平台的战略和雄心壮志越来越凸显.最初ARM公司仅是出售自己的知识产权(IP核)给各大芯片公司,由于最初ARM公司处于劣势,所以给芯片厂商很 ...

  10. Oracle ODP.NET vs Microsoft MSDP

    08年做项目时,用 VS 2005,写据库层还在用 MSDP(System.Data.OracleClient),但是当时由于要操作 XML 和二进制文件,所以又使用了 ODP.NET(Oracle. ...