slickgrid में एक विशिष्ट पंक्ति के पृष्ठभूमि रंग बदल रहा है?

Question

क्या स्लीग्रिड टेबल में किसी विशिष्ट पंक्ति के पृष्ठभूमि रंग को बदलने का कोई तरीका है जबकि यह अन्य है ??? मैं

for (var i = 0; i < grid.length; i++) { 
    rowIndex[i] = { 
     price : "editable-col", 
     qty : "editable-col", 
     ccy : "buy-row", 
     side : "buy-col", 
     symbol : "buy-row", 
     enable : "buy-row" 
    }; 
} 
grid.setCellCssStyles("", rowIndex); 

उपयोग कर रहा हूँ जहाँ "संपादन योग्य-col", "खरीद-पंक्ति" & "खरीद-col" सीएसएस रंग पृष्ठभूमि के लिए/अग्रभूमि आदि गुण स्थापित करने वाले वर्ग हैं जब भी मैं बदलना चाहते हैं एक विशिष्ट पंक्ति का पृष्ठभूमि रंग, मुझे पूरे ग्रिड के रंग में बदलना होगा (ग्रिड लंबाई के माध्यम से लूप करके), या यदि मैं एक विशिष्ट पंक्ति के लिए कक्षा निर्धारित करता हूं जैसे कि

rowIndex[5] = { 
    price : "editable-col", 
    qty : "editable-col", 
    ccy : "buy-row", 
    side : "buy-col", 
    symbol : "buy-row", 
    enable : "buy-row" 
}; 
grid.setCellCssStyles("", rowIndex); 

यह वांछित पंक्ति के लिए सीएसएस वर्ग सेट, लेकिन अन्य पंक्तियों के लिए सभी सीएसएस गुण स्पष्ट है, इस से बचने के लिए मैं अन्य पंक्तियों भी जो है मैं प्रदर्शन के मामले में अच्छा नहीं लगता के लिए सीएसएस वर्गों रीसेट करने की आवश्यकता और समय जब आपके पास हजारों पंक्तियां होंगी। बस जानना चाहते हैं कि अन्य पंक्तियों को छूए बिना ऐसा करने का कोई बेहतर तरीका है। ?? किसी भी तरह की सहायता की हम सराहना करेंगे।

Answer 1

आप Slick.Data.DataView उपयोग कर रहे हैं मान लिया जाये, तो आप getItemMetadata method संशोधित कर सकते हैं गतिशील रूप से जोड़ने के लिए युक्त पंक्ति तत्व के लिए वर्ग। फिर आप पंक्ति के अंदर कुछ मूल्य के आधार पर पंक्ति की शैली को बदलने के लिए बस अपनी ग्रिड सेट कर सकते हैं। मान लिया जाये कि अपने Slick.Data.DataView उदाहरण dataView कहा जाता है:

dataView.getItemMetadata = metadata(dataView.getItemMetadata); 

function metadata(old_metadata) { 
    return function(row) { 
    var item = this.getItem(row); 
    var meta = old_metadata(row) || {}; 

    if (item) { 
     // Make sure the "cssClasses" property exists 
     meta.cssClasses = meta.cssClasses || ''; 

     if (item.canBuy) {     // If the row object has a truthy "canBuy" property 
     meta.cssClasses += ' buy-row';  // add a class of "buy-row" to the row element. 
     } // Note the leading^space. 

     if (item.qty < 1) {     // If the quantity (qty) for this item less than 1 
     meta.cssClasses += ' out-of-stock'; // add a class of "out-of-stock" to the row element. 
     } 

    /* Here is just a random example that will add an HTML class to the row element 
     that is the value of your row's "rowClass" property. Be careful with this as 
     you may run into issues if the "rowClass" property isn't a string or isn't a 
     valid class name. */ 
     if (item.rowClass) { 
     var myClass = ' '+item.rowClass; 
     meta.cssClasses += myClass; 
     } 
    } 

    return meta; 
    } 
} 

यह आपको गतिशील पंक्ति को "खरीद-पंक्ति" वर्ग को जोड़ने के लिए अनुमति देगा। आप विभिन्न वर्गों के लिए कई स्थितियों के लिए फ़ंक्शन को बदल सकते हैं, बस याद रखें कि प्रत्येक पंक्ति के लिए सीएसएस कक्षाएं पंक्ति वस्तु गुणों के आधार पर सशर्त होगी। ret.cssClasses यहां कुंजी है। यह स्ट्रिंग है जो पंक्ति में आउटपुट प्राप्त करेगी HTML: <div class="[ret.cssClasses]">।

अब आप एक पंक्ति की कक्षाओं को बदलने के लिए कुछ इस तरह कर सकते हैं:

var row = dataView.getItem(5); 

row.canBuy = true; 
dataView.updateItem(row.id, row); 
// The row element should now have a class of "buy-row" on it. 

row.canBuy = false; 
row.qty = 0; 
dataView.updateItem(row.id, row); 
// It should now have a class of "out-of-stock" and the "buy-row" class should be gone. 

row.qty = 10; 
row.rowClass = 'blue'; 
dataView.updateItem(row.id, row); 
// It should now have a class of "blue" and the "out-of-stock" class should be gone. 

Answer 2

हाँ, एक तरह से बस jQuery का उपयोग करने के लिए है:

var rowNumber = 3; 
$($('.grid-canvas').children()[rowNumber]).css('background-color','red'); 

अद्यतन

आप getItemMetadata समारोह लागू करने की आवश्यकता पर प्रकाश डाला लगातार करवाने के लिए। यह इस तरह से किया जा सकता है:

एचटीएमएल

<div style="width:600px;"> 
    <div id="myGrid" style="width:100%;height:500px;"></div> 
</div> 

सीएसएस

.highlight{ 
    background-color: #ff0000 !important; 
} 

जावास्क्रिप्ट

var grid; 
var columns = [ 
    {id: "title", name: "Title", field: "title"}, 
    {id: "duration", name: "Duration", field: "duration"}, 
    {id: "%", name: "% Complete", field: "percentComplete"}, 
    {id: "start", name: "Start", field: "start"}, 
    {id: "finish", name: "Finish", field: "finish"}, 
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"} 
]; 

var data = []; 
for (var i = 0; i < 500; i++) { 
    data[i] = { 
     title: "Task " + i, 
     duration: "5 days", 
     percentComplete: Math.round(Math.random() * 100), 
     start: "01/01/2009", 
     finish: "01/05/2009", 
     effortDriven: (i % 5 == 0) 
    }; 
} 
data.getItemMetadata = function (row) { 

    if (this[row].title == 'Task 5'){ 
     return { 
      cssClasses: 'highlight' 

     }; 

    } 
    return null; 

} 
grid = new Slick.Grid("#myGrid", data, columns, { enableColumnReorder: false });