jqGrid

Question

की शैली बदलें I3.5 का उपयोग कर रहा हूं। क्या मैं शैली बदल सकता हूं और ग्रिड को देख सकता हूं और इसे jQuery या कस्टम सीएसएस या कुछ और का उपयोग कर अधिक सुंदर बना सकता हूं?

Answer 1

मुझे यकीन है कि आप कर सकते हैं।

आप ग्रिड के सीएसएस संशोधित कर सकते हैं:

आपके पास दो विकल्प। यह उपयोगी है अगर डिजाइन पर छोटे बदलाव करना है। प्रमुख संशोधन इस तरह से नहीं किए जाने चाहिए क्योंकि जेक्यूजीड के सीएसएस वर्ग वास्तव में एक-दूसरे पर निर्भर हैं।

या आप HTML से सभी स्टाइल को हटा सकते हैं और इसे अपने आप से बदल सकते हैं।

:

एचटीएमएल

<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager2" class="scroll" style="text-align:center;"></div> 

jQuery

jQuery("#list2").jqGrid({ url:'server.php?q=2', 
datatype: "json", 
colNames:['Inv No','Date'], 
colModel:[ {name:'id',index:'id', width:55},{name:'invdate',index:'invdate',width:90}], 
rowNum:10, 
rowList:[10,20,30], 
pager: jQuery('#pager2'), 
sortname: 'id', 
viewrecords: true, 
caption:"JSON Example" }).navGrid('#pager2',{edit:false,add:false,del:false}); 

यह HTML नीचे की तरह उत्पन्न करेगा:

उदाहरण के लिए यदि आप एक JQGrid की तरह है

निकालें सभी सीएसएस वर्गों:

JQuery("#list2").removeClass(".ui-jqgrid-titlebar"); 

आदि

के बाद आप आप के साथ HTML संरचना को जोड़ सकते हैं अपनी खुद की कक्षाओं बनाया: मैं दोनों का उपयोग करने के लिए सुझाव

JQuery("#list2").addClass(".YourClass"); 

तकनीक।

Answer 2

jqGrid 3.5 की बड़ी सुविधाओं में से एक jQuery UI थीम्स के साथ एकीकरण है। आप here से थीम बना सकते हैं और/या चुन सकते हैं। तो बस अपने पृष्ठ में इसे करने के लिए एक संदर्भ जोड़ें:

<link rel="stylesheet" type="text/css" href="../css/redmond/jquery-ui-1.7.2.custom.css"/> 

यह आपको एक ग्रिड उस प्रयास की एक न्यूनतम के साथ बहुत अच्छा लग रहा है, मिल जाएगा।

क्या इससे आपकी समस्या हल हो जाती है या आपको ग्रिड को और अधिक महसूस करने की आवश्यकता होती है?

Answer 3

क्या जस्टिन Ethier कहते हैं पर विस्तार करने के लिए ग्रिड के स्वरूप बदलने के लिए एक कस्टम theme बनाने के लिए सबसे अच्छा तरीका होगा

...

के बाद से jqGrid Jquery-यूआई विषयों का उपयोग करता है,।

मैं दृढ़ता से अनुशंसा करता हूं कि आप यह देखते हैं कि यह तथ्य के बाद सीएसएस को संशोधित करने के प्रयास से पहले आपके लिए काम करता है ... हालांकि आप यह भी कर सकते हैं, यदि jquery-ui थीम लुक आपके लिए बहुत सीमित है।

Answer 4

आपको ग्रिड हेडर (ऑन-द-फ्लाई) को बदलने की आवश्यकता होगी।

यह मेरा कोड है

HTML:

<table id="jqgrid_ctrs" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="jqgrid_ctrs_pager" class="scroll" style="text-align:center;"></div> 

jqGrid:

jQuery("#jqgrid_ctrs").jqGrid({ 
     url:'php-modules/controllers_data.php?ctrtype=LED', 
     datatype: "json", 
     width:500, 
     height:"auto", 
     colNames:['CtrName','Type', 'Description', 'Location'], 
     colModel:[ 
      {name:'CtrName',index:'CTRNAME', width:70, editable:false}, 
      {name:'Type',index:'CTRTYPE', width:70, editable:false}, 
      {name:'Description',index:'CTRDESCR', width:250, editable:false}, 
      {name:'Location',index:'CTRLOCATION', width:70, editable:false} 
     ], 
     rowNum:10, 
     rowList:[10,20,30], 
     pager: jQuery('#jqgrid_ctrs_pager'), 
     sortname: 'CtrName', 
     viewrecords: true, 
     sortorder: 'desc', 
     caption:'System Controllers', 

    }).navGrid('#jqgrid_ctrs_pager', 
       {search:true,edit:false,add:false,del:false} 
      ); 

यह समझने के लिए जो आपत्ति मैं में काम करना है में, के निरीक्षण करते हैं जावास्क्रिप्ट कोड द्वारा उत्पन्न एचटीएमएल कोड:

<div id="gview_jqgrid_ctrs" class="ui-jqgrid-view" style="width: 760px;"> 
    <div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"></div> 
    <div class="ui-state-default ui-jqgrid-hdiv" style="width: 760px;"> 

...

अब, एक ID का उल्लेख किया साथ ही div < div id = "gview_jqgrid_ctrs" है ...

क्यों निम्नलिखित काम नहीं करता है यही कारण है कि।

jQuery("#jqgrid_ctrs").removeClass('.ui-widget-header'); 
jQuery("#jqgrid_ctrs").addClass('.jqgrid-header'); 

मैं शीर्ष लेख div "में खोज" माता पिता div चयन करने के लिए और था, "ui-jqgrid-शीर्षक पट्टी" वर्ग निर्दिष्ट कर रहे हैं। तब मैंने मूल "यूई-विजेट-हेडर" वर्ग हटा दिया और अपनी कक्षा के साथ प्रतिस्थापित किया।

$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").removeClass('ui-widget-header'); 
$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").addClass('jqgrid-header'); 

कहाँ .jqgrid हेडर एक शैली को इस तरह से परिभाषित किया गया है।

.jqgrid-header { 
    background:#FF9C00 url(images/new_header_bck.png) repeat-x scroll 50% 50%; 
    border:1px solid #4297D7; 
    color:#FF0000; 
    font-weight:bold; 
    } 

मैंने इसका परीक्षण किया है और काम करता है। उम्मीद है कि यह उपयोगी होगा ...

Answer 5

/* Remove jquery-ui styles from jqgrid */ 
function removeJqgridUiStyles(){ 
    $(".ui-jqgrid").removeClass("ui-widget ui-widget-content"); 
    $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default"); 
    $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr"); 
    $(".ui-jqgrid-pager").removeClass("ui-state-default"); 
} 

Answer 6

आप सभी ui ग्रिड वर्गों को दूर कर सकते हैं: अगर आपके ग्रिड आकार बड़ा है

$("[class^='ui-jqgrid']").removeAttr('class'); 

इस प्रदर्शन के मुद्दों हो सकता है।

Answer 7

मैंने jQGrid के सीएसएस को एक नए तरीके से संशोधित किया है, जो बूटस्ट्रैप डिज़ाइन का भी समर्थन करेगा। आप इस jQGrid

1) फ़ॉन्ट बहुत बढ़िया शैली

2) jQGrid नवीनतम बंडल

नई डिज़ाइन किया गया jQGrid छवि के नीचे की तरह दिखाई देगा

न्यू पूर्ण सीएसएस कॉन्फ़िगर करने के लिए चीजों को निम्नलिखित की जरूरत है और पूर्ण जावास्क्रिप्ट कोडिंग को http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html यहां शामिल किया गया है।