आप jqgrid के लिए कॉलम सॉर्ट आइकन कैसे बदलते हैं?

मुझे jqgrid के लिए डिफ़ॉल्ट सॉर्ट आइकन बदलने की आवश्यकता है। वर्तमान में प्रत्येक स्तंभ के लिए दिखाया गया एक ऊपर और नीचे तीर है। मैं इसे एक आइकन के साथ कैसे बदल सकता हूं, जिस पर इसे क्लिक किया गया है?आप jqgrid के लिए कॉलम सॉर्ट आइकन कैसे बदलते हैं?

असल में, आइकन आरोही, अवरोही और बिना छेड़छाड़ के बीच टॉगल करना चाहिए।

समाधान

ओलेग के जवाब का उपयोग करते हुए मैं डिफ़ॉल्ट डबल ऐरो चिह्न बदल एक भी लाल ऊपर या नीचे तीर जब हल कर टॉगल कि किया जाना है।

jqGrid एक खोज परिणामclass के साथ एक div में लपेटा जाता है।

यह लाल हैडर प्रतीक बनाता है:

.searchResults .ui-state-default .ui-grid-ico-sort.ui-icon 
{ 
    background-image: url("../images/ui-icons_cd0a0a_256x240.png"); 
}

यह माउस केन्द्रों जब केवल एक आइकन दिखाई दे रहा है और अन्य छिपा हुआ है:

.searchResults .ui-jqgrid .ui-icon-asc, .searchResults .ui-jqgrid .ui-icon-desc 
{ 
    height:12px; 
    margin-top:0px; 
}

यह निष्क्रिय तरह आइकन को छुपा देती:

.searchResults .ui-state-disabled.ui-icon-desc, .searchResults .ui-state-disabled.ui-icon-asc 
{ 
    display: none; 
}

स्रोत

2010-09-01 GiddyUpHorsey

jqGrid सॉर्ट आइकन के लिए jQuery UI का उपयोग करें। आप http://jqueryui.com/themeroller/ पर अपनी थीम इंटरेक्टिव को कार्यान्वित कर सकते हैं और इसे अनुकूलन के अंत में डाउनलोड कर सकते हैं। यदि आप थीम में पहले से मौजूद अन्य आइकनों में सॉर्ट आइकन को बदलना चाहते हैं तो आप इसे और अधिक आसान बना सकते हैं। लेकिन इससे पहले कि आपको समझना होगा कि कॉलम हेडर में आइकन का उपयोग कैसे किया जाएगा।

प्रारंभिक समय में यह jqGrid के सभी कॉलम के लिए शीर्षलेख बनाएगा। प्रत्येक शीर्षलेख में सॉर्ट आइकन के साथ स्पैन होते हैं। अवधि ब्लॉक तत्वों होने "ui-आइकन" वर्ग की वजह से

<span class="s-ico" style="display: none;"> 
    <span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr" sort="asc" /> 
    <span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr" sort="desc" /> 
</span>

निम्नलिखित पृष्ठभूमि जो आपके द्वारा उपयोग jQuery यूआई विषय से आया है की तरह लग रहा है। पृष्ठभूमि से उपयोग किया जाएगा भागों "ui-icon-triangle-1-n" और "ui-icon-triangle-1-s" आइकन से मेल खाते हैं। कक्षा ui-icon, ui-icon-triangle-1-n और ui-icon-triangle-1-s

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; } 
.ui-icon-triangle-1-n { background-position: 0 -16px; } 
.ui-icon-triangle-1-s { background-position: -64px -16px; }

निम्नलिखित आप अन्य माउस को वहाँ की जगह (http://jqueryui.com/themeroller/ के botom पर सभी मानक उपलब्ध आइकन देखें) सीधे jqGrid बनाने के बाद आप उदाहरण के लिए ऐसा कर सकते हैं (चाहते हैं के रूप में परिभाषित किया गया है jQuery("#list").jqGrid({/*...*/}); के बाद)। यदि आपको पृष्ठभूमि छवि में नहीं मिलता है तो आपको जिन आइकनों की आवश्यकता है, उन्हें मौजूदा आइकन को बेहतर नहीं बदलना चाहिए। आप पृष्ठभूमि छवि में कुछ नए हिस्से जोड़ सकते हैं जिनका आप उपयोग करते हैं।

jqGrid में 3-राज्य सॉर्ट आइकन (आरोही, अवरोही और छोड़े गए) के लिए कोई प्रत्यक्ष समर्थन नहीं है। यदि आप इसे कार्यान्वित करना चाहते हैं तो मैं आपको sortDatagrig.base.js का फ़ंक्शन सावधानीपूर्वक कार्यान्वित करने के लिए अनुशंसा करूंगा जो आपको src डाउनलोड किए गए jqGrid स्रोतों की उप-निर्देशिका में मिलता है। span.s-ico के लिए यह फ़ंक्शन jQuery.hide() या jQuery.show() फ़ंक्शन कॉल करें, बच्चे स्पैन से ui-state-disabled कक्षा को जोड़ें या हटाएं और onSortCol ईवेंट हैंडल को परिभाषित करते समय कॉल करें।तो आप अपने कस्टम onSortCol इवेंट हैंडल के अंदर सॉर्ट आइकन के सभी परिवर्तनों को कार्यान्वित कर सकते हैं।

अद्यतन:Free jqGrid फोर्क सॉर्टिंग आइकन को अनुकूलित करने के लिए कई विकल्प हैं। सबसे पहले अगर Font Awesome आइकन का समर्थन करता है। एक बस फ़ॉन्ट विस्मयकारी सीएसएस और विकल्प शामिल करने की जरूरत है। उदाहरण के लिए, threeStateSort: true का उपयोग कर सकते हैं ताकि आइटम को कॉलम हेडर पर 3-डी क्लिक पर मूल, अनुक्रमित क्रम में प्रदर्शित किया जा सके। आइकन और टेक्स्ट के क्रम को बदलने के लिए कोई sortIconsBeforeText: true का उपयोग कर सकता है। कॉलम हेडर में लंबे टेक्स्ट का उपयोग करने के मामले में पाठ से पहले सॉर्टिंग आइकन रखना उपयोगी हो सकता है। कोई भी showOneSortIcon: true विकल्प का उपयोग कर सकते हैं ताकि दो सॉर्टिंग आइकनों के बजाय केवल एक (desc या asc) सॉर्टिंग आइकन दिखाया जा सके (एक दूसरे के ऊपर एक या एक के ऊपर)।

कोई भी $.jgrid.builderSortIcons विधि को ओवरराइट करके सॉर्टिंग आइकन को पूर्ण रूप से अनुकूलित कर सकता है। The demo दिखाता है कि अलग-अलग कस्टमर $.jgrid.builderSortIcons विधि का उपयोग अलग-अलग कॉलम के लिए * अलग सॉर्टिंग आइकन सेट करने के लिए कैसे किया जा सकता है। The demo कॉलम में डेटा के प्रकार पर निर्भर तीन अलग-अलग आइकन का उपयोग करता है। डिफ़ॉल्ट छंटाई प्रकार के साथ कॉलम sorttype: "text" प्रदर्शित करता है

और