ExtJs4(二)——带搜索并可多选的表-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20377 次

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

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

首先来展示效果：

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();
    }

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>