简介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 相关文章推荐
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
微信小程序实现分页加载效果
Nov 19 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
PHP时间类完整代码实例
2021/02/26 PHP
JS实现self的resend
2010/07/22 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
vue实例的选项总结
2020/06/09 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
Python入门学习指南分享
2018/04/11 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
安全标语大全
2014/06/10 职场文书
个人授权委托书样本
2014/09/13 职场文书
《将心比心》教学反思
2016/02/23 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js