簡(jiǎn)介EasyUI datagrid editor combogrid搜索框的實(shí)現(xiàn)
首先需要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里面沒有明確的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');
也是夠曲折的,前面開發(fā)的時(shí)候稍微研究了下沒有解決好就沒理它,因?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'”模式下,什么類型的用戶將被發(fā)送http請(qǐng)求參數(shù)名為'q'的服務(wù)器,以獲取新的數(shù)據(jù)
filter:當(dāng)數(shù)據(jù)加載時(shí)”mode”設(shè)置為”local”,如何選擇本地?cái)?shù)據(jù)源,返回true選擇行
4、 方法
options():返回選擇對(duì)象
grid():返回選擇dataGrid對(duì)象
setValues(values):設(shè)置元素值數(shù)組
setValue(value):設(shè)置組件的值
clear():清除組件的值
- jquery Easyui Datagrid實(shí)現(xiàn)批量操作(編輯,刪除,添加)
- jQuery Easyui datagrid連續(xù)發(fā)送兩次請(qǐng)求問題
- easyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)
- jQuery EasyUI編輯DataGrid用combobox實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)
- jQuery Easyui DataGrid點(diǎn)擊某個(gè)單元格即進(jìn)入編輯狀態(tài)焦點(diǎn)移開后保存數(shù)據(jù)
- jQuery EasyUI學(xué)習(xí)教程之datagrid點(diǎn)擊列表頭排序
- jQuery Easyui學(xué)習(xí)教程之實(shí)現(xiàn)datagrid在沒有數(shù)據(jù)時(shí)顯示相關(guān)提示內(nèi)容
- jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解
- jQuery easyUI datagrid 增加求和統(tǒng)計(jì)行的實(shí)現(xiàn)代碼
- jquery easyui datagrid實(shí)現(xiàn)增加,修改,刪除方法總結(jié)
- 詳解EasyUi控件中的Datagrid
相關(guān)文章
JavaScript中利用for循環(huán)遍歷數(shù)組
這篇文章主要為大家詳細(xì)介紹了JavaScript中利用for循環(huán)遍歷數(shù)組,最好不要使用for in遍歷,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01layui中的switch開關(guān)實(shí)現(xiàn)方法
今天小編就為大家分享一篇layui中的switch開關(guān)實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JS中2種定時(shí)器的使用及清除的實(shí)現(xiàn)
本文主要介紹了JS中2種定時(shí)器的使用及清除的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08Bootstrap警告(Alerts)的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap警告(Alerts)的實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法
這篇文章主要介紹了Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法,需要的朋友可以參考下2014-05-05webpack4 從零學(xué)習(xí)常用配置(小結(jié))
這篇文章主要介紹了webpack4 從零學(xué)習(xí)常用配置(小結(jié)),詳細(xì)的介紹了幾個(gè)核心部分,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05eclipse如何忽略js文件報(bào)錯(cuò)(附圖)
eclipse中js文件報(bào)錯(cuò)的情況,或許大家早已習(xí)以為常了,那么有什么好的方法可以將其忽略掉呢?如果你也在尋找此問題,那么本文或許可以幫助到你2013-10-10