jqGrid showCol/hideCol not working after sorting

问题

The below given code illustrates what I have done fro hide/show. It does work on load but wouldn't work after sorting

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');
    }
}

Any help is appreciated . I hope this would be a minor tweak would be excellent if someone could help me out in this Thanks in advance

回答1:

Sorry but what you expect with posting of such code? It looks like you get it from the garbage. It's not polite to the readers!

Nevertheless the code have clear at least two problems:

creating of dialog inside of loadComplete which will be executed multiple times (for example after sorting, paging and so on. It seems that you should move the code and place it after the grid is created. In the same way one need to bind $('#chooseField').click(...) and $('form#myform').submit(...) once and not every time on executing loadComplete.
you use id attributes in the <form> which are the same as the name properties in the colModel. It could follow problems with id duplicates if you would use form editing for example. It seems to me that you can rewrite the code of form and binding to checkboxes without usage and id attributes at all.

来源：https://stackoverflow.com/questions/27365779/jqgrid-showcol-hidecol-not-working-after-sorting

标签

javascript

jquery

jqgrid