ExtJs4(二)——带搜索并可多选的表

2012-07-29

ExtJs4(2)——带搜索并可多选的表通常，我们希望点击搜索之后，只留下符合条件的Record。而ExtJs4的搜索只是将

ExtJs4(2)——带搜索并可多选的表

通常，我们希望点击搜索之后，只留下符合条件的Record。而ExtJs4的搜索只是将符合条件的字段用黄体字标识出来。我将源文件中的LiveSearchGridPanel.js稍作修改以符合自己的需要。

首先来展示效果：

ExtJs4(二)——带搜索并可多选的表

ExtJs4里面自带一种带搜索功能的表格LiveSearchGridPanel.js，放置在其目录下example文件下。我们的目标是将其进行修改，以使表格自动过滤那些不符合搜索条件的Record。

其中可以做文章的自然是onSearch文件

修改后的onSearch函数：

    /**     * Finds all strings that matches thesearched value in each grid cells.     * @private     */    onSearch: function() {        var me = this,             count = 0;                  me.store.rejectChanges();      //每次搜索使都让上次的操作回滚        me.view.refresh();             //更新表中条目                me.statusBar.setStatus({       //这个是用来显示搜索结果数目的框，不必理会             text: me.defaultStatusText,             iconCls: ''        });         /* 取得搜索字符 */        me.searchValue = me.getSearchValue();                 /* 记录当前索引在表格store中的位置 */        me.currentIndex = null;                       if (me.searchValue !== null) {             me.searchRegExp = new RegExp(me.searchValue, 'g'+ (me.caseSensitive ? '' : 'i'));                        /* 表格中的Record数目 */              var totalCount = me.store.getTotalCount();                            //遍历所有条目，找出符合条件的Record              for ( idx = 0; idx < totalCount; idx ++ ) {                    var record =me.store.getAt( idx );                    vartd = Ext.fly(me.view.getNode( idx )).down('td'),                     cell, matches, cellHTML;                               /*在这一Record中是否有需要找寻的内容,默认false */                    var find = false;                 //遍历每条Record的每一列                 while(td){                    cell = td.down('.x-grid-cell-inner');                     matches =cell.dom.innerHTML.match(me.tagsRe);                     cellHTML =cell.dom.innerHTML.replace(me.tagsRe, me.tagsProtect);                                         cellHTML =cellHTML.replace(me.searchRegExp, function(m) {//找到目标                            find= true;                        if (Ext.Array.indexOf(me.indexes, idx) === -1) {                           me.indexes.push(idx);                        }                        if (me.currentIndex === null) {                            me.currentIndex =idx;                        }                        return '<span class="'+ me.matchCls + '">' + m + '</span>';                     });                      //restore protected tags                     Ext.each(matches, function(match) {                        cellHTML =cellHTML.replace(me.tagsProtect, match);                     });                     //update cell html                     cell.dom.innerHTML =cellHTML;                     td = td.next();                 }                                    if ( ! find ){   //如果该行没有找到需要的结果                       me.store.remove(record );  //则将该行从表格中移除                       totalCount--;                                    idx--;                    } else {                       count++;                    }              };              //results found             if(me.currentIndex !== null) {                me.getSelectionModel().select(me.currentIndex);                 me.statusBar.setStatus({                     text: '共找到'+ count + '条.',                     iconCls: 'x-status-valid'                 });             }        }         // no results found        if (me.currentIndex === null) {            me.getSelectionModel().deselectAll();        }         // force textfield focus        me.textField.focus();    }

热点排行

JavaScript

ExtJs4(二)——带搜索并可多选的表