排序后jqGrid showCol/hideCol无法正常工作 [英] 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

推荐答案

对不起，但是您期望发布这样的代码吗?看来您是从垃圾中获取的.对读者而言这不是礼貌！

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:

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

1. 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.
2. 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.

这篇关于排序后jqGrid showCol/hideCol无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！