2010-11-29 27 views
7

मैं jqugrid का उपयोग jquery-ui 'चिकनीता' थीम के साथ कर रहा हूं, दुर्भाग्य से इस विषय के साथ चयनित पंक्ति पृष्ठभूमि रंग बहुत हल्का है, मैं पृष्ठभूमि रंग को और अधिक दृश्यमान बनाने के लिए बदलने की कोशिश कर रहा हूं। मैंने सीएसएस में (यूई-स्टेट-हाइलाइट) को बदलने की कोशिश की है (महत्वपूर्ण! ओवरराइड के साथ) लेकिन यह काम नहीं करता है। क्या ऐसा करने के लिए कोई सीएसएस तरीका है या शायद एक jqgrid कस्टम फॉर्मेटर जाने का तरीका है?चयनित पंक्ति पृष्ठभूमि रंग

उत्तर

16

कक्षा ui-state-highlightbackground सीएसएस विशेषता का उपयोग करता है। इसलिए पृष्ठभूमि छवि को हटाने के लिए background-color के बजाय background का उपयोग करना एक छोटी सी चाल है। उदाहरण के लिए

.ui-state-highlight { background: yellow !important; } 

लाइव here देखें।

अद्यतन: !important का उपयोग करना आवश्यक नहीं है। यह एक अधिक विशिष्ट नियम

.ui-jqgrid-btable .ui-state-highlight { background: yellow; } 

या

.ui-jqgrid .ui-state-highlight { background: yellow; } 
+1

धन्यवाद, यह वही है जो मैं ढूंढ रहा था! – Jeff

0

मान लीजिए अगर हम चयनित पंक्ति कोशिकाओं के लिए एक रंग और शेष पंक्तियों कोशिकाओं होने अलग रंग चाहते हैं की तरह निर्दिष्ट करने के लिए काफी है,

में नीचे दिया गया उदाहरण हाइलाइट किया गया पंक्ति कोशिका डेटा पीले रंग में होगा और शेष पंक्तियों के सेल डेटा नीले रंग में होंगे

मान लीजिए कि हमें नीले रंग की पृष्ठभूमि और पीले रंग की पृष्ठभूमि के लिए "HighlightHoldRow के लिए" नाम "holdRow" के साथ दो वर्गों है तो नीचे दिए गए कोड "RowSelect" का उपयोग करके विधि है जो पंक्ति का चयन दौरान लागू किया जाता है,

निम्नलिखित कोड पर विचार करें

.holdRow td { 
font-weight : bold !important; 
color: Blue !important; 
    } 

    .higLightholdRow td { 
font-weight : bold !important; 
color: Yellow !important; 

}

var LastRowId = ""; 
    function RowSelect(id) { 
if (Flag == "TRUE") { 
    var grid = $('#gvName); 
    if (LastRowId != "" && LastRowId != undefined && LastRowId != id) { 
     tr = grid[0].rows.namedItem(LastRowId); 
     $(tr).removeClass("higLightholdRow"); 
     $(tr).addClass("holdRow"); 
     LastRowId = ""; 
    } 
    tr = grid[0].rows.namedItem(id); 
    $(tr).removeClass("holdRow"); 
    $(tr).addClass("higLightholdRow"); 
    LastRowId = id; 
    } 

}

Trirand ग्रिड घोषणा के दौरान हम इस क्लाइंट साइड घटना च का उपयोग कर कॉल कर सकते हैं ओलोइंग लोक

ClientSideEvents-RowSelect="RowSelect" 

RowSelect विधि एक पंक्ति के चयन के दौरान उत्पन्न होता है, और चयनित पंक्ति पृष्ठभूमि के रूप में पीले रंग का होगा और शेष पंक्तियों पृष्ठभूमि के रूप में नीले रंग होगा

0
jQuery('#jqGrid').find('.ui-state-highlight').css('background', 'skyblue'); 

आप में इस तरह जोड़ सकते हैं आपकी jquery फ़ाइल

संबंधित मुद्दे