Question

我只是按照这个，但我的是在PHP， Show different Jqgrid formats in the same page我也想要同样的选项如果我从下拉列表中选择一个项目除了少数几个要隐藏的所有列，特别是我不明白这个以及如何在php中编写此代码

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

点击Mostrar，此代码如何运作，请帮助我，我是初学者。

这是我的代码

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

Answer 1

方法showCol和hideCol应使用name中colModel属性的值，而不是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');应该有效。

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

1 个答案: