Question

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

enter image description here

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

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

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

提前致谢。最诚挚的问候。

编辑：

在这里，我发布了mi应用程序的Javascript代码，它有Matt的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： Matt非常感谢，特别是因为耐心......我意识到我使用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

不可否认，我只是在很短的时间内进行网页开发，因此可能会有更好的使用方法。但是一种方法是你可以使用jQuery来处理下拉列表中的“on change”。

假设您有一些可能类似的下拉列表：

@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函数 - 可能有一个比我的更好，更优雅的解决方案 - 但这个想法应该有效。希望它有所帮助。

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

1 个答案: