关于EasyUI datagrid editor combogrid搜索框的实现
首先需要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="" cellspacing="" 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 datagrid toolbar 添加搜索框
最近用到了就研究了下,效果 把列名稍加转换放入menubtton,对于单项搜索来说还是非常方便的 var fields = $('#tt').datagrid('getColumnFields') ...
- easyUI datagrid editor扩展dialog
easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...
- easyui datagrid editor checkbox 单击事件
Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', ...
- easyui datagrid editor combobox添加空选则清空combobox框
<script type='text/javascript'> var editIndex = undefined; $(function() { $('#tb1').datagrid({ ...
- easyui datagrid combobox下拉框获取数据问题
最近在使用easyui的datagrid,在可编辑表格中添加一个下拉框,查了下API,可以设置type : 'combobox',来做下拉框,这下拉框是有了,可是这后台数据怎么传过来呢,通过查API可 ...
- Easyui datagrid editor为combobox时指定数据源
当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,我在引入combobox时对数据源这快做个总结,在做demo的过程中遇到个问题,就是当你选择了下拉框的值后点击保存, ...
- easyui Datagrid+searchbox 实现搜索功能
1.前台页面 <%@ page language="java" pageEncoding="utf-8" isELIgnored="false& ...
- easyui datagrid 通过复选框删除新追加的数据问题
之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返 ...
- easyui datagrid editor onBeforeEdit事件下使用getEditor和getEditors失效
我在使用onClickRow: function(rowIndex,rowData){ if(editRow!=-1){ ...
随机推荐
- Bullet:Python的函数中参数是引用吗?
别的语言中关于函数有传值和传引用的区分. 关于此,流传很广的一个说法是 他们在现象的区别之一就是值传递后的变化,受到影响的就是引用,未受到影响的就是传值. 在学习中,也曾碰到过这个问题,网上关于这 ...
- odoo api介绍
odoo api修饰器介绍与应用 参考文档:https://www.cnblogs.com/kfx2007/p/6093994.html 一.one one的用法主要用于self为单一集合的情况,被o ...
- Oracle学习总结(5)—— SQL语句经典案例
--0.所有员工信息 SELECT * FROM emp --1.选择部门30的所有员工 SELECT * FROM emp WHERE deptno=20 --2.列出所有办事员(CLERK)的姓名 ...
- kafka监控工具kafka-manager
1.几个kafka监控工具 Kafka Web Console:监控功能较为全面,可以预览消息,监控Offset.Lag等信息,但存在bug,不建议在生产环境中使用. Kafka Manager:偏向 ...
- 火柴棒等式(2008年NOIP全国联赛提高组)
题目描述 Description 给你n根火柴棍,你可以拼出多少个形如“A+B=C”的等式?等式中的A.B.C是用火柴棍拼出的整数(若该数非零,则最高位不能是0).用火柴棍拼数字0-9的拼法如图所示: ...
- Tornado初学
http://datacademy.io/course 1.资源链接:http://demo.pythoner.com/itt2zh/index.html 2.windows中调用curl 方法:安装 ...
- 20180620关于使用xtrabackup热还原数据库
参看:http://www.cnblogs.com/waynechou/p/xtrabackup_backup.html http://www.cnblogs.com/waynechou/p/xtra ...
- mongodb之配置
前言 最新版本支持yaml格式的配置文件,只支持空格,不能使用tab 详细配置说明 #系统日志配置 systemLog: destination: file path: /var/log/mongod ...
- [ javascript ] getElementsByClassName与className和getAttribute!
对于javascript中的getElementsByClassName 在IE 6/7/8 不支持问题. 那么须要模拟出getElementsByClassName 须要採用className属性 ...
- UVA 12683 Odd and Even Zeroes(数学—找规律)
Time Limit: 1000 MS In mathematics, the factorial of a positive integer number n is written as n! an ...