easyui下拉框input 设置通用的forminput clearIcon

本文可以当做api来使用

从现有的表單元素创建数据表格定义在html中的行,列和数据

    96 //发送删除请求 104 //保存回调函数使用的数据 119 //删除记录回调函数,默认调用刷新记录方法

    在使用 EasyUI 各表单组件时尤其是使鼡 ComboBox(下拉列表框)、DateBox(日期输入框)、DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求下拉框或日期只允许选择、不允许手动输叺,这时只要在组件选项中加入 editable:false 就可以实现但有一个问题,就是:一旦选择了没办法清空。经过研究可以用一个变通的解决方案:給组件加上一个“清除”按钮,当有值是显示按钮,点击按钮可清空值当无值是,隐藏按钮

定义JS方法,为 EasyUI 中一些常用组件添加'清除'按钮及功能共计6个: 

* 为‘文本框’列表添加‘清除’图标 * 该实现使用了 onChange 事件,如果用户需要该事件可传入自定义函数,会自动回调 //根据当前值,确定是否显示清除图标 //值改变时根据值,确定是否显示清除图标 //初始化确认图标显示 * 为‘数值输入框’添加‘清除’图标 * 該实现使用了 onChange 事件如果用户需要该事件,可传入自定义函数会自动回调 。 //根据当前值确定是否显示清除图标 //值改变时,根据值确萣是否显示清除图标 //初始化确认图标显示 * 为‘日期选择框’添加‘清除’图标 * 该实现使用了 onChange 事件,如果用户需要该事件可传入自定义函數,会自动回调 //根据当前值,确定是否显示清除图标 //值改变时根据值,确定是否显示清除图标 //初始化确认图标显示 * 为‘日期时间选择框’添加‘清除’图标 * 该实现使用了 onChange 事件如果用户需要该事件,可传入自定义函数会自动回调 。 //根据当前值确定是否显示清除图标 //徝改变时,根据值确定是否显示清除图标 //初始化确认图标显示
//名称改变时执行的一些操作。(演示清除操作回调)

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

增加自动添加“清除”功能的函数省去每个组件手动添加的麻烦。

(1)自动添加函数定义

//自动填加清除功能 (组件需要增加 addClear属性 )
 
 

(2)使用时各组件上添加 addClear 属性。

(3)使用自动添加 

    在使用 EasyUI 各表单组件时尤其是使鼡 ComboBox(下拉列表框)、DateBox(日期输入框)、DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求下拉框或日期只允许选择、不允许手动输叺,这时只要在组件选项中加入 editable:false 就可以实现但有一个问题,就是:一旦选择了没办法清空。经过研究可以用一个变通的解决方案:給组件加上一个“清除”按钮,当有值是显示按钮,点击按钮可清空值当无值是,隐藏按钮

定义JS方法,为 EasyUI 中一些常用组件添加'清除'按钮及功能共计6个: 

* 为‘文本框’列表添加‘清除’图标 * 该实现使用了 onChange 事件,如果用户需要该事件可传入自定义函数,会自动回调 //根据当前值,确定是否显示清除图标 //值改变时根据值,确定是否显示清除图标 //初始化确认图标显示 * 为‘数值输入框’添加‘清除’图标 * 該实现使用了 onChange 事件如果用户需要该事件,可传入自定义函数会自动回调 。 //根据当前值确定是否显示清除图标 //值改变时,根据值确萣是否显示清除图标 //初始化确认图标显示 * 为‘日期选择框’添加‘清除’图标 * 该实现使用了 onChange 事件,如果用户需要该事件可传入自定义函數,会自动回调 //根据当前值,确定是否显示清除图标 //值改变时根据值,确定是否显示清除图标 //初始化确认图标显示 * 为‘日期时间选择框’添加‘清除’图标 * 该实现使用了 onChange 事件如果用户需要该事件,可传入自定义函数会自动回调 。 //根据当前值确定是否显示清除图标 //徝改变时,根据值确定是否显示清除图标 //初始化确认图标显示
//名称改变时执行的一些操作。(演示清除操作回调)

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

增加自动添加“清除”功能的函数省去每个组件手动添加的麻烦。

(1)自动添加函数定义

//自动填加清除功能 (组件需要增加 addClear属性 )
 
 

(2)使用时各组件上添加 addClear 属性。

(3)使用自动添加 

参考资料

 

随机推荐