简介EasyUI datagrid editor combogrid搜索框的实现


Posted in Javascript onApril 01, 2016

首先需要datagrid editor对combogrid的扩展,这个是别人实现的:

$.extend($.fn.datagrid.defaults.editors, {
combogrid: {
init: function (container, options) {
var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
input.combogrid(options);
return input;
},
destroy: function (target) {
$(target).combogrid('destroy');
},
getValue: function (target) {
return $(target).combogrid('getValue');
},
setValue: function (target, value) {
$(target).combogrid('setValue', value);
},
resize: function (target, width) {
$(target).combogrid('resize', width);
}
}
});

然后将搜索框写在div里面

<div id="Marketer_ID_Member_bar">
<table cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td style="text-align: right; padding-right: 15px">
<input id="userName_Member" placeholder="姓名/用户名" style="width: 100px; border: 0;" />
<input type="button" value="查询" onclick="sy.memberInfo.userSearch_Member();" />
</td>
</tr>
</table>
</div>

通过toolbar: "#Marketer_ID_Member_bar"来绑定

下面肉戏来了,按照我们在别的地方应用combogrid的做法,具体的搜索方法sy.memberInfo.userSearch_Member里面是这样的:

$('#Marketer_ID_Member').combogrid('grid').datagrid('options').queryParams.Name = $("#userName_Member").val();
$('#Marketer_ID_Member').combogrid('grid').datagrid('reload');

然而,在editor里面没有明确的id用来寻找元素,此时第一反应是自己加一个ID行不行,于是我尝试给editor加一个属性“id”,然并卵。

接下来尝试在combogrid加载完成的时候通过Marketer_ID_Member_bar来关联找到它的父级(思路是它是作为combogrid的toolbar,通过它应该能找到combogrid)并赋值id,结果能赋值成功,但是Marketer_ID_Member_bar的父级并不是combogrid,失败。

此时想到去看看别的地方使用combogrid的情况,最终发现,如果我通过$('#txtInputID').combogrid({});把一个input转化成combogrid,此input的class会被变成easyui-validatebox combogrid-f combo-f validatebox-text,通过对比,发现在editor使用的时候,该列的输入框的样式是:datagrid-editable-input combogrid-f combo-f,

这应该就是正主了,同样不方便设置id,于是我们使用样式选择器,所以最终sy.memberInfo.userSearch_Member方法里是这样的:

$('.combogrid-f').combogrid('grid').datagrid('options').queryParams.Name = $("#userName_Member").val();
$('.combogrid-f').combogrid('grid').datagrid('reload');

也是够曲折的,前面开发的时候稍微研究了下没有解决好就没理它,因为还有一个办法可以避过,就是不使用editor,通过弹出框来编辑,也就不是很着急,今天稍微闲一点,又来看看,最终找到个能用的方案。

以上内容是针对EasyUI datagrid editor combogrid搜索框的实现的简单介绍,希望对大家有所帮助!

EasyUI中combogrid的使用方法

ComboGrid用法和参数配置

1、 需要引入class=" "easyui-combogrid”,必须应用在input或select元素中

2、 参数设置需要在data-options中设置

3、 属性参数配置:

loadMsg:加载远程数据,显示的信息

idField:select中选择提交值

textField:select中选择的显示值

mode:定义如何加载DataGrid的数据文本的方式。当设置为“'remote'”模式下,什么类型的用户将被发送http请求参数名为'q'的服务器,以获取新的数据

filter:当数据加载时”mode”设置为”local”,如何选择本地数据源,返回true选择行

4、 方法

options():返回选择对象

grid():返回选择dataGrid对象

setValues(values):设置元素值数组

setValue(value):设置组件的值

clear():清除组件的值

Javascript 相关文章推荐
javascript静态的url如何传递
May 03 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
jQuery实现的导航动画效果(附demo源码)
Apr 01 #Javascript
JS中frameset框架弹出层实例代码
Apr 01 #Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 #Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 #Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 #Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 #Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 #Javascript
You might like
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
javascript 写类方式之一
2009/07/05 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
Python接口测试get请求过程详解
2020/02/28 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
非常详细的C#面试题集
2016/07/13 面试题
文员岗位职责
2013/11/09 职场文书
妇产医师自荐信
2014/01/29 职场文书
《学棋》教后反思
2014/04/14 职场文书
教师求职信
2014/06/17 职场文书
可怜妈妈观后感
2015/06/09 职场文书
未婚证明范本
2015/06/15 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
k-means & DBSCAN 总结
2021/04/27 Python