Kendo TreeView高亮搜索

我有一个KendoTreeview与spriteclass。我想用我的搜索词突出显示节点（根节点以及子节点）。我已经实现了搜索功能。但是，当我搜索它时，突出显示节点中的术语，但在首次搜索后节点中缺少SpriteClass。任何想法？Kendo TreeView高亮搜索

jsFiddle code

$('#search-term').on('keyup', function() { 
    $('span.k-in > span.highlight').each(function() { 
     $(this).parent().text($(this).parent().text()); 
    }); 

    // ignore if no search term 
    if ($.trim($(this).val()) == '') { 
     return; 
    } 

    var term = this.value.toUpperCase(); 
    var tlen = term.length; 

    $('#treeview-sprites span.k-in').each(function (index) { 
     var text = $(this).text(); 
     var html = ''; 
     var q = 0; 
     while ((p = text.toUpperCase().indexOf(term, q)) >= 0) { 
      html += text.substring(q, p) + '<span class="highlight">' + text.substr(p, tlen) + '</span>'; 
      q = p + tlen; 
     } 

     if (q > 0) { 
      html += text.substring(q); 
      $(this).html(html); 

      $(this).parentsUntil('.k-treeview').filter('.k-item').each(

      function (index, element) { 
       $('#treeview-sprites').data('kendoTreeView').expand($(this)); 
       $(this).data('search-term', term); 
      }); 
     } 
    }); 

$("#treeview-sprites").kendoTreeView({ 
    dataSource: [{ 
     text: "My Documents", 
     expanded: true, 
     spriteCssClass: "rootfolder", 
     items: [{ 
      text: "Kendo UI Project", 
      expanded: true, 
      spriteCssClass: "folder", 
      items: [{ 
       text: "about.html", 
       spriteCssClass: "html" 
      }, { 
       text: "index.html", 
       spriteCssClass: "html" 
      }, { 
       text: "logo.png", 
       spriteCssClass: "image" 
      }] 
     }, { 
      text: "New Web Site", 
      expanded: true, 
      spriteCssClass: "folder", 
      items: [{ 
       text: "mockup.jpg", 
       spriteCssClass: "image" 
      }, { 
       text: "Research.pdf", 
       spriteCssClass: "pdf" 
      }, ] 
     }, { 
      text: "Reports", 
      expanded: true, 
      spriteCssClass: "folder", 
      items: [{ 
       text: "February.pdf", 
       spriteCssClass: "pdf" 
      }, { 
       text: "March.pdf", 
       spriteCssClass: "pdf" 
      }, { 
       text: "April.pdf", 
       spriteCssClass: "pdf" 
      }] 
     }] 
    }] 
})

;

来源

2014-09-02 Indy Guy

Kendo的树视图窗口小部件不喜欢它，如果你在HTML中使用它，所以我建议修改数据源（这将需要DS中所有项目的encoded选项）。

在KEYUP处理程序，您重置DS每当你搜索清除高亮，然后，而不是直接替换元素的HTML，您将模型的文本属性：

$('#search-term').on('keyup', function() { 
    var treeView = $("#treeview-sprites").getKendoTreeView(); 
    treeView.dataSource.data(pristine); 

    // ignore if no search term 
    if ($.trim($(this).val()) == '') { 
     return; 
    } 

    var term = this.value.toUpperCase(); 
    var tlen = term.length; 

    $('#treeview-sprites span.k-in').each(function (index) { 
     var text = $(this).text(); 
     var html = ''; 
     var q = 0; 
     while ((p = text.toUpperCase().indexOf(term, q)) >= 0) { 
      html += text.substring(q, p) + '<span class="highlight">' + text.substr(p, tlen) + '</span>'; 
      q = p + tlen; 
     } 

     if (q > 0) { 
      html += text.substring(q); 

      var dataItem = treeView.dataItem($(this)); 
      dataItem.set("text", html); 

      $(this).parentsUntil('.k-treeview').filter('.k-item').each(

      function (index, element) { 
       $('#treeview-sprites').data('kendoTreeView').expand($(this)); 
       $(this).data('search-term', term); 
      }); 
     } 
    }); 

    $('#treeview-sprites .k-item').each(function() { 
     if ($(this).data('search-term') != term) { 
      $('#treeview-sprites').data('kendoTreeView').collapse($(this)); 
     } 
    }); 
});

树定义需要encoded选项这个工作：

var pristine = [{ 
    encoded: false, 
    text: "Kendo UI Project", 
    expanded: true, 
    spriteCssClass: "folder", 
    items: [{ 
     encoded: false, 
     text: "about.html", 
     spriteCssClass: "html" 
    }, { 
     encoded: false, 
     text: "index.html", 
     spriteCssClass: "html" 
    }, { 
     encoded: false, 
     text: "logo.png", 
     spriteCssClass: "image" 
    }] 
}, { 
    encoded: false, 
    text: "New Web Site", 
    expanded: true, 
    spriteCssClass: "folder", 
    items: [{ 
     encoded: false, 
     text: "mockup.jpg", 
     spriteCssClass: "image" 
    }, { 
     encoded: false, 
     text: "Research.pdf", 
     spriteCssClass: "pdf" 
    }, ] 
}, { 
    encoded: false, 
    text: "Reports", 
    expanded: true, 
    spriteCssClass: "folder", 
    items: [{ 
     encoded: false, 
     text: "February.pdf", 
     spriteCssClass: "pdf" 
    }, { 
     encoded: false, 
     text: "March.pdf", 
     spriteCssClass: "pdf" 
    }, { 
     encoded: false, 
     text: "April.pdf", 
     spriteCssClass: "pdf" 
    }] 
}]; 

$("#treeview-sprites").kendoTreeView({ 
    dataSource: [{ 
     text: "My Documents", 
     expanded: true, 
     spriteCssClass: "rootfolder", 
     items: pristine 
    }] 
});

（demo）

来源

2014-09-02 21:41:52

非常感谢你。它运行良好。 – 2014-09-02 22:12:03

干得好，大家好，刚才我neeeded！

使用你的代码我做了一个小小的调整（实际上只添加了两行jquery过滤），所以现在当搜索一个关键字时，treeview只显示包含高亮文本的分支。十分简单！ :)

如果其他分支不包含高亮文本，则隐藏其他分支。就那么简单。

这意味着我们现在具有类似VisualStudio的树视图搜索（请参阅Visual Studio解决方案资源管理器搜索和筛选器：http://goo.gl/qr7yVb）。

这里是我的代码和演示上的jsfiddle：http://jsfiddle.net/ComboFusion/d0qespaz/2/

HTML：

<input id="treeViewSearchInput"></input> 
<ul id="treeview"> 
    <li data-expanded="true">My Web Site 
     <ul> 
      <li data-expanded="true">images 
       <ul> 
        <li>logo.png</li> 
        <li>body-back.png</li> 
        <li>my-photo.jpg</li> 
       </ul> 
      </li> 
      <li data-expanded="true">resources 
       <ul> 
        <li data-expanded="true">pdf 
         <ul> 
          <li>brochure.pdf</li> 
          <li>prices.pdf</li> 
         </ul> 
        </li> 
        <li>zip</li> 
       </ul> 
      </li> 
      <li>about.html</li> 
      <li>contacts.html</li> 
      <li>index.html</li> 
      <li>portfolio.html</li> 
     </ul> 
    </li> 
    <li>Another Root</li> 
</ul>

CSS

span.k-in > span.highlight { 
    background: #7EA700; 
    color: #ffffff; 
    border: 1px solid green; 
    padding: 1px; 
}

JAVASCRIPT

function InitSearch(treeViewId, searchInputId) { 

    var tv = $(treeViewId).data('kendoTreeView'); 

    $(searchInputId).on('keyup', function() { 

     $(treeViewId + ' li.k-item').show(); 

     $('span.k-in > span.highlight').each(function() { 
      $(this).parent().text($(this).parent().text()); 
     }); 

     // ignore if no search term 
     if ($.trim($(this).val()) === '') { 
      return; 
     } 

     var term = this.value.toUpperCase(); 
     var tlen = term.length; 

     $(treeViewId + ' span.k-in').each(function (index) { 
      var text = $(this).text(); 
      var html = ''; 
      var q = 0; 
      var p; 

      while ((p = text.toUpperCase().indexOf(term, q)) >= 0) { 
       html += text.substring(q, p) + '<span class="highlight">' + text.substr(p, tlen) + '</span>'; 
       q = p + tlen; 
      } 

      if (q > 0) { 
       html += text.substring(q); 
       $(this).html(html); 

       $(this).parentsUntil('.k-treeview').filter('.k-item').each(function (index, element) { 
        tv.expand($(this)); 
        $(this).data('SearchTerm', term); 
       }); 
      } 
     }); 

     $(treeViewId + ' li.k-item:not(:has(".highlight"))').hide(); 

     $(treeViewId + ' li.k-item').expand(".k-item"); 
    }); 
} 

var $tv = $("#treeview").kendoTreeView(); 

InitSearch("#treeview", "#treeViewSearchInput");

来源

2014-11-22 16:08:23 AlexRebula

从我的另一个好办法:)

我所做的是改变，以维护其他任何可能的节点HTML存在（如精灵跨度为例）的高亮度代码。

我也将它作为TreeView的TypeScript类包装实现。

如果你不想打字稿东西只是将代码复制出来，它应该工作的优良:)

export class SearchableTreeView { 
    TreeView: kendo.ui.TreeView; 
    emphasisClass: string; 

    constructor(treeView: kendo.ui.TreeView) { 
     this.TreeView = treeView; 
     this.emphasisClass = "bg-warning"; 
    } 

    search(term: string): void { 
     var treeElement: JQuery = this.TreeView.element; 
     var tv: kendo.ui.TreeView = this.TreeView; 
     var emphClass = this.emphasisClass; 

     this.resetHighlights(); 

     // ignore if no search term 
     if ($.trim(term) === '') { return; } 

     var term = term.toUpperCase(); 
     var tlen = term.length; 

     $('span.k-in', treeElement).each(function (index) { 
      // find all corresponding nodes 
      var node = $(this); 
      var htmlContent = node.html(); 
      var text = node.text(); 

      var searchPosition = text.toUpperCase().indexOf(term); 
      if (searchPosition === -1) { 
       // continue 
       return true; 
      } 

      var generatedHtml = '<span class="highlight-container">' + text.substr(0, searchPosition) + '<span class="' + emphClass + '">' + text.substr(searchPosition, tlen) + '</span>' + text.substr(searchPosition + tlen) + '</span>'; 

      htmlContent = htmlContent.replace(text, generatedHtml); 
      node.html(htmlContent); 

      node.parentsUntil('.k-treeview').filter('.k-item').each(
       function (index, element) { 
        tv.expand($(this)); 
        $(this).data('search-term', term); 
       } 
      ); 

     }); 

     $('.k-item', treeElement).each(function() { 
      if ($(this).data('search-term') != term) { 
       tv.collapse($(this)); 
      } 
     }); 
    } 

    resetHighlights(): void { 
     this.TreeView.element.find("span.k-in:has('." + this.emphasisClass + "')") 
      .each(function() { 
       var node = $(this); 
       var text = node.text(); 
       $(".highlight-container", node).remove(); 
       node.append(text); 
      }); 
    } 
}

来源

2015-10-22 09:22:23 BineG

Kendo TreeView高亮搜索

回答

相关问题