在jqGrid显示下拉列表中选择不同的列

我只是遵循这个，但我的php是， Show different Jqgrid formats in the same page我也希望同样的选项，如果我从下拉列表中选择一个项目所有列想要隐藏除了少数，特别是我不明白这个和这个代码是如何工作通过点击Mostrar如何php在jqGrid显示下拉列表中选择不同的列

<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>

写这样的代码，请帮助我，我是个初学者。

这是我的代码

<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>

来源

2016-05-31 Sunil Sharma

你到底有哪个问题（有什么不行）？代码'jQuery（document）.ready（function（）{...}）;'和$（function（）{...}）;'do **相同*：你不应该放置一个正在等待另一个文档准备好。具有从'url：'server.php''返回的数据的格式（具有2-3行的示例会有帮助）？你绝对不应该在'colModel'中使用'name'属性，其值包含空格（比如''NEW LEAD''）或特殊字符'name：'EXISTING LEAD''。使用'index'属性是不好的。可能你想使用'label：'EMPLOYEE LOGIN'，名称：'Req_Date''？ – Oleg

每个关于jqGrid的问题都包含了很重要的信息，你使用哪个版本的jqGrid，以及从哪个版本的jqGrid（[free jqGrid]（https://github.com/free-jqgrid/jqGrid），商业版本[Guriddo jqGrid JS]（http://guriddo.net/?page_id=103334）或旧版本的<= 4.7版本的jqGrid）。另一个常见的评论：我建议你看看[答案]（http://stackoverflow.com/a/34976517/315935），它显示了在'beforeSelectRow'内调用'editRow'和'restoreRow'的例子。和'onSelectRow'以及'savedRow'参数的使用而不是'lastsel'。 – Oleg

谢谢@Oleg的回复，我会重命名为标签名称。我正在使用[Guriddo jqGrid JS]（http://guriddo.net/?page_id=103292）， –

的方法showCol和hideCol应该从colModel使用name属性的值，而不是index财产的价值，就像在你当前的代码。此外，name属性将用于构建一些内部jqGrid元素的id。因此，name属性的值应该没有空格，这在HTML5中是禁止的（请参阅here）。我想你想使用

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

例如，而不是

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

变化的代码$('#jqGrid').showCol('Req_Date');应该工作之后。

来源

2016-05-31 09:55:49 Oleg

，我有这个愚蠢的怀疑，假设在我的MySQL数据库中我有3列'ID'，'FIRSTNAME'，'LASTNAME'的表。如何使用这个列名来使用jqGrid获取数据。我想''colModel'中使用'name'关键字。 –

，你可以检查我的代码，我编辑它..是否正确 –

@SunilSharma：你的代码现在工作吗？你可以隐藏/显示列吗？数据库中表的列名可能与您从服务器返回的数据格式无关。我在第一条评论中问过你：**哪个格式有从url返回的数据：'server.php'（有2-3行的例子会有帮助）？**。您想要显示多少行（100，1000，10000，1000000）？你当前的代码不使用'loadonce：true'选项，因此你可能已经实现了**服务器端**分页和数据排序。是这样吗？ – Oleg

在jqGrid显示下拉列表中选择不同的列

回答

相关问题