简介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 相关文章推荐
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
Node.js编码规范
Jul 14 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
微信小程序实现留言板(Storage)
Nov 02 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中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
axios基本入门用法教程
2017/03/25 Javascript
React简单介绍
2017/05/24 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
python获取元素在数组中索引号的方法
2015/07/15 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
在pycharm中显示python画的图方法
2019/08/31 Python
python序列化与数据持久化实例详解
2019/12/20 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
python如何使用代码运行助手
2020/07/03 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
煤矿安全协议书
2014/08/20 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
粗暴解决CUDA out of memory的问题
2021/05/22 Python
Python中time与datetime模块使用方法详解
2022/03/31 Python
Python 匹配文本并在其上一行追加文本
2022/05/11 Python