前言,前段时间的项目使用EasyUI框架搭建,使用了其自带的一系列组件。但对于datebox,其功能别的不多说,令人蛋疼的是它居然没有清空功能,这让在搜索区域中摆了日期条件的咋整啊,没办法,既然用了这套前端框架,有问题就得解决,于是想到了自己添加清空功能。

  结合在网上找到的一些解决方法以及实际需要,特整理如下。

  1.jquery.easyui.min.js文件修改(版本 jQuery EasyUI 1.3.3)

    (1)第11361行:

    //为datebox定义清空按钮
    $("<a href=\"javascript:void(0)\" class=\"datebox-clean\"></a>").html(opts.cleanText).appendTo(_858);

    (2)第11375行:

    //为datebox清空按钮添加事件
    _858.find(".datebox-clean").click(function(){
      $(_853).combo("setValue","").combo("setText","");//设置空值
      $(_853).combo("hidePanel");//点击清空按钮之后关闭日期选择面板
    });

    (3)第11445行:

    //定义日期选择面板上的按钮显示文本

    //为清空按钮指定默认显示文本Clean
    currentText:"Today",cleanText:"Clean",closeText:"Close",okText:"Ok"

  2.easyui-lang-zh_CN.js(这是汉化包文件)  

    (1)第40行:

    $.fn.datebox.defaults.cleanText = '清空&nbsp;&nbsp;&nbsp;'; //修改datebox清空按钮显示文本,添加&nbsp;是为了在datetimebox中清空和确定按钮位置隔开
    $.fn.datebox.defaults.okText = '&nbsp;&nbsp;&nbsp;确定';

    (2)第67行:

    cleanText: $.fn.datebox.defaults.cleanText, //为清空按钮知道默认显示文本

  

  3.easyui.css

    //找到所选easyui主题下文件夹下的easyui.css文件,添加如下样式
    第1528行:
    .datebox-clean,
    .datebox-clean {
      float: center;
    }

  按照以上三步下来,确定无误,保存之后,即可看到效果了,怎么样?可以清空了吧。

  注:不同版本的jquery.easyui.min.js文件要修改的位置行数可能不一致,请仔细查看。(当前版本: jQuery EasyUI 1.3.3)

.NET EasyUI datebox添加清空功能的更多相关文章

  1. EasyUI 1.3.6 DateBox添加清空按钮

    EasyUI 1.3.6 DateBox添加清空按钮 效果如图: EasyUI datebox是没有清空按钮的,可通过如下方法加入: 打开jquery.easyui.min.js看到这样如此乱的代码, ...

  2. easyui datebox 扩展清空按钮及日期判断

    <input id="EndHavDate" class="easyui-datebox" data-options="prompt:'请选择结 ...

  3. easyUI的datebox添加清空按钮功能

    需要修改源码: 第一步:按下图修改 第二步:按下两图修改(*zh_CN.js)

  4. easyui datebox 扩展清空按钮

    /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; (function ($) { var buttons = $.ext ...

  5. 给easyui datebox时间框控件扩展一个清空的实例

    给easyui datebox扩展一个清空的实例 步骤一:拓展插件 /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; ( ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加查询功能

    jQuery EasyUI 数据网格 - 添加查询功能 本实例演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中.然后演示如何根据用户输入的搜索关键词搜寻显示结果. 创建数据网格( ...

  7. [转载]EasyUI中数据表格DataGrid添加排序功能

    我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...

  8. 为Jquery EasyUI 组件加上“清除”功能

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或 ...

  9. EasyUI datebox 设置不可编辑后再次修改为可编辑失效的解决

    工作中遇到的问题,折腾了好久: 如下图: 需求:当状态发生改变后,如果状态是未核实 ,  核实人 核实时间 核实结果 核实说明  均为不可编辑状态 具体js代码如下: //状态改变    $('#js ...

随机推荐

  1. python数据类型,数据结构

    数据类型:int,bool 数据结构:dict,list,tuple,set,str

  2. <scrapy爬虫>爬取校花信息及图片

    1.创建scrapy项目 dos窗口输入: scrapy startproject xiaohuar cd xiaohuar 2.编写item.py文件(相当于编写模板,需要爬取的数据在这里定义) # ...

  3. 2019-2-13-Latex-论文elsevier,手把手如何用Latex写论文

    title author date CreateTime categories Latex 论文elsevier,手把手如何用Latex写论文 lindexi 2019-02-13 10:38:20 ...

  4. 微信小程序之组件的集合(五)

    这个是学习复杂的组件的封装的,在课程中,主要实现的是书单上方的搜索功能组件的开发,这个应该是较之前的组件是有一定难度的,但是现在学到现在,感觉前端的内容和后端的内容比较起来,还是比较容易的,而且好多内 ...

  5. Flink 1.9 实战:使用 SQL 读取 Kafka 并写入 MySQL

    上周六在深圳分享了<Flink SQL 1.9.0 技术内幕和最佳实践>,会后许多小伙伴对最后演示环节的 Demo 代码非常感兴趣,迫不及待地想尝试下,所以写了这篇文章分享下这份代码.希望 ...

  6. 让pandoc输出pdf时支持中文

    主机环境为:Ubuntu 12.04 LTS.对于RH系列,yum安装包的名称可能会有不同,不过yum联想能力比较强,应该不是问题. 安装pandoc,安装tex-live sudo apt-get ...

  7. ac68u、r8500 梅林固件扩展为一个小型 linux 系统

    事先刷 merlin 固件 1.安装 Entware 在安装之前,你需要在路由器中插入一个 U 盘,并将其格式化为 Ext3 / Ext4 格式,插上后在 /mnt/ 下应会多个 sda 设备出来 e ...

  8. STL中的unique()和lower_bound ,upper_bound

    unique(): 作用:unique()的作用是去掉容器中相邻元素的重复元素(数组可以是无序的,比如数组可以不是按从小到大或者从大到小的排列方式) 使用方法:unique(初始地址,末地址): 这里 ...

  9. 高性能非阻塞 Web 服务器 Undertow

    Undertow 简介 Undertow是一个用java编写的.灵活的.高性能的Web服务器,提供基于NIO的阻塞和非阻塞API. Undertow的架构是组合式的,可以通过组合各种小型的目的单一的处 ...

  10. css3之文本和颜色功能之text-overflow,word-wrap

    语法 text-overflow: clip|ellipsis|string; clip修剪文本.ellipsis显示省略符号来代表被修剪的文本.string使用给定的字符串来代表被修剪的文本. 效果 ...