溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這幾天在項目中前臺使用到了easyui 的 combogrid插件為用戶提供點選數據項的功能。由于數據項的內容可能有很多，所以僅僅是點選還不夠，需要能夠對用戶的輸入進行過濾，即根據用戶的輸入將某一列與用戶輸入匹配的數據項篩選保留下來。
實現這一功能需要以下幾個步驟：
1.聲明一個combogrid
<div class="fitem">
<label>盤條基本信息編號:</label>
<input class="easyui-combogrid" type="text" id="addWireRodId" name="wireRodId"
data-options="required:true"></input>
</div>
2.js中請求combogrid需要加載的數據
var wireRod;
$.ajax({
url: "../wireRod/getAll?rows=100000&sort=id&order=asc",
type: "post",
dataType: "json",
success: function (result) {
wireRod = result.wireRod.list;
}
});
3.對combogrid進行配置
$("#addWireRodId").combogrid({
idField:'id',
textField:'codeDesc',
remoteSort: false,
panelWidth: 360,
columns: [[
{field: 'codeDesc', title: '盤條序號', sortable: true, width: 70},
{field: 'code', title: '盤條編碼'},
{field: 'name', title: '盤條名稱'},
{field: 'specification', title: '盤條規格'},
]],
onSelect: function (index,row) {
//業務功能，不予展示
},
onChange: function (q){
doSearch(q,wireRod,['codeDesc','code','name','specification'],$(this));
},
onShowPanel:function () {
$(this).combogrid('grid').datagrid('loadData', wireRod);
}
});
4.doSearch方法
//q為用戶輸入，data為遠程加載的全部數據項，searchList是需要進行模糊搜索的列名的數組，ele是combogrid對象
//doSearch的思想其實就是，進入方法時將combogrid加載的數據清空，如果用戶輸入為空則加載全部的數據，輸入不為空
//則對每一個數據項做匹配，將匹配到的數據項加入rows數組，相當于重組數據項，只保留符合篩選條件的數據項，
//如果篩選后沒有數據，則combogrid加載空，有數據則重新加載重組的數據項
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，默認為local，其實remote mode也可以做多列模糊搜索，因為它會向后臺發送一個包含叫做‘q'的參數的http請求以請求過濾后的數據，但是這樣的不好在于，明明我們已經向后臺請求過一次全部的數據，為什么還要再多次請求過濾的數據呢，服務器的負載會加重，所以這種事情能在前端做了就挺好
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
