在同一页面中显示不同的jqgrid格式

Question

我希望有人能够帮助我，我有一个案例，似乎非常特别需要在单个页面中显示多个jqGrid格式，具体取决于jqGrid之外的下拉列表的选择，例如形象：

首先，我需要一个关于如何最好地实现下拉列表，如果直接或内置HTML和使用jQuery如何让选择与之合作的项目推荐。我对此非常困惑，我不知道如何将数据从dropdownlist发送到控制器。

在另一方面需要知道，如果有可能表现出不同的jqGrid的格式，根据在下拉列表中选择的项目，即：

如果选项是“A”的要显示的列：身份证，姓名，城市，如果选择的选项是“B”列将显示ID，姓名，姓氏，电话，如果更改为“C”必须显示身份证，姓名，婚姻状况，年龄。这可能吗..？？？如果可能的话，我该怎么做？可以帮助我举一个例子..？

在此先感谢。 最好的问候。

编辑：

在这里，我MI后应用的Javascript代码，它是有马特的sugestions，但有一点问题的是，当我选择一个选项，它`告诉我我要的cols。但是当我选择另一个选项是尝试再次选择第一，COLS不会改变....

<script type="text/javascript"> 

    jQuery(document).ready(function() { 
     var lastsel; 

     $(function() { 
      $('#list').jqGrid({ 
       url: '/EquipodeRed/GridData/', 
       editurl: '/EquipodeRed/EditData/', 
       datatype: 'json', 
       height: 250, 
       colNames: ['Id', 'Descripción', 'Dirección Mac', 'Marca', 'Modelo', 'Numero de Serie', 'Tipo de Equipo'], 
       colModel: [ 
          { name: 'Id', index: 'Id', width: 30 }, 
          { name: 'Descripcion', index: 'Descripcion', width: 100, sortable: true, editable: true, edittype: "text", editoptions: { size: "15", maxlength: "20"} }, 
          { name: 'DireccionMac', index: 'DireccionMac', width: 80, sortable: true, editable: true, edittype: "text", editoptions: { size: "10", maxlength: "15"} }, 
          { name: 'Marca', index: 'Marca', width: 80, editable: true, edittype: "text", editoptions: { size: "5", maxlength: "10"} }, 
          { name: 'Modelo', index: 'Modelo', width: 80, editable: true, edittype: "text", editoptions: { size: "10", maxlength: "25"} }, 
          { name: 'NumerodeSerie', index: 'NumerodeSerie', width: 80, editable: true, edittype: "text", editoptions: { size: "10", maxlength: "15"} }, 
          { name: 'TipoEquipo', index: 'TipoEquipo', width: 100, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipodeRed/ListaTiposEquipo/'} } 
          ], 
       caption: 'Listado de Equipos de Red', 
       onCellSelect: function (rowid, iCol, cellcontent, e) { 
        if (rowid && rowid !== lastsel) { 
         $('#list').restoreRow(lastsel); 
         lastsel = rowid; 
        } 
        $('#list').editRow(rowid, true, iCol); 
       }, 
       autowidth: true, 
       rowNum: 10, 
       rowList: [10, 20, 30], 
       pager: '#pager', 
      }); 

      $('#list').jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: true }, 
      { url: '/EquipodeRed/EditData/', 
      }, 
      { url: '/EquipodeRed/AddData', 
      }, 
      { url: '/EquipodeRed/DeleteData/', 
      }, 
      { closeAfterSearch: true, 
       reloadAfterSubmit: true 
      } 

     ); 

     }); 

      $("#displaydropdown").change(function() { 
       var display = $("#displaydropdown option:selected").val(); 
       if (display == '1') 
       { 
        $('#list').hideCol('Marca', 'Modelo'); 
       } 
       else if (display == '2') { 
        $('#list').hideCol('DireccionMac'); 
       } 
       else if (display == '3') { 
        $('#list').hideCol('Descripcion, NumerodeSerie'); 
       } 
      }); 
     }); 
    }); 
</script> 
<h2>Equipos de Red</h2> 

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

    <br /> 
    <br /> 


<table id="list" class="scroll" cellpadding="0" cellspacing="0" width="100%"></table> 
<div id="pager" class="scroll" style="text-align: center;"></div> 

编辑2：马特非常感谢你，尤其是对于耐心...我意识到我使用showcol和hidecol完全错误，所以我不得不改变这部分代码：

$("#displaydropdown").change(function() { 
       var display = $("#displaydropdown option:selected").val(); 
       if (display == '1') 
       { 
        $('#list').hideCol('Marca', 'Modelo'); 
       } 
       else if (display == '2') { 
        $('#list').hideCol('DireccionMac'); 
       } 
       else if (display == '3') { 
        $('#list').hideCol('Descripcion, NumerodeSerie'); 
       } 
      }); 

这一个：

$("#displaydropdown").change(function() { 
       var display = $("#displaydropdown option:selected").val(); 
       if (display == '1') 
       { 
        $('#list').hideCol('Marca'); 
        $('#list').hideCol('Modelo'); 
        $('#list').showCol('Id'); 
        $('#list').showCol('Descripcion'); 
        $('#list').showCol('DireccionMac'); 
        $('#list').showCol('NumerodeSerie'); 
        $('#list').showCol('TipoEquipo'); 
       } 
       else if (display == '2') { 
        $('#list').hideCol('DireccionMac'); 
        $('#list').showCol('NumerodeSerie'); 
        $('#list').showCol('Id'); 
        $('#list').showCol('Descripcion'); 
        $('#list').showCol('Marca'); 
        $('#list').showCol('Modelo'); 
        $('#list').showCol('TipoEquipo'); 
       } 
       else if (display == '3') { 
        $('#list').hideCol('Descripcion') 
        $('#list').hideCol('NumerodeSerie'); 
        $('#list').showCol('Id'); 
        $('#list').showCol('Marca'); 
        $('#list').showCol('Modelo'); 
        $('#list').showCol('TipoEquipo'); 
        $('#list').showCol('DireccionMac'); 
       } 
      }); 

现在一切工作正常...！再次感谢..;）

Answer 1

不可否认，我只在很短的时间内进行web开发，所以可能有更好的方法来使用。但一种方法是，您可以使用jQuery来处理下拉列表的“更改”。

假设你已经有了一些下拉列表可能看起来像：

@Html.DropDownListFor(model => model.Display, 
new SelectList(Model.Displays, "Name", "Name", new {@id= "displaydropdown"}) 

，然后你可以使用jQuery的变化处理所选择的项目在列表中的切换做一些事情：

$("#displaydropdown").change(function(){ 
    // The on-change code goes in here. 
}); 

然后你可以利用jqGrid的“hideCol”和“showCol”功能来隐藏/显示列数据。这些电话的样子：

$('#myTableId').hideCol('someColumn'); 
$('#myTableId').showCol('anotherColumn'); 

开始，你可以与所有你可能曾经显示列网格创建colModel，然后使用这些hideCol和showCol功能来调整基于所选择的网格显示上的显示。

所以，也许是这样的：

$("#displaydropdown").change(function(){ 
    var display = $("#displaydropdown option:selected").val(); 
    if (display == 'A') // or whatever 
    { 
     $('#myTableId').hideCol('someColumn'); 
     $('#myTableId').showCol('anotherColumn'); 
    } 
    else if (display == 'B') 
    { 
     $('#myTableId').showCol('someColumn'); 
     $('#myTableId').showCol('anotherColumn'); 
    } 
}); 

总之，这是最基本的想法。它可能会使用一些改进，它会将显示逻辑推入该jQuery函数 - 可能会比我的更好，更优雅的解决方案 - 但这个想法应该工作。希望能帮助到你。