簡介EasyUI datagrid editor combogrid搜尋框的實作_javascript技巧

首先需要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（）：清除組件的值