来自 服务器&运维 2019-12-29 05:22 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

为Jquery EasyUI 组件加上清除功能的方法_jquery_脚本之家

我们有一个模块如下图,要求选择“地区”及“代维公司”后,刷新第一个DataGrid框体 并以第一个结果集中的行为数据条件点击完成下一个框体的检索 现在我们已完成相应功能,并在选择“地区”及“代维公司”并保证这两个选项同时有值后,自动刷新第一个DataGrid结果集 但是在DG1刷新完毕后,后面两个紧跟的DG2及DG3还是保有之前的结果 我试图更改DG2及DG3的查询条件,手动传一个空的ID值给query()方法,但是后被后台的Controller层当作首次查询return掉 于是查到这样一个方法,可以给它们一个空结果集串 如下 复制代码 代码如下: //修改代维公司选框后重新提交查询 function query1(){ var params = $.datagrid.queryParams; params.region = $.combotree; params.company_id = $.combotree; params.contract_type = "line";//*目前写死为线路,后期再优化为标签页 if(params.company_id == "" || params.region == ""){ return; } $.datagrid.datagrid('loadData', { total: 0, rows: [] });//清空下方DateGrid $.datagrid('loadData', { total: 0, rows: [] });//清空下方DateGrid } 这样便可以顺利清空DG2及DG3中结果集的数据 还有一种方法,就是遍历并删除结果集中的数据 复制代码 代码如下: var item = $.datagrid { for (var i = item.length - 1; i >= 0; i--) { var index = $.datagrid('getRowIndex', item[i]); $.datagrid; } } 殊途同归

1、背景

最近在学Jquery EasyUI,现在来说一说EasyUI的DataGrid,一般当我们在实现前端界面的时候,经常在DataGrid的上面或者后面加一些按钮,方便用户进行一些添加,删除,编辑等功能

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

用户在每次使用的时候,都需要去先选中一条或者多条数据,然后在去点按钮进行相关操作,这样其实还是很麻烦的,做项目的过程中,为了用户着想,做了一个右键菜单,用户想要删除或者编辑某一条数据直接在其位置上右键就可以。

2、函数定义

下面上HTML 代码

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

  删除  编辑  
/* * 为‘文本框'列表添加‘清除'图标 * 该实现使用了 onChange 事件,如果用户需要该事件,可传入自定义函数,会自动回调 。 */function addClear4TextBox{ var theObj = $; //根据当前值,确定是否显示清除图标 var showIcon = function(){ var icon = theObj.textbox; if (theObj.textbox{ icon.css('visibility','visible'); } else { icon.css('visibility','hidden'); } }; theObj.textbox({ //添加清除图标 icons:[{ iconCls:'icon-clear', handler: function{ theObj.textbox; } }], //值改变时,根据值,确定是否显示清除图标 onChange:function { onChangeFun; //根据目前值,确定是否显示清除图标 showIcon();}/* * 为‘下拉列表框'添加‘清除'图标 * 该实现使用了 onChange 事件,如果用户需要该事件,可传入自定义函数,会自动回调 。 */function addClear4Combobox{ var theObj = $; //根据当前值,确定是否显示清除图标 var showIcon = function(){ var icon = theObj.combobox; if (theObj.combobox{ icon.css('visibility','visible'); } else { icon.css('visibility','hidden'); } }; theObj.combobox({ //添加清除图标 icons:[{ iconCls:'icon-clear', handler: function{ theObj.combobox; } }], //值改变时,根据值,确定是否显示清除图标 onChange:function { onChangeFun; //初始化确认图标显示 showIcon();}/* * 为‘数据表格下拉框'添加‘清除'图标 * 该实现使用了 onChange 事件,如果用户需要该事件,可传入自定义函数,会自动回调 。 */function addClear4Combogrid{ var theObj = $; //根据当前值,确定是否显示清除图标 var showIcon = function(){ var icon = theObj.combogrid; if (theObj.combogrid{ icon.css('visibility','visible'); } else { icon.css('visibility','hidden'); } }; theObj.combogrid({ //添加清除图标 icons:[{ iconCls:'icon-clear', handler: function{ theObj.combogrid; } }], //值改变时,根据值,确定是否显示清除图标 onChange:function { onChangeFun; //初始化确认图标显示 showIcon();}/* * 为‘数值输入框'添加‘清除'图标 * 该实现使用了 onChange 事件,如果用户需要该事件,可传入自定义函数,会自动回调 。 */function addClear4Numberbox{ var theObj = $; //根据当前值,确定是否显示清除图标 var showIcon = function(){ var icon = theObj.numberbox; if (theObj.numberbox{ icon.css('visibility','visible'); } else { icon.css('visibility','hidden'); } }; theObj.numberbox({ //添加清除图标 icons:[{ iconCls:'icon-clear', handler: function{ theObj.numberbox; } }], //值改变时,根据值,确定是否显示清除图标 onChange:function { onChangeFun; //初始化确认图标显示 showIcon();}/* * 为‘日期选择框'添加‘清除'图标 * 该实现使用了 onChange 事件,如果用户需要该事件,可传入自定义函数,会自动回调 。 */function addClear4Datebox{ var theObj = $; //根据当前值,确定是否显示清除图标 var showIcon = function(){ var icon = theObj.datebox; if (theObj.datebox{ icon.css('visibility','visible'); } else { icon.css('visibility','hidden'); } }; theObj.datebox({ //添加清除图标 icons:[{ iconCls:'icon-clear', handler: function{ theObj.datebox; } }], //值改变时,根据值,确定是否显示清除图标 onChange:function { onChangeFun; //初始化确认图标显示 showIcon();}/* * 为‘日期时间选择框'添加‘清除'图标 * 该实现使用了 onChange 事件,如果用户需要该事件,可传入自定义函数,会自动回调 。 */function addClear4Datetimebox{ var theObj = $; //根据当前值,确定是否显示清除图标 var showIcon = function(){ var icon = theObj.datetimebox; if (theObj.datetimebox{ icon.css('visibility','visible'); } else { icon.css('visibility','hidden'); } }; theObj.datetimebox({ //添加清除图标 icons:[{ iconCls:'icon-clear', handler: function{ theObj.datetimebox; } }], //值改变时,根据值,确定是否显示清除图标 onChange:function { onChangeFun; //初始化确认图标显示 showIcon();}

下面是Javascript的代码

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:为Jquery EasyUI 组件加上清除功能的方法_jquery_脚本之家

关键词: