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

2019-11-20 10:18:23

字體：大中小

供稿：網(wǎng)友

首先需要datagrid editor對combogrid的擴展，這個是別人實現(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>

通過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來關聯(lián)找到它的父級（思路是它是作為combogrid的toolbar，通過它應該能找到combogrid）并賦值id，結果能賦值成功，但是Marketer_ID_Member_bar的父級并不是combogrid，失敗。

此時想到去看看別的地方使用combogrid的情況，最終發(fā)現(xiàn)，如果我通過$('#txtInputID').combogrid({});把一個input轉(zhuǎn)化成combogrid，此input的class會被變成easyui-validatebox combogrid-f combo-f validatebox-text，通過對比，發(fā)現(xiàn)在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');

也是夠曲折的，前面開發(fā)的時候稍微研究了下沒有解決好就沒理它，因為還有一個辦法可以避過，就是不使用editor，通過彈出框來編輯，也就不是很著急，今天稍微閑一點，又來看看，最終找到個能用的方案。

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

EasyUI中combogrid的使用方法

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

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

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

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

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

idField：select中選擇提交值

textField：select中選擇的顯示值

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

filter：當數(shù)據(jù)加載時”mode”設置為”local”，如何選擇本地數(shù)據(jù)源，返回true選擇行