jqGrid 显示排序后Col/hideCol不起作用

jqGrid showCol/hideCol not working after sorting

本文关键字：hideCol 不起作用 Col 显示 排序 jqGrid      更新时间：2023-09-26

下面给出的代码说明了我在隐藏/显示方面所做的工作。它在加载时确实有效，但在排序后不起作用 

grid.jqGrid({
    url: "processing.php",
    datatype: "json",
    mtype: "POST",
    postData: { "sessionTicket": "<?php echo $sessionTicket; ?>" },
    colNames: ["Details", "Name", "Address", "Date"],
    colModel: [
        {
            id: "details", name: "Details", width: 200, classes: 'pointer wrap',
            formatter: function matterFormatter(cellvalue, options, rowObject) {
                if (rowObject.properties == undefined) {
                    name = rowObject.name;
                    address = rowObject.address;
                } else {
                    name = rowObject.properties.name;
                    address = rowObject.properties.address;
                }
                details = '<strong> ' + name + '</strong> </br><strong> ' + address + '</strong>';
                return details;
            }, sorttype: function (cell, obj) {
                name = obj.name;
                return name;
            }
        },
        { name: "name", jsonmap: "properties.name", width: 200, classes: 'pointer wrap', hidden: true },
        { name: "address", jsonmap: "properties.address", width: 100, classes: 'wrap' },
        { name: "date", jsonmap: "properties.3", width: 55, formatter: 'date', formatoptions: { srcformat: 'u', newformat: 'd M Y' }, sortable: true, sorttype: 'date' }
    ],
    pager: "#pager",
    //rowNum: 20,
    rowNum: 100,
    rowList: [10, 20, 30],
    sortname: "matter",
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    loadonce: true,
    autoencode: true,
    height: 'auto',
    hidegrid: false,
    caption: "Details",
    jsonReader: {
        repeatitems: false
    },
    loadComplete: function () {
        $("#list").setCaption('Jqgrid   <input type="button" id="chooseField" value="Select Fields"  title="Click to Select Fields" />');
        var $dialog = $('<div></div>')
            .html('<form id="myform" >' +
            '<input type="checkbox" id="selectAll" value="selectAll" onClick="allField()" /><strong><label for="selectAll">Select All</label></strong><br />' +
            '<input type="checkbox" id="details" value="details" checked /><label for="details">Details</label><br />' +
            '<input type="checkbox" id="name" value="name" checked /><label for="name">Name</label><br />' +
            '<input type="checkbox" id="address" value="address" checked/><label for="address" checked>Address</label><br />' +
            '<input type="checkbox" id="date" value="date" checked/><label for="date" checked>Date</label><br />' +
            '</form>')
        .dialog({
            autoOpen: false,
            title: 'Select Fields ',
            height: 300,
            width: 350,
            position: [2, 28],
            buttons: {
                "OK": function () { field(); $(this).dialog("close"); },
                "Cancel": function () { $(this).dialog("close"); }
            }
        });
        $('#chooseField').click(function () {
            $dialog.dialog('open');
            return false;
        });
        $('form#myform').submit(function () {
            $(this).find('input[type="checkbox"]').each(function () {
                if ($(this).is(':checked') == true) {
                    alert($(this).val());
                }
            })
        });
    }
});
function field() {
    if ($('#Details').is(':checked') == true) {
        $('#list').showCol('Details');
    } else {
        $('#list').hideCol('Details');
    }
    if ($('#name').is(':checked') == true) {
        $('#list').showCol('name');
    } else {
        $('#list').hideCol('name');
    }
    if ($('#address').is(':checked') == true) {
        $('#list').showCol('address');
    } else {
        $('#list').hideCol('address');
    }
    if ($('#date').is(':checked') == true) {
        $('#list').showCol('date');
    } else {
        $('#list').hideCol('date');
    }
}

任何帮助不胜感激。我希望这将是一个小小的调整，如果有人可以帮助我，这将是非常好的提前致谢

抱歉，您对发布此类代码的期望是什么？看起来你从垃圾中得到它。这对读者不礼貌！

尽管如此，代码至少存在两个问题：

  1. 在loadComplete内部创建对话框，该对话框将多次执行（例如在排序、分页等之后）。似乎您应该移动代码并在创建网格后放置它。以同样的方式，需要绑定$('#chooseField').click(...)并$('form#myform').submit(...)一次，而不是每次都在执行loadComplete。
  2. 您可以在<form>中使用与colModel中的name属性相同的id属性。例如，如果您使用表单编辑，则可能会出现 id 重复的问题。在我看来，您可以重写表单和绑定到复选框的代码，而无需使用和id属性。
相关文章：