这个插件的目的在于提高用户对于数据的选择效率。经常录入数据的人肯定能明白,在一长串列表中选择你想要记录是一件很费眼神的事;记得当初玩开心网可以按拼音首字母找到自己的好友,当时就觉得很是方便。如果您想提高用户对您软件的评价,请您考虑这个插件。
实现原理:重写了Store中返回过滤函数的方法,使其中需要过滤的汉字转换为其拼音首字母数组(因为有多音字,数组内每一项对应一种拼音的可能性),遍历数组每一项与当前输入项生成的前端匹配正则表达式进行比对,有一个满足就返回true,都不满足返回false
附件有示例
/**
* 修改组件内部Store的createFilterFn方法,使其按照拼音首字母进行过滤
*
* 1.0.1修改:
* 修复了多音字筛选不到的bug
*
* 1.0.2修改:
* 为store添加了一个拼音的缓存
*
* @author chemzqm@gmail.com
* @version 1.0.2
* @createTime 2010-04-18 23:12:31
*/
Ext.ns("Ext.ux");
Ext.ux.PinyinFilter=function(){
//主要方法,由字符串生成拼音首字母
function makePy(str){
if(typeof(str) != "string"){
return str;
}
var arrResult = new Array();
for(var i=0,len=str.length;i<len;i++){
var ch = str.charAt(i);
arrResult.push(checkCh(ch));
}
var resarr = mkRslt(arrResult);
return resarr;
}
function checkCh(ch){
var uni = ch.charCodeAt(0);
if(uni > 40869 || uni < 19968)
return ch; //dealWithOthers(ch);
return (oMultiDiff[uni]?oMultiDiff[uni]:(strChineseFirstPY.charAt(uni-19968)));
}
function mkRslt(arr){
var arrRslt = [""];
for(var i=0,len=arr.length;i<len;i++){
var str = arr[i];
var strlen = str.length;
if(strlen == 1){
for(var k=0;k<arrRslt.length;k++){
arrRslt[k] += str;
}
}else{
var tmpArr = arrRslt.slice(0);
arrRslt = [];
for(k=0;k<strlen;k++){
var tmp = tmpArr.slice(0);
for(var j=0;j<tmp.length;j++){
tmp[j] += str.charAt(k);
}
arrRslt = arrRslt.concat(tmp);
}
}
}
return arrRslt;
}
var strChineseFirstPY = 【太长,此处省略】
var oMultiDiff=【太长,此处省略】
//重写生成过滤方法的方法
function createFilterFn(property, value, anyMatch, caseSensitive){
if(Ext.isEmpty(value, false)){
return false;
}
value = this.data.createValueMatcher(value, anyMatch, false);
return function(r){
var os = r.data[property],arr;
if(this.pyCache[os]){
arr = this.pyCache[os];
}
else{
arr = makePy(os);
this.pyCache[os] = arr;
}
for(var i=0;i<arr.length;i++){
if(value.test(arr[i])){
return true;
}
}
return false;
};
}
return{
init:function(c){
var s=c.store;
s.createFilterFn = createFilterFn;//覆盖原方法
s.pyCache = {};//拼音缓存,汉字字符串与其拼音数组的映射
}
}
}()
- 大小: 2 KB
分享到:
相关推荐
《深入浅出Ext_JS:数据存储与传输》 在Web应用开发中,数据的存储与传输是核心环节,尤其在富客户端(Rich Internet Application, RIA)开发中,JavaScript库Ext JS提供了强大的数据管理功能。本文将围绕Ext JS的...
总结起来,EXT TreeFilter插件是EXT框架中用于提升Tree组件搜索功能的重要工具,它提供了便捷的过滤和搜索机制,支持中文模糊查询和拼音首字母查询,极大地提高了用户在处理大量树形数据时的效率。正确地集成和使用...
Eclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件.rarEclipse下Ext插件....
如果遇到问题,使用浏览器的开发者工具进行调试,查看是否有错误信息或警告。 记住,正确地安装和配置插件对于提升ExtJS应用的功能性和用户体验至关重要。务必阅读插件的文档,了解其特性、依赖和使用方法,以便...
EXT插件的开发和选择应根据具体项目需求进行。EXT社区提供了大量的第三方插件,覆盖了各种功能,如图表、表单、数据管理、拖放操作等。同时,EXT本身也在不断更新,添加新的组件和功能,以适应现代Web开发的需求。 ...
在"使用Ajax技术在ExtGrid插件中展示数据"这个场景中,Prototype可能被用来创建Ajax请求,处理服务器返回的数据,并将这些数据动态地渲染到页面上。 **ExtJS框架** ExtJS是Sencha公司推出的一个用于构建富客户端...
在很多情况下,为了提高用户体验和数据处理效率,我们需要对`ComboBox`进行过滤操作。本文将详细介绍如何在Ext中实现`ComboBox`的过滤功能。 ### 一、理解`ComboBox`过滤的基本原理 在Ext中,`ComboBox`通过其内部...
EXT Grid提供多种方式进行数据查找,包括基本的过滤(Filtering)和高级的查询(Querying)。 - 基本过滤:可以通过Store的filter方法添加过滤条件,筛选出满足条件的数据行。 ``` store.filter({ property: '...
EXT 3.0 正式版插件大全是EXT JS框架的一个重要组成部分,EXT JS是一个广泛使用的JavaScript库,专门用于构建富互联网应用程序(RIA)。EXT 3.0版本提供了丰富的组件和功能,使得开发者能够创建功能强大、界面美观的...
EXT JS是EXT的核心库,提供了大量的可重用组件,如数据网格、图表、表单、树视图等,这些都可以在Pencil中通过EXT插件进行设计。 Flowchart_v8.zip是流程图的设计资源,它可以与EXT插件结合,用于设计应用程序的...
在OpenLayers中,ol-ext插件提供了对3D渲染的支持,这对于地图应用来说是一个巨大的进步。传统的2D地图无法完全展示地理信息的立体感,而3D渲染则可以更直观地展示地形、建筑物和其他地理对象的高度信息。通过ol-ext...
**Ext_JSEclipse 插件详解** 在JavaScript开发领域,ExtJS是一个广泛应用的前端框架,它提供了丰富的组件库,使得开发者能够构建出功能强大的Web应用。然而,由于ExtJS库庞大且复杂,开发者在编写代码时往往需要...
对于数据库相关的开发,Ext插件提供了一整套数据库管理和操作工具,包括数据浏览、SQL编辑、查询执行以及数据导入导出等功能。这使得开发者无需离开IDE就能完成大部分数据库操作。 5. **Web和AJAX支持** 插件加强...
3. **代码格式化**:SPKET可以对EXT代码进行格式化,保持代码整洁,遵循一定的编码规范。 4. **错误检查**:在编写代码时,SPKET能实时检查语法错误,及时发现潜在问题,防止程序运行时出现错误。 5. **调试支持**...
Eclipse是一款广泛使用的Java开发集成环境,对于前端开发者而言,Eclipse插件的引入可以极大地提升EXT JS开发的效率和体验。 "EXT JS Eclipse插件"是专为Eclipse设计的工具,它集成到了Eclipse IDE中,提供了对EXT ...
2. **Filtering 数据**:在描述中提到的数据过滤,可能涉及到对Store中的记录进行筛选。这通常通过调用Store的`filter()`方法实现,可以指定字段名、比较函数或过滤器对象来完成。 3. **Ext.data.field.Field**:在...
在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对本地store进行筛选。 1. **Grid过滤基础** - **Filter Model**:ExtJS Grid中的...
"ajax"标签表明这个插件也支持Ajax(异步JavaScript和XML)技术,这意味着在开发基于Ext JS的Web应用时,可以方便地利用Ajax进行数据交互,实现页面的无刷新更新。 总的来说,"Ext的JSEclipse插件"是Eclipse IDE的...
在提供的文件名"GroupHeaderPlugin"中,"Group"通常指的是分组,这可能意味着这个插件不仅实现了复杂的表头,还支持数据的分组展示,使得用户可以方便地对数据进行汇总和分析。 使用此插件时,开发者需要注意以下几...