问题描述

JqGrid 如何如何隐藏列

第一次使用JqGrid 想把代码里的某些列隐藏，但是一直没成功：

 <script type="text/javascript">

    $(document).ready(function () {
        $("#companyInstructionList").jqGrid({
            url: '@Url.Action("GetCompanyInstructionList", "Admin", null)',
            datatype: 'json',
            myType: 'GET',
            ajaxGridOptions: { cache: false },
            colNames: ['Company Name', 'Work Instruction Source', 'IKS Display Option', 'Template Option', 'KM Source', 'SMKM UserName', 'SMKM Password', 'EnableIKSServiceCIMapping', 'EnableIKSServiceCIMappingWarning'],
            colModel: [
                          {
                              name: 'CompanyName', index: 'CompanyName', label: 'CompanyName', width: 100, align: 'left', search: true, sortable: false, editable: true , editoptions: {
                                  dataInit: function (element) {
                                      element.disabled = true;
                                  }
                              }
                          },
                          { name: 'WorkInstructionSource', index: 'WorkInstructionSource', label: 'WorkInstructionSource', width: 150, align: 'left', search: false, sortable: false, editable: true, edittype: 'select', stype: 'select', editoptions: { value: "IKS:IKS;SM:SM" } },
                          { name: 'KMDisplayOption', index: 'KMDisplayOption', label: 'KMDisplayOption', width: 100, align: 'left', search: false, sortable: false, editable: true, edittype: 'select', stype: 'select', editoptions: { value: "Directly_Open:Directly_Open;Render:Render" } },
                          { name: 'TemplateOption', index: 'TemplateOption', label: 'TemplateOption', width: 100, align: 'left', search: false, sortable: false, editable: true, edittype: 'select', stype: 'select', editoptions: { value: "Regular:Regular;PG:PG" } },
                          { name: 'KMSource', index: 'KMSource', label: 'KM Source', width: 90, align: 'left', search: false, sortable: false, editable: true, edittype: 'select', stype: 'select', editoptions: { value: "IKS:IKS;SM:SM" } },
                          { name: 'SMKMUserName', index: 'SMKMUserName', label: 'SMKM UserName', width: 120, align: 'left', search: false, sortable: false, editable: true, edittype: 'text' },
                          { name: 'SMKMPassword', index: 'SMKMPassword', label: 'SMKM Password', width: 120, align: 'left', search: false, sortable: false, editable: true, edittype: 'text' },
                          { name: 'EnableIKSServiceCIMapping', index: 'EnableIKSServiceCIMapping', label: 'EnableIKSServiceCIMapping', width: 150, align: 'left', search: false, sortable: false, editable: true, edittype: "checkbox", editoptions: { value: "Yes:No" } },
                          { name: 'EnableIKSServiceCIMappingWarning', index: 'EnableIKSServiceCIMappingWarning', label: 'EnableIKSServiceCIMappingWarning', width: 150, align: 'left', search: false, sortable: false, editable: true, edittype: "checkbox", editoptions: { value: "Yes:No" } }
            ],
            jsonReader: { repeatitems: false },
            viewrecords: true,
            rowNum: 30,
            rowList: [30, 40, 50],
            pager: '#companyInstructionListPager',
            loadonce: false,
            shrinkToFit: false,
            height: 'auto',
            width:800,
            hidegrid: false,
            ignoreCase: true,
            caption: 'Configure Company',
            ondblClickRow: function (rowid, iRow, iCol, e) {

                showEditForm(rowid);

            }
        });
        $("#companyInstructionList").jqGrid('navGrid', '#companyInstructionListPager', { edit: false, add: false, del: false, search: false }, {});
        //auto height and set max-height
        $("#companyInstructionList").parents('div.ui-jqgrid-bdiv').css("max-height", "300px");
    });

    $("#editBtn").button().click(function () {
        var gr = jQuery("#companyInstructionList").jqGrid('getGridParam', 'selrow');
        if (gr != null) showEditForm(gr);
        else alert("Please select a record!");
    });

    function showEditForm(gr) {
        var rowData = $("#companyInstructionList").getRowData(gr);
        var companyName = rowData['CompanyName'];
        var workInstructionSource = rowData['WorkInstructionSource'];
        var KMDisplayOption = rowData['KMDisplayOption'];
        var TemplateOption = rowData['TemplateOption'];
        var KMSource = rowData['KM Source'];
        var SMKMUserName = rowData['SMKM UserName'];
        var SMKMPassword = rowData['SMKM Password'];
        var EnableIKSServiceCIMapping = rowData['EnableIKSServiceCIMapping'];
        var EnableIKSServiceCIMappingWarning = rowData['EnableIKSServiceCIMappingWarning'];

        @*jQuery("#companyInstructionList").jqGrid('editGridRow', gr, {
            height: 270, width: 470, resize: false, reloadAfterSubmit: true, closeAfterEdit: true, closeAfterAdd: true, url: '@Url.Action("ConfigureCompanyInstruction", "Admin")' + '?companyName=' + companyName + '&workInstructionSource=' + workInstructionSource + '&kmDisplayOption=' + KMDisplayOption + '&templateOption=' + TemplateOption
        });*@

        jQuery("#companyInstructionList").jqGrid('navGrid', 'hideCol', SMKMUserName);

        jQuery("#companyInstructionList").jqGrid('editGridRow', gr, {
            height: 350, width: 470, resize: false, reloadAfterSubmit: true, closeAfterEdit: true, closeAfterAdd: true, url: '@Url.Action("ConfigureCompanyInstruction", "Admin")',
            extraparam: {
                'companyName': companyName, 'workInstructionSource': workInstructionSource,
                'kmDisplayOption': KMDisplayOption, 'templateOption': TemplateOption,
                'kmSource': KMSource, 'smKMUserName': SMKMUserName, 'smKMPassword': SMKMPassword,
                'enableIKSServiceCIMapping': EnableIKSServiceCIMapping, 'enableIKSServiceCIMappingWarning': EnableIKSServiceCIMappingWarning

            }

        });

    }

    function labelEditFunc(value, opt) {
        return "<span>" + value + "</span>";
    }

    function getLabelValue(e, action, textvalue) {
        if (action == 'get') return e[0].innerHTML;
        else if (action == 'set') $(e).html(textvalue);
    }

</script>

比如KMSource如果为1 就隐藏SMKMUserName列

解决方案

colModel里对某列设置这两个bool属性
hidedlg 是否显示或者隐藏此列
hidden 在初始化表格时是否要隐藏此列

解决方案二：

你是现在编辑的时候隐藏某些列吧。。参考：jqGrid限制某些列只有在特定条件下才能编辑