jQuery易用户组件加“清除”功能示例详解

1.背景

使用EasyUI表单组件时，尤其是使用ComboBox、DateBox、DateTimeBox时，往往要求只能选择下拉框或日期，但不允许手动输入。这时候可以通过在组件选项中增加editable:false来实现，但是有一个问题：一旦选中，就没有了经过研究，可以使用一个替代的解决方案：在组件中增加一个“清除”按钮，有值的时候显示按钮，点击按钮清除值，没有值的时候隐藏按钮。

2.函数定义

定义JS方法，为EasyUI中的一些常用组件添加‘清除’按钮和函数。一共6个：

/* * 为'文本框'列表添加'清除'图标* 该实现使用了onChange事件，如果用户需要该事件，可传入自定义函数，会自动回调。*/函数addclear 4 TextBox(ThId，OnChangeFun){ var ThEoBj=$(THid)；//根据当前值，确定是否显示清除图标var show icon=function(){ var icon=theobj。textbox(' Geticon '，0)；if(theobj。文本框(' getValue '){图标。CSS('可见'，'可见')；} else { icon.css('可见性','隐藏');} };theObj.textbox({ //添加清除图标icon s :[{ icon cls 3360 ' icon-clear '，handler:函数{ theobj。textbox(' clear ')；} }], //值改变时，根据值，确定是否显示清除图标onchange :函数(){ if(onChangeFun){ onChangeFun()；}显示图标()；} });//根据目前值，确定是否显示清除图标显示图标()；}/* * 为'下拉列表框'添加'清除'图标* 该实现使用了onChange事件，如果用户需要该事件，可传入自定义函数，会自动回调*/function add clear 4 combobox(ThEid，OnChangeFun){ var ThEobj=$(ThEid)；//根据当前值，确定是否显示清除图标var show icon=function(){ var icon=theobj。combobox(' getIcon '，0)；if(theobj。combobox(' getValue '){ icon。CSS('可见'，'可见')；} else { icon.css('可见性','隐藏');} };theObj.combobox({ //添加清除图标icon s :[{ icon cls 3360 ' icon-clear '，handler :函数(e){ theobj。combobox(' clear ')；} }], //值改变时，根据值，确定是否显示清除图标onchange :函数(){ if(onChangeFun){ onChangeFun()；}显示图标()；} });//初始化确认图标显示显示图标()；}/* * 为'数据表格下拉框'添加'清除'图标* 该实现使用了onChange事件，如果用户需要该事件，可传入自定义函数，会自动回调。*/函数AddClear4 Combogrid(ThId，OnChangeFun){ var ThEoBj=$(THid)；//根据当前值，确定是否显示清除图标var show icon=function(){ var icon=theobj。组合网格(' getIcon '，0)；if(theobj。组合网格(' GetVaLue '){图标。CSS('可见'，'可见')；} else { icon.css('可见性','隐藏');} };theObj.combogrid({ //添加清除图标icon s :[{ icon cls 3360 ' icon-clear '，handler :函数(e){ theobj。组合网格(‘清除’)；} }], //值改变时，根据值，确定是否显示清除图标onchange :函数(){ if(onChangeFun){ onChangeFun()；}显示图标()；} });//初始化确认图标显示显示图标()；}/* * 为'数值输入框'添加'清除'图标* 该实现使用了onChange事件，如果用户需要该事件，可传入自定义函数，会自动回调*/function add clear 4 number box(THid，OnChangeFun){ var ThEobj=$(THid)；//根据当前值，确定是否显示清除图标var show icon=function(){ var icon=theobj。数字框(' Geticon '，0)；if(theobj。数字框(' getValue '){图标。CSS('可见'，'可见')；} else { icon.css('可见性','隐藏');} };theObj.numberbox({ //添加清除图标icon s :[{ icon cls 3360 ' icon-clear '，handler :函数(e){ theobj。数字框(' clear ')；} }], //值改变时，根据值，确定是否显示清除图标onchange :函数(){ if(onChangeFun){ onChangeFun()；}显示图标()；} });//初始化确认图标显示显示图标()；}/* * 为'日期选择框'添加'清除'图标* 该实现使用了onChange事件，如果用户需要该事件，可传入自定义函数，会自动回调。

*/函数addClear4Datebox(theId，onChangeFun){ var theObj=$(theId)；//根据当前值，确定是否显示清除图标var show icon=function(){ var icon=theobj。datebox(' Geticon '，0)；if(theobj。datebox(' GetVaLue '){ icon。' CSS('可见，‘可见’)；} else { icon.css('可见性','隐藏');} };theObj.datebox({ //添加清除图标icon s :[{ icon cls 3360 ' icon-clear '，handler :函数(e){ theobj。datebox(' clear ')；} }], //值改变时，根据值，确定是否显示清除图标onchange :函数(){ if(onChangeFun){ onChangeFun()；}显示图标()；} });//初始化确认图标显示显示图标()；}/* * 为'日期时间选择框'添加'清除'图标* 该实现使用了onChange事件，如果用户需要该事件，可传入自定义函数，会自动回调*/function add clear 4 datetime box(THid，OnChangeFun){ var ThEobj=$(THid)；//根据当前值，确定是否显示清除图标var show icon=function(){ var icon=theobj。datetimebox(' getIcon '，0)；if(theobj。datetimebox(' GetVaLue '){ icon。CSS('可见'，'可见')；} else { icon.css('可见性','隐藏');} };theObj.datetimebox({ //添加清除图标icon s :[{ icon cls 3360 ' icon-clear '，handler :函数(e){ theobj。datetime box(' clear ')；} }], //值改变时，根据值，确定是否显示清除图标onchange :函数(){ if(onChangeFun){ onChangeFun()；}显示图标()；} });//初始化确认图标显示显示图标()；}3、使用

使用格式如下：

(1)addClear4TextBox('#name '，NameChangedo)；//文本框，传入回调函数

(2)addClear4Combobox('#state\\ '。id ')；//下拉列表框

(3)addClear4Combogrid('#type\\。id ')；//数据表下拉框

(4)addclear 4 numberbox(' # intnum 2 ')；//数字输入框

(5)添加clear 4 datebox(' # the DATE 2 ')；//日期选择框

(6)添加clear 4 datetime box(' # theTime2 ')；//日期选择框

注意：onChange事件用于函数的实现。如果需要使用此事件来执行某些操作，可以传入自定义函数并自动回调。参见(1)。

脚本//名称更改时执行的一些操作。(演示清除操作的回调)var name changedo=function(){//alert(' changed . ');} $(function(){ addClear4TextBox(' # code ')；addClear4TextBox('#name '，NameChangedo)；addclear4 combobox(' # city ')；addClear4Combobox('#state\\ '。id ')；addClear4Combogrid('#type\\ '。id ')；addclear4 combobox(' # hobby ')；addclear 4 numberbox(' # intnum 2 ')；addclear 4 numberbox(' # double num 1 ')；addclear 4 numberbox(' # double num 2 ')；addclear 4 datebox(' # ThEdate2 ')；addclear4 datetime box(' # theTime2 ')；addclear 4 TextBox(' #备注')；});/script4，效果显示

(1)当有值时(其中类型是数据列表下拉框)

(2)没有价值的情况

以上是边肖介绍的jQuery EasyUI组件和“清除”功能示例的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！