關於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="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,通過彈出框來編輯,也就不是很着急,今天稍微閑一點,又來看看,最終找到個能用的方案。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM