幽灵资源网 Design By www.bzswh.com

在一个DataGrid里面,搜索行所在位置

实现的效果如下:

easyUI实现类似搜索框关键词自动提示功能示例代码

在搜索框中输入部分列名关键字,即可匹配到行的位置。

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即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
js搜索匹配关键字,jquery匹配关键字,jquery关键字搜索功能

幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。