在同一頁面中顯示不同的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函數 - 可能會比我的更好，更優雅的解決方案 - 但這個想法應該工作。希望能幫助到你。