這幾天在項(xiàng)目中前臺(tái)使用到了easyui 的 combogrid插件為用戶提供點(diǎn)選數(shù)據(jù)項(xiàng)的功能。由于數(shù)據(jù)項(xiàng)的內(nèi)容可能有很多,所以僅僅是點(diǎn)選還不夠,需要能夠?qū)τ脩舻妮斎脒M(jìn)行過濾,即根據(jù)用戶的輸入將某一列與用戶輸入匹配的數(shù)據(jù)項(xiàng)篩選保留下來。
公司主營(yíng)業(yè)務(wù):網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對(duì)我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出都勻免費(fèi)做網(wǎng)站回饋大家。
實(shí)現(xiàn)這一功能需要以下幾個(gè)步驟:
1.聲明一個(gè)combogrid
<div class="fitem"> <label>盤條基本信息編號(hào):</label> <input class="easyui-combogrid" type="text" id="addWireRodId" name="wireRodId" data-options="required:true"></input> </div>
2.js中請(qǐng)求combogrid需要加載的數(shù)據(jù)
var wireRod; $.ajax({ url: "../wireRod/getAll?rows=100000&sort=id&order=asc", type: "post", dataType: "json", success: function (result) { wireRod = result.wireRod.list; } });
3.對(duì)combogrid進(jìn)行配置
$("#addWireRodId").combogrid({ idField:'id', textField:'codeDesc', remoteSort: false, panelWidth: 360, columns: [[ {field: 'codeDesc', title: '盤條序號(hào)', sortable: true, width: 70}, {field: 'code', title: '盤條編碼'}, {field: 'name', title: '盤條名稱'}, {field: 'specification', title: '盤條規(guī)格'}, ]], onSelect: function (index,row) { //業(yè)務(wù)功能,不予展示 }, onChange: function (q){ doSearch(q,wireRod,['codeDesc','code','name','specification'],$(this)); }, onShowPanel:function () { $(this).combogrid('grid').datagrid('loadData', wireRod); } });
4.doSearch方法
//q為用戶輸入,data為遠(yuǎn)程加載的全部數(shù)據(jù)項(xiàng),searchList是需要進(jìn)行模糊搜索的列名的數(shù)組,ele是combogrid對(duì)象 //doSearch的思想其實(shí)就是,進(jìn)入方法時(shí)將combogrid加載的數(shù)據(jù)清空,如果用戶輸入為空則加載全部的數(shù)據(jù),輸入不為空 //則對(duì)每一個(gè)數(shù)據(jù)項(xiàng)做匹配,將匹配到的數(shù)據(jù)項(xiàng)加入rows數(shù)組,相當(dāng)于重組數(shù)據(jù)項(xiàng),只保留符合篩選條件的數(shù)據(jù)項(xiàng), //如果篩選后沒有數(shù)據(jù),則combogrid加載空,有數(shù)據(jù)則重新加載重組的數(shù)據(jù)項(xiàng) function doSearch(q,data,searchList,ele){ ele.combogrid('grid').datagrid('loadData', []); if(q == ""){ ele.combogrid('grid').datagrid('loadData', data); return; } var rows = []; $.each(data,function(i,obj){ for(var p in searchList){ var v = obj[searchList[p]]; if (!!v && v.toString().indexOf(q) >= 0){ rows.push(obj); break; } } }); if(rows.length == 0){ ele.combogrid('grid').datagrid('loadData', []); return; } ele.combogrid('grid').datagrid('loadData', rows); }
combogrid有兩種mode,local和remote,默認(rèn)為local,其實(shí)remote mode也可以做多列模糊搜索,因?yàn)樗鼤?huì)向后臺(tái)發(fā)送一個(gè)包含叫做‘q'的參數(shù)的http請(qǐng)求以請(qǐng)求過濾后的數(shù)據(jù),但是這樣的不好在于,明明我們已經(jīng)向后臺(tái)請(qǐng)求過一次全部的數(shù)據(jù),為什么還要再多次請(qǐng)求過濾的數(shù)據(jù)呢,服務(wù)器的負(fù)載會(huì)加重,所以這種事情能在前端做了就挺好
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
本文名稱:easyuicombogrid實(shí)現(xiàn)本地模糊搜索過濾多列
網(wǎng)頁(yè)網(wǎng)址:http://aaarwkj.com/article48/pjcohp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站收錄、標(biāo)簽優(yōu)化、搜索引擎優(yōu)化、App設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)