前言,前段时间的项目使用EasyUI框架搭建,使用了其自带的一系列组件。但对于datebox,其功能别的很少说,使人蛋疼的是它竟然没有清空功能,这让在搜索区域中摆了日期条件的咋整啊,没办法,既然用了这套前端框架,有问题就得解决,因而想到了本身添加清空功能。javascript
结合在网上找到的一些解决方法以及实际须要,特整理以下。css
1.jquery.easyui.min.js文件修改(版本 jQuery EasyUI 1.3.3)html
(1)第11361行:前端
//为datebox定义清空按钮
$("<a href=\"javascript:void(0)\" class=\"datebox-clean\"></a>").html(opts.cleanText).appendTo(_858);java
(2)第11375行:jquery
//为datebox清空按钮添加事件
_858.find(".datebox-clean").click(function(){
$(_853).combo("setValue","").combo("setText","");//设置空值
$(_853).combo("hidePanel");//点击清空按钮以后关闭日期选择面板
});前端框架
(3)第11445行:app
//定义日期选择面板上的按钮显示文本框架
//为清空按钮指定默认显示文本Clean
currentText:"Today",cleanText:"Clean",closeText:"Close",okText:"Ok"ide
2.easyui-lang-zh_CN.js(这是汉化包文件)
(1)第40行:
$.fn.datebox.defaults.cleanText = '清空 '; //修改datebox清空按钮显示文本,添加 是为了在datetimebox中清空和肯定按钮位置隔开
$.fn.datebox.defaults.okText = ' 肯定';
(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)