首先需要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搜索框的实现的更多相关文章

  1. easyui datagrid toolbar 添加搜索框

    最近用到了就研究了下,效果  把列名稍加转换放入menubtton,对于单项搜索来说还是非常方便的 var fields =  $('#tt').datagrid('getColumnFields') ...

  2. easyUI datagrid editor扩展dialog

    easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...

  3. easyui datagrid editor checkbox 单击事件

    Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', ...

  4. easyui datagrid editor combobox添加空选则清空combobox框

    <script type='text/javascript'> var editIndex = undefined; $(function() { $('#tb1').datagrid({ ...

  5. easyui datagrid combobox下拉框获取数据问题

    最近在使用easyui的datagrid,在可编辑表格中添加一个下拉框,查了下API,可以设置type : 'combobox',来做下拉框,这下拉框是有了,可是这后台数据怎么传过来呢,通过查API可 ...

  6. Easyui datagrid editor为combobox时指定数据源

    当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,我在引入combobox时对数据源这快做个总结,在做demo的过程中遇到个问题,就是当你选择了下拉框的值后点击保存, ...

  7. easyui Datagrid+searchbox 实现搜索功能

    1.前台页面 <%@ page language="java" pageEncoding="utf-8" isELIgnored="false& ...

  8. easyui datagrid 通过复选框删除新追加的数据问题

    之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返 ...

  9. easyui datagrid editor onBeforeEdit事件下使用getEditor和getEditors失效

    我在使用onClickRow: function(rowIndex,rowData){                    if(editRow!=-1){                      ...

随机推荐

  1. C lstat major MAJOR 获得设备号

    #cat lstat.c #include <sys/types.h> #include <sys/stat.h> #include <unistd.h> #inc ...

  2. php观察折模式

    <?php class Paper{ private $_observers = array(); public function register($sub){ $this->_obse ...

  3. 基本数据类型:布尔型(bool)和空值None

    一.布尔型(bool) 布尔类型很简单,就两个值 ,一个True(真),一个False(假), 主要用记逻辑判断: 一件事情成立就是True,不成立就是False,也可以将bool值归类为数字, 是因 ...

  4. http长链接问题

    http://www.ibm.com/developerworks/cn/web/wa-lo-comet/

  5. windows 实现vue命令行

    在代码编辑器里写好文件的位置,以及相关的命令,保存文件类型是.cmd

  6. 【codeforces 801C】Voltage Keepsake

    [题目链接]:http://codeforces.com/contest/801/problem/C [题意] 有n个设备 你想同时使用 第i个设备每分钟消耗ai点电量,一开始有bi点电量 你有一个充 ...

  7. [BZOJ 4999]This Problem Is Too Simple!

    [BZOJ 4999]This Problem Is Too Simple! 题目 给您一颗树,每个节点有个初始值. 现在支持以下两种操作: 1. C i x(0<=x<2^31) 表示将 ...

  8. LINUX 内核内存管理

    https://linux-mm.org/ http://www.cnblogs.com/liloke/archive/2011/11/20/2255737.html

  9. 搭建LVS+Keepalived负载均衡集群

    这两天学习了LVS+Keepalived负载均衡的搭建.网上的教程非常多,可是动起手来遇到不少问题. 如今把自己的搭建过程以及遇到的一些问题给分享下. 硬件环境: Macbook 8G内存.250G ...

  10. HDU 5293

    树上DP题. 其实有点类似于01的问题.方程很容易想到.首先,因为一条链的节点其实都是在树上的,所以很容易想到应该先求一个LCA.然后,当某节点不是链的LCA时,它的转移就是: dp[i]=sum[i ...