简介EasyUI datagrid editor combogrid搜索框的实现

需要datagrid editor对bogrid的扩展，这个是别人实现的

$.extend($.fn.datagrid.defaults.editors, {
bogrid: {
init: function (container, options) {
var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
input.bogrid(options);
return input;
},
destroy: function (target) {
$(target).bogrid('destroy');
},
getValue: function (target) {
return $(target).bogrid('getValue');
},
setValue: function (target, value) {
$(target).bogrid('setValue', value);
},
resize: function (target, width) {
$(target).bogrid('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"来绑定

狼蚁网站SEO优化肉戏来了，按照我们在别的地方应用bogrid的做法，具体的搜索方法sy.memberInfo.userSearch_Member里面是这样的

$('#Marketer_ID_Member').bogrid('grid').datagrid('options').queryParams.Name = $("#userName_Member").val();
$('#Marketer_ID_Member').bogrid('grid').datagrid('reload');

，在editor里面没有明确的id用来寻找元素，此时第一反应是自己加一个ID行不行，于是我尝试给editor加一个属性“id”,然并卵。

接下来尝试在bogrid加载完成的时候通过Marketer_ID_Member_bar来关联找到它的父级（思路是它是作为bogrid的toolbar，通过它应该能找到bogrid）并赋值id，结果能赋值成功，Marketer_ID_Member_bar的父级并不是bogrid，失败。

此时想到去看看别的地方使用bogrid的情况，最终发现，如果我通过$('#txtInputID').bogrid({});把一个input转化成bogrid，此input的class会被变成easyui-validatebox bogrid-f bo-f validatebox-text，通过对比，发现在editor使用的时候，该列的输入框的样式是datagrid-editable-input bogrid-f bo-f，

这应该就是正主了，同样不方便设置id，于是我们使用样式选择器，所以最终sy.memberInfo.userSearch_Member方法里是这样的

$('.bogrid-f').bogrid('grid').datagrid('options').queryParams.Name = $("#userName_Member").val();
$('.bogrid-f').bogrid('grid').datagrid('reload');

也是够曲折的，前面开发的时候稍微研究了下没有解决好就没理它，因为还有一个办法可以避过，就是不使用editor，通过弹出框来编辑，也就不是很着急，今天稍微闲一点，又来看看，最终找到个能用的方案。

以上内容是针对EasyUI datagrid editor bogrid搜索框的实现的简单介绍，希望对大家有所帮助！

EasyUI中bogrid的使用方法

ComboGrid用法和参数配置

1、 需要引入class=" "easyui-bogrid”，必须应用在input或select元素中

2、 参数设置需要在data-options中设置

3、 属性参数配置

loadMsg加载远程数据，显示的信息

idFieldselect中选择提交值

textFieldselect中选择的显示值

mode定义如何加载DataGrid的数据文本的方式。当设置为“'remote'”模式下，什么类型的用户将被发送http请求参数名为'q'的服务器，以获取新的数据

filter当数据加载时”mode”设置为”local”，如何选择本地数据源，返回true选择行

4、 方法

options（）返回选择对象

grid（）返回选择dataGrid对象

setValues（values）设置元素值数组

setValue（value）:设置组件的值

clear（）清除组件的值