Jquery EasyUI 添加清除功能实现详解

"这篇教程主要介绍了如何为Jquery EasyUI 的组件添加清除功能，特别是针对ComboBox、DateBox和DateTimeBox等表单组件。通过自定义JS函数，可以实现在组件有值时显示清除按钮，点击按钮则能清空组件内的值。" 在使用Jquery EasyUI开发Web应用时，我们常常遇到需要对某些组件如ComboBox、DateBox和DateTimeBox等限制用户只能选择而不能手动输入的情况。这可以通过设置`editable:false`来实现。然而，这样的设定会带来一个问题：一旦选择了某个值，就无法轻易地清空选择。为了解决这个问题，我们可以为这些组件添加一个“清除”按钮，使得用户在需要时能够方便地清除选定的值。 首先，我们需要定义一个JavaScript函数来实现这个功能。这里有两个关键的函数： 1. `addClear4TextBox(theId, onChangeFun)` 这个函数用于为文本框（textbox）添加清除图标。它会在文本框的值改变时自动显示或隐藏清除图标。当用户点击清除图标时，会调用`textbox('clear')`方法来清空文本框的值。如果提供了`onChangeFun`参数，这个自定义函数也会在值改变时被调用。 2. `addClear4ComboBox(theId, onChangeFun)` 类似于前一个函数，但这个函数适用于ComboBox组件。同样，它会在值改变时显示或隐藏清除图标，并且在点击清除图标时清空选中的值。如果需要，也可以提供一个`onChangeFun`函数。 此外，还有其他类似函数，如`addClear4DateBox`和`addClear4DateTimeBox`，分别用于DateBox和DateTimeBox组件，它们的工作原理与上述两个函数相同。 为了使用这些函数，你需要将组件的ID作为参数传递给相应的函数。例如，如果你有一个id为"myTextBox"的文本框，你可以这样添加清除功能： ```javascript addClear4TextBox('#myTextBox', function() { // 在这里可以放置任何需要在值改变时执行的代码 }); ``` 同样，对于一个id为"myComboBox"的ComboBox，你可以这样做： ```javascript addClear4ComboBox('#myComboBox', function() { // 自定义的onChange函数 }); ``` 这种方法的优点在于，它不仅提供了清除功能，而且通过监听onChange事件，可以确保清除操作与其他业务逻辑的协调。这种解决方案简单而灵活，可以在不改变EasyUI组件原有功能的基础上，扩展其行为，满足特定的需求。