前言,前段時間的項目使用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)