是否有可能在數據網格中篩選dgrid中的數據？如果是這樣，怎麼樣？

Question

我對dojo相對比較陌生，並且已經看到datagrid如何提供一種動態過濾功能，可根據您輸入到過濾器文本輸入中的內容來減少可見行。我還沒有找到任何關於如何使用dgrid來做的例子。如果可以完成，請提供一個示例，或者將我指向提供教程或示例的資源。謝謝！

Answer 1

是的，這是可能的。使用dgrid/OnDemandGrid並定義query函數將返回true或false根據您的邏輯爲dojo/store爲電網供電的每行。

我準備的例子在的jsfiddle與玩：http://jsfiddle.net/phusick/7gnFd/，所以我不必解釋太多：

查詢功能：

var filterQuery = function(item, index, items) { 
    var filterString = filter ? filter.get("value") + "" : ""; 

    // early exists 
    if (filterString.length < 2) return true; 
    if (!item.Name) return false; 

    // compare 
    var name = (item.Name + "").toLowerCase(); 
    if (~name.indexOf(filterString.toLowerCase())) { return true;} 

    return false; 
}; 

網格：

var grid = new Grid({ 
    store: store, 
    query: filterQuery, // <== the query function for filtering 
    columns: { 
     Name: "Name", 
     Year: "Year", 
     Artist: "Artist", 
     Album: "Album", 
     Genre: "Genre" 
    } 
}, "grid"); 

Answer 2

我知道這不是所問問題的答案，所提供的答案是高超的，我們使用它很多。

但是，如果您使用TreeGrid（具有「dgrid/tree」插件的列），則此功能似乎不起作用。我已經編寫了一些代碼來模擬與樹網格接受的答案相同的行爲。它基本上只是循環訪問商店中的商品，並隱藏任何不符合您提出的條件的行元素。以爲我會分享它，以防它有助於任何人。這是相當醜陋的，我相信它可以改進，但它的作品。

它基本上使用與phusick的答案相同的概念。您需要觀看一個文本框的值，但不是刷新你的網格它調用一個函數：

textBox.watch("value", lang.hitch(this, function() { 
         if (timeoutId) { 
          clearTimeout(timeoutId); 
          timeoutId = null; 
         }; 

         timeoutId = setTimeout(lang.hitch(this, function() { 
          this.filterGridByName(textBox.get('value'), myGrid); 
         }, 300)); 
        })); 

而這裏的功能：

filterGridByName: function(name, grid){ 
       try { 
         for (var j in grid.store.data){ 
          var dataItem = grid.store.data[j]; 
          var childrenLength = dataItem.children.length; 
          var childrenHiddenCount = 0; 
          var parentRow = grid.row(dataItem.id); 
          for (var k in dataItem.children){ 

           var row = grid.row(dataItem.children[k].id); 
           var found = false; 
           if (dataItem.children[k].name.toLowerCase().indexOf(name.toLowerCase()) != -1){ 
            found = true; 
           } 
           if (found){ 
            if (row.element){ 
             domStyle.set(row.element, "display", "block"); 
            } 
            if (parentRow.element){ 
             domStyle.set(parentRow.element, "display", "block"); 
            } 
           } else { 
            childrenHiddenCount++; 
            // programmatically uncheck any hidden item so hidden items 
            for (var m in grid.dirty){ 
             if (m === dataItem.children[k].id && grid.dirty[m].selected){ 
              grid.dirty[m].selected = false; 
             } 
            } 
            if (row.element){ 
             domStyle.set(row.element, "display", "none"); 
            } 
           } 
          } 
          // if all of the children were hidden, hide the parent too 

          if (childrenLength === childrenHiddenCount){ 
           domStyle.set(parentRow.element, "display", "none"); 
          } 
         } 
       } catch (err){ 
        console.info("error: ", err); 
       } 
      }