在一個DataGrid里面，搜索行所在位置
實現的效果如下：
在搜索框中輸入部分列名關鍵字，即可匹配到行的位置。
EasyUI的SearchBox組件只提供了靜態搜索框，我們可以使用ComboBox來實現動態的自動關鍵匹配效果，并且不需要加載遠程數據。當前頁面的DataGrid的數據我們可以直接在本地獲取之。
代碼如下：
setp1、創建combobox
<div style="text-align: left;background-color: #E0ECFF;padding-left: 10px;padding-top: 5px;"> <div id="searchField" style="width:250px"></div> </div>
step2、實現本地數據加載
$("#searchField").combobox({ loader: function(param,success,error){ //獲取輸入的值 var q = param.q || ""; //此處q的length代表輸入多少個字符后開始查詢 if(q.length <= 0) return false; var rows = $('#fieldList').datagrid('getRows'); var items = $.map(rows, function (item, index) { //匹配條件，忽略大小寫 if(item.fieldName && (item.fieldName.toLowerCase().indexOf(q.toLowerCase()) != -1)){ return { "fieldName": item.fieldName }; } }); success(items); }, onBeforeLoad:function () { //設置placeholder $("input[class='textbox-text validatebox-text textbox-prompt']").attr("placeholder","輸入標注字段，定位所在行"); }, mode: 'remote', textField:'fieldName', valueField:'fieldName', onSelect : function(record){ var $filedList = $('#fieldList'); var rows = $filedList.datagrid('getRows'); if(rows && rows.length > 0){ for(var r = 0 ; r < rows.length ; r++){ if(rows[r].fieldName == record.fieldName){ $filedList.datagrid('selectRow',r); break; } } } } }); load是一個適配器，它將本地數據轉換成combobox所需的數據格式：
var rows = $('#fieldList').datagrid('getRows'); var items = $.map(rows, function (item, index) { //匹配條件，忽略大小寫 if(item.fieldName && (item.fieldName.toLowerCase().indexOf(q.toLowerCase()) != -1)){ return { "fieldName": item.fieldName }; } }); 首先我們通過datagrid的getRows方法獲取當前數據表的所有行，然后通過map轉換。
success(items);
到此就完成了數據的轉換
step3、實現行的選中
onSelect : function(record){ var $filedList = $('#fieldList'); var rows = $filedList.datagrid('getRows'); if(rows && rows.length > 0){ for(var r = 0 ; r < rows.length ; r++){ if(rows[r].fieldName == record.fieldName){ $filedList.datagrid('selectRow',r); break; } } } } 在onSelect事件中，匹配所在行調用selectRow即可。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
