jqGrid showCol / hideCol排序后无法正常工作

时间:2014-12-08 19:54:12

标签: javascript jquery jqgrid

以下给出的代码说明了我为hide / show做了什么。它确实适用于负载,但在排序后无法工作

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 个答案:

答案 0 :(得分:1)

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

然而,代码至少有两个问题:

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