簡介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來關聯(lián)找到它的父級(思路是它是作為combogrid的toolbar,通過它應該能找到combogrid)并賦值id,結果能賦值成功,但是Marketer_ID_Member_bar的父級并不是combogrid,失敗。
此時想到去看看別的地方使用combogrid的情況,最終發(fā)現,如果我通過$('#txtInputID').combogrid({});把一個input轉化成combogrid,此input的class會被變成easyui-validatebox combogrid-f combo-f validatebox-text,通過對比,發(fā)現在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,通過彈出框來編輯,也就不是很著急,今天稍微閑一點,又來看看,最終找到個能用的方案。
以上內容是針對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'”模式下,什么類型的用戶將被發(fā)送http請求參數名為'q'的服務器,以獲取新的數據
filter:當數據加載時”mode”設置為”local”,如何選擇本地數據源,返回true選擇行
4、 方法
options():返回選擇對象
grid():返回選擇dataGrid對象
setValues(values):設置元素值數組
setValue(value):設置組件的值
clear():清除組件的值
- jquery Easyui Datagrid實現批量操作(編輯,刪除,添加)
- jQuery Easyui datagrid連續(xù)發(fā)送兩次請求問題
- easyui datagrid 大數據加載效率慢,優(yōu)化解決方法(推薦)
- jQuery EasyUI編輯DataGrid用combobox實現多級聯(lián)動
- jQuery Easyui DataGrid點擊某個單元格即進入編輯狀態(tài)焦點移開后保存數據
- jQuery EasyUI學習教程之datagrid點擊列表頭排序
- jQuery Easyui學習教程之實現datagrid在沒有數據時顯示相關提示內容
- jQuery EasyUI框架中的Datagrid數據表格組件結構詳解
- jQuery easyUI datagrid 增加求和統(tǒng)計行的實現代碼
- jquery easyui datagrid實現增加,修改,刪除方法總結
- 詳解EasyUi控件中的Datagrid