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

Question

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

首先我需要一个关于如何最好地实现下拉列表的建议，如果直接使用 jquery 或内置 html 以及如何让选择的项目使用。我对此很困惑，我不知道如何将数据从下拉列表发送到控制器。

另一方面需要知道是否可以根据下拉列表中选择的项目显示不同的jqGrid格式，即：

如果选项是“A”，要显示的列是：Id、Name、City，如果选择的选项是“B”，要显示的列是 Id、Name、Last Name、Phone，如果更改是“C” “必须显示身份证、姓名、姓氏、婚姻状况、年龄。这可能吗..？？？如果可能的话，我该怎么做？可以帮我举个例子吗？

提前致谢。 最好的问候。

编辑：

在这里我发布了 mi 应用程序的 Javascript 代码，它有 Matt 的建议，但是还有一个小问题，当我选择一个选项时，它会显示我想要的 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 函数中——可能有比我的更好、更优雅的解决方案——但这个想法应该可行。希望对您有所帮助。