Показать различные столбцы при выборе выпадающего списка в jqGrid

Question

Я только что последовал за этим, но мой находится в php, Show different Jqgrid formats in the same page Я также хочу такие же варианты, если я выберу элемент из выпадающего списка, все столбцы хотят скрыть, за исключением немногих, особенно я не понял это и как писать этот код в 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> 

, как этот код работает, нажав что Mostrar, пожалуйста, помогите мне, я новичок.

Это мой код

<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

Методы showCol и hideCol следует использовать значение name имущества от colModel и не значение index собственности, как и в текущем коде. Кроме того, свойство name будет использовано для построения id некоторых внутренних элементов jqGrid. Таким образом, значение свойства name не должно содержать пробелов, которые запрещены в HTML5 (см. here). Я полагаю, что вы хотите использовать

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

, например, вместо

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

После изменения кода $('#jqGrid').showCol('Req_Date'); должны работать.