Zeige verschiedene Spalten auf Auswahl von Dropdown in jqGrid

Question

Ich folgte nur, aber meins ist in php, Show different Jqgrid formats in the same page Ich möchte auch die gleiche Art von Optionen, wenn ich ein Element aus Dropdown auswählen alle Spalten außer wenigen verstecken möchten, vor allem ich nicht verstanden dies und wie diesen Code zu schreiben, in php

<table width="100%"> 
<tr> 
<td>Tipo de Equipo :</td> 
<td><% =Html.DropDownList("TipoId", (SelectList)ViewData["tiposdeEquipo"], "--Seleccione--", new { @id = "displaydropdown" })%> </td> 
</tr> 
<tr> 
<td colspan="2"><input type="submit" value="Mostrar" /></td> 
</tr> 
</table> 

wie dieser Code funktioniert, indem das Mostrar klicken, helfen Sie mir bitte ich ein Anfänger bin.

Dies ist mein Code

<select id="displaydropdown" name="displaydropdown"> 
<option selected>Change Type</option> 
<option value="A">option1</option> 
<option value="B">option2</option> 
<option value="C">option3</option> 
</select> 

<div class="box A" align="center"><table id="jqGrid" ></table><div id="jqGridPager"></div></div> 
<script type="text/javascript"> 

var lastsel; 

$(function() { 
     $("#jqGrid").jqGrid({ 
     url:'server.php', 
     editurl: 'update.php', 
     datatype: "json", 
     shrinkToFit: true, 
     colModel:[ 
      {label:'COUNT',name:'ID',align:"center"}, 
      {label:'EMPLOYEE LOGIN',name:'Employee_Login',align:"center"}, 
      {label:'NEW LEAD',name:'New_Value',align:"center"}, 
      {label:'REASON/COMMENTS',name:'Requestor_NOTES',align:"center"}, 
      {label:'EXISTING LEAD',name:'Existing_Value',align:"center"}, 
       ],    
     rowNum:200, 
     rowList:[400,300,200], 
     onCellSelect: function (rowid, iCol, cellcontent, e) { 
      if (rowid && rowid !== lastsel) { 
       $('#jqGrid').restoreRow(lastsel); 
       lastsel = rowid; 
      } 
     $('#jqGrid').editRow(rowid, true, iCol); 
      }, 
     pager: '#jqGridPager', 
     sortorder: "asc", 
     viewrecords: true, 
     height:'300px', 
     width:'750' 

    }); 
    jQuery("#jqGrid").jqGrid('navGrid',"#jqGridPager",{edit:false,add:false,del:false,search:false}); 
    //$('#jqGrid').jqGrid('setGridWidth', '1300'); 
    }); 

    $("#displaydropdown").change(function() { 
     var display = $("#displaydropdown option:selected").val(); 
     if (display == 'A') 
     { 
      $('#jqGrid').hideCol('ID'); 
      $('#jqGrid').showCol('Req_Date'); 
      $('#jqGrid').showCol('App_WeekBeginning'); 

     } 
     else if (display == 'B') { 
      $('#jqGrid').hideCol('App_WeekBeginning'); 
      $('#jqGrid').showCol('Req_Day'); 
      $('#jqGrid').showCol('App_Week'); 

     } 
     else if (display == 'C') { 
      $('#jqGrid').hideCol('App_Week') 
      $('#jqGrid').showCol('ID'); 
      $('#jqGrid').showCol('Req_Date'); 
     } 
    }); 



</script> 

Answer 1

Die Methoden showCol und hideCol sollte den Wert von name Eigenschaft von colModel und nicht der Wert von index Eigenschaft, wie in Ihrem aktuellen Code verwenden. Darüber hinaus wird die name-Eigenschaft verwendet, um id einiger interner jqGrid-Elemente zu erstellen. Daher sollte der Wert der Eigenschaft name keine Leerzeichen enthalten, die in HTML5 verboten sind (siehe here). Ich nehme an, dass Sie

{label:'EMPLOYEE LOGIN',name:'Req_Date',align:"center"} 

zum Beispiel statt

{name:'EMPLOYEE LOGIN',index:'Req_Date',align:"center"} 

Nach den Änderungen der Code $('#jqGrid').showCol('Req_Date'); sollte funktionieren verwenden wollte.