.NET EasyUI datebox添加清空功能

　前言，前段时间的项目使用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）