क्या डेटाग्रिड में एक ड्रिग्रिड में डेटा फ़िल्टर करना संभव है? यदि हां, तो कैसे?

Question

मैं डोजो के लिए अपेक्षाकृत नया हूं और देखा है कि डेटाग्रिड गतिशील फ़िल्टरिंग क्षमता प्रदान करता है जो आपके द्वारा फ़िल्टर टेक्स्ट इनपुट में टाइप किए गए दृश्यमान पंक्तियों को कम करता है। मुझे ड्रिगिड के साथ इसे कैसे करना है इसके बारे में कोई उदाहरण नहीं मिला है। यदि यह किया जा सकता है, तो कृपया एक उदाहरण प्रदान करें या मुझे संसाधन पर इंगित करें जो एक ट्यूटोरियल या उदाहरण प्रदान करता है। धन्यवाद!

Answer 1

हां, यह संभव है। dgrid/OnDemandGrid का उपयोग करें और फ़ंक्शन को परिभाषित करें जो 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

मुझे पता है कि यह सवाल पूछने का उत्तर नहीं है, और प्रदान किया गया उत्तर कुशल है और हम इसका काफी उपयोग करते हैं।

हालांकि, यदि आप ट्रीग्रिड ("ड्रिगिड/पेड़" प्लगइन के साथ कॉलम) का उपयोग कर रहे हैं तो यह कार्यक्षमता ठीक से काम नहीं कर रही है। मैंने एक पेड़ ग्रिड के साथ स्वीकृत उत्तर के समान व्यवहार को अनुकरण करने के लिए कुछ कोड लिखा है। यह मूल रूप से स्टोर में वस्तुओं के माध्यम से लूपिंग कर रहा है और किसी भी पंक्ति तत्व को छुपा रहा है जो आपके द्वारा निर्धारित शर्त से मेल नहीं खाता है। सोचा कि अगर मैं किसी की मदद करता हूं तो मैं इसे साझा करूंगा। यह बदसूरत है और मुझे यकीन है कि इसे बेहतर किया जा सकता है, लेकिन यह काम करता है।

यह मूल रूप से फ्यूसिक के उत्तर के समान अवधारणा का उपयोग करता है। आप किसी पाठ बॉक्स पर एक मूल्य देखने की जरूरत है, लेकिन इसके बजाय ग्रिड आप को ताज़ा करने के लिए यह एक फ़ंक्शन को कॉल करें:

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