快捷導(dǎo)航

簡(jiǎn)介EasyUI datagrid editor combogrid搜索框的實(shí)現(xiàn)

更新時(shí)間：2016年04月01日 11:10:41 作者：hangjy

這篇文章主要介紹了EasyUI datagrid editor combogrid搜索框的實(shí)現(xiàn)，涉及到EasyUI中combogrid的使用方法的相關(guān)知識(shí),非常具有參考價(jià)值，需要的朋友可以參考下

首先需要datagrid editor對(duì)combogrid的擴(kuò)展，這個(gè)是別人實(shí)現(xiàn)的：

$.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);
}
}
});

然后將搜索框?qū)懺赿iv里面

<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>

通過(guò)toolbar: "#Marketer_ID_Member_bar"來(lái)綁定

下面肉戲來(lái)了，按照我們?cè)趧e的地方應(yīng)用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里面沒(méi)有明確的id用來(lái)尋找元素，此時(shí)第一反應(yīng)是自己加一個(gè)ID行不行，于是我嘗試給editor加一個(gè)屬性“id”,然并卵。

接下來(lái)嘗試在combogrid加載完成的時(shí)候通過(guò)Marketer_ID_Member_bar來(lái)關(guān)聯(lián)找到它的父級(jí)（思路是它是作為combogrid的toolbar，通過(guò)它應(yīng)該能找到combogrid）并賦值id，結(jié)果能賦值成功，但是Marketer_ID_Member_bar的父級(jí)并不是combogrid，失敗。

此時(shí)想到去看看別的地方使用combogrid的情況，最終發(fā)現(xiàn)，如果我通過(guò)$('#txtInputID').combogrid({});把一個(gè)input轉(zhuǎn)化成combogrid，此input的class會(huì)被變成easyui-validatebox combogrid-f combo-f validatebox-text，通過(guò)對(duì)比，發(fā)現(xiàn)在editor使用的時(shí)候，該列的輸入框的樣式是：datagrid-editable-input combogrid-f combo-f，

這應(yīng)該就是正主了，同樣不方便設(shè)置id，于是我們使用樣式選擇器，所以最終sy.memberInfo.userSearch_Member方法里是這樣的：

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

也是夠曲折的，前面開(kāi)發(fā)的時(shí)候稍微研究了下沒(méi)有解決好就沒(méi)理它，因?yàn)檫€有一個(gè)辦法可以避過(guò)，就是不使用editor，通過(guò)彈出框來(lái)編輯，也就不是很著急，今天稍微閑一點(diǎn)，又來(lái)看看，最終找到個(gè)能用的方案。

以上內(nèi)容是針對(duì)EasyUI datagrid editor combogrid搜索框的實(shí)現(xiàn)的簡(jiǎn)單介紹，希望對(duì)大家有所幫助！

EasyUI中combogrid的使用方法

ComboGrid用法和參數(shù)配置

1、需要引入class=" "easyui-combogrid”，必須應(yīng)用在input或select元素中

2、參數(shù)設(shè)置需要在data-options中設(shè)置

3、屬性參數(shù)配置：

loadMsg：加載遠(yuǎn)程數(shù)據(jù)，顯示的信息

idField：select中選擇提交值

textField：select中選擇的顯示值

mode：定義如何加載DataGrid的數(shù)據(jù)文本的方式。當(dāng)設(shè)置為“'remote'”模式下，什么類(lèi)型的用戶將被發(fā)送http請(qǐng)求參數(shù)名為'q'的服務(wù)器，以獲取新的數(shù)據(jù)

filter：當(dāng)數(shù)據(jù)加載時(shí)”mode”設(shè)置為”local”，如何選擇本地?cái)?shù)據(jù)源，返回true選擇行

4、方法