简介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 字符串处理函数使用小结
Dec 02 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
基于zTree树形菜单的使用实例
Dec 25 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
JS实现吸顶特效
Jan 08 Javascript
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
php正则
2006/07/07 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
javascript prototype 原型链
2009/03/12 Javascript
异步加载script的代码
2011/01/12 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
java必学必会之static关键字
2015/12/03 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python实现单词拼写检查
2015/04/25 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python通过链接抓取网站详解
2019/11/20 Python
flask项目集成swagger的方法
2020/12/09 Python
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
历史学专业推荐信
2013/11/06 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
企业委托书范本
2014/09/13 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
义诊活动通知
2015/04/24 职场文书