快捷導(dǎo)航

easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動(dòng)提示功能示例代碼

更新時(shí)間：2016年12月27日 10:42:12 作者：noWayBinding

本篇文章主要介紹了easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動(dòng)提示功能示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

在一個(gè)DataGrid里面，搜索行所在位置

實(shí)現(xiàn)的效果如下：

在搜索框中輸入部分列名關(guān)鍵字，即可匹配到行的位置。

EasyUI的SearchBox組件只提供了靜態(tài)搜索框，我們可以使用ComboBox來實(shí)現(xiàn)動(dòng)態(tài)的自動(dòng)關(guān)鍵匹配效果，并且不需要加載遠(yuǎn)程數(shù)據(jù)。當(dāng)前頁面的DataGrid的數(shù)據(jù)我們可以直接在本地獲取之。

代碼如下：

setp1、創(chuàng)建combobox

<div style="text-align: left;background-color: #E0ECFF;padding-left: 10px;padding-top: 5px;"> 
  <div id="searchField" style="width:250px"></div> 
</div>

step2、實(shí)現(xiàn)本地?cái)?shù)據(jù)加載

 $("#searchField").combobox({ 
  loader: function(param,success,error){ 
    //獲取輸入的值 
    var q = param.q || ""; 
    //此處q的length代表輸入多少個(gè)字符后開始查詢 
    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 () { 
    //設(shè)置placeholder 
    $("input[class='textbox-text validatebox-text textbox-prompt']").attr("placeholder","輸入標(biāo)注字段，定位所在行"); 
  }, 
  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是一個(gè)適配器，它將本地?cái)?shù)據(jù)轉(zhuǎn)換成combobox所需的數(shù)據(jù)格式：

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方法獲取當(dāng)前數(shù)據(jù)表的所有行，然后通過map轉(zhuǎn)換。

success(items);

到此就完成了數(shù)據(jù)的轉(zhuǎn)換

step3、實(shí)現(xiàn)行的選中

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事件中，匹配所在行調(diào)用selectRow即可。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: