首先需要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. codevs1231 最优布线问题

    1231 最优布线问题 题目描述 Description 学校需要将n台计算机连接起来,不同的2台计算机之间的连接费用可能是不同的.为了节省费用,我们考虑采用间接数据传输结束,就是一台计算机可以间接地 ...

  2. PAT 1102 Invert a Binary Tree

    The following is from Max Howell @twitter: Google: 90% of our engineers use the software you wrote ( ...

  3. Spring学习总结(4)——Spring AOP教程

    一.概念 AOP(Aspect Oriented Programming):面向切面编程. 面向切面编程(也叫面向方面编程),是目前软件开发中的一个热点,也是Spring框架中的一个重要内容.利用AO ...

  4. MINSUB - Largest Submatrix

    MINSUB - Largest Submatrix no tags  You are given an matrix M (consisting of nonnegative integers) a ...

  5. linux 各命令字 练习

    ===============================================================                                     ...

  6. RSA 数据加密和数字签名算法

    PKCS8EncodedKeySpec pkcs8KeySpec = KeyFactory keyFactory = KeyFactory.getInstance(KEY_ALGORITHM); Pr ...

  7. [转]十五天精通WCF——第八天 对“绑定”的最后一点理解

    转眼已经中断10几天没有写博客了,也不是工作太忙,正好碰到了端午节,然后最近看天津台的爱情保卫战入迷了...太好看了,一直都是回味无穷...而且 涂磊老师话说的真是tmd的经典,然后就这样耽搁了,好了 ...

  8. CF #329 D

    D题,LCA是很明显的.要注意的是,因为是除法,所以最多可以除x>2的有64次,当大于64时可以直接返回0.而且注意到可能会有很多值为1的边,可以使用路径压缩,把边为1的边压缩掉,类似于并查集的 ...

  9. HDU 3681

    也算难题,难在如何处理有些点可以无限次经过 问题. 这道题,其实很容易想到二分+TSP的状态压缩,但在处理上述问题时,确实没想到.题解是处理每一个Y或G或F点到其他YGF点的距离,BFS,这样就出现一 ...

  10. Verilog堵塞赋值与非堵塞赋值

    verilog设计进阶 时间:2014年5月6日星期二 主要收获: 1.堵塞赋值与非堵塞赋值: 2.代码測试: 3.组合逻辑电路和时序逻辑电路. 堵塞赋值与非堵塞赋值: 1.堵塞赋值"=&q ...