javascript - jqGrid 的排序/过滤问题

Question

我使用的是jqGrid 4.5.3。版本，我已升级到免费 jqGrid 版本 4.13.6。升级后我面临以下问题

1. 排序不适用于所有列
2. 我想根据已设置 autoResizes: true 和 autoresizeOnLoad: true 的内容显示列大小，但列宽并未根据内容设置

下面是我在 document.Ready 函数上编写的 jqGrid 代码

jQuery("#jqgrid").jqGrid({
            url: '@Url.Action("GetClassList", "Class")',
            datatype: 'json',
            height: 'auto',
            colNames: ['ClassID','CourseID', '@objLocalizer["Class_Title_GridCol"]','@objLocalizer["ViewCourseDetails"]','@objLocalizer["ViewClassSchedule"]', '@objLocalizer["Class_AssignUser"]','@objLocalizer["ClassCreatedBy"]','@objLocalizer["ClassCreatedDate"]'],
            colModel: [

                 {
                     name: 'Class.ClassID',
                     index: 'Class.ClassID',
                     sortable: true,
                     hidden: true
                 },
                 {
                     name: 'Class.CourseID',
                     index: 'Class.CourseID',
                     sortable: true,
                     hidden: true
                 },
                 {
                     name: 'ClassLang.Title',
                     index: 'ClassLang.Title',
                     sortable: true,
                     formatter: addLink,

                 },
                 {
                     name: 'CourseDetails',
                     index: 'CourseDetails',
                     sortable: false,
                     align: 'center',
                     title: false,
                     formatter:AddCourseDetailsLink
                 },
                 {
                     name: 'ClassSchedule',
                     index: 'ClassSchedule',
                     sortable: false,
                     align: 'center',
                     title: false,
                     formatter:AddViewClassScheduleLink
                 },
                 {
                     name: 'AssignUser',
                     index: 'AssignUser',
                     sortable: false,
                     align: 'center',
                     title: false,
                     formatter: AddAssignUserLink
                 },
                 {
                     name: 'UserName',
                     index: 'UserName',
                     align: 'center',
                     sortable: true
                 },
                 {
                     name: 'Class.WhenCreated',
                     index: 'Class.WhenCreated',
                     align: 'center',
                     formatter:'date',
                     sortable: true
                 }],

            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pjqgrid',
            sortname: "Title",
            sortorder: "desc",
            toolbarfilter: true,
            viewrecords: true,
            multiSort: true,
            sortable: true,
            loadonce: true,
            ignoreCase: true,
            gridComplete: function () {

                $("#progbar").css('width', '100%')
                $("#progess").hide();
                $("#grid").css("visibility", 'visible');

            },
            editurl: " ",
            caption: "",
            multiselect: false,
            autowidth: true,

        });

我还添加了以下功能来根据可用选项卡扩展网格

    $(window).on('resize.jqGrid', function () {
        $("#jqgrid").jqGrid('setGridWidth', $("#content").width());
    })

HTML 标记

<div class="well well-sm well-light" id="content">
    <div id='divResult'>
        @{
            await Html.RenderPartialAsync("~/ViewsBackend/Class/_ClassTab.cshtml");
        }
    </div>

    <section id="widget-grid" class="">
        <div class="row">
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div id="grid">
                    <table id="jqgrid"></table>
                    <div id="pjqgrid"></div>
                    <br>
                </div>
                <br>
            </article>
        </div>
    </section>
</div>

编辑 1 :-自定义格式化程序

function addLink(cellvalue, options, rowObject) {

            return "<a href='#' style='height:25px;width:120px;' type='button'  onclick=CallActionMethod(" + "'" + rowObject.Class.ClassID + "'" + ")>" + rowObject.ClassLang.Title + "</a>";

    }

    function AddAssignUserLink(cellvalue, options, rowObject){

            return "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["Class_AssignUser"]' onclick='AssignUser(" + rowObject.Class.ClassID + ")'\"><i class='fa fa-users fa-lg' aria-hidden='true'></i></a>";
    }

    function AddCourseDetailsLink(cellvalue, options, rowObject){

            return "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["ViewCourseDetails"]' onclick='CourseDetails(" + rowObject.Class.CourseID + ")'\"><i class='fa fa-file fa-lg' aria-hidden='true'></i></a>";

    }

    function AddViewClassScheduleLink(cellvalue, options, rowObject){

            return "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["ViewClassSchedule"]' onclick='ViewClassSchedule(" + rowObject.Class.ClassID + ")'\"><i class='fa fa-calendar fa-lg' aria-hidden='true'></i></a>";

    }

这些方法是从自定义格式化程序调用的

 function CallActionMethod(cellvalue) {
        $.ajax({

            type: "POST",
            url: '@Url.Action("SetClassDetailsClassID", "Class")',
            data: { cellvalue: cellvalue },
            success: function (data) {
                document.location.href = "@Url.Action("ClassDetails", "Class")";
            }
        });
    }

    function ViewClassSchedule(ClassID){

        $.ajax({

            type: "POST",
            url: '@Url.Action("SetClassDetailsClassID", "Class")',
            data: { cellvalue: ClassID },
            success: function (data) {
                document.location.href = "@Url.Action("ClassSchedule", "Class")";
            }
        });
    }

    function AssignUser(ClassID) {

        $.ajax({
            type: "POST",
            url: '@Url.Action("AssignUser", "Class")',
            data: { classid: ClassID },
            success: function (data) {

                jQuery(".modal-content").html('');
                jQuery(".modal-content").html(data);
                jQuery("#AssignUserModal").modal('show');

            }
        });
    }

    function CourseDetails(CourseID)
    {

        $.ajax({

            type: "POST",
            url: '@Url.Action("setcourseid", "Course")',
            data: { cellvalue: CourseID },
            success: function (data) {

                document.location.href = "@Url.Action("CourseDetails", "Course")";
            }
        });

    }

更新版本的 jqGrid 屏幕截图

对此有任何帮助表示赞赏!

Answer 1

您可以将代码修复为以下内容

$(window).on("resize", maximizeGrid);
$grid.on("jqGridAfterLoadComplete", function () {
    var colModel = $(this).jqGrid("getGridParam", "colModel"), i, cm;

    // reset widthOrg to the new values after autoResizeAllColumns
    for (i = 0; i < colModel.length; i++) {
        cm = colModel[i];
        cm.widthOrg = cm.width;
    }
    maximizeGrid();
});

$grid.jqGrid({
    datatype: "json",
    url: "/echo/json/",
    mtype: "POST",
    postData: {
        json: JSON.stringify(serverResponse)
    },
    colModel: [
        {
            name: 'ClassID',
            key: true,
            jsonmap: 'Class.ClassID',
            hidden: true
        },
        {
            name: 'Title',
            formatter: addLink,
            jsonmap: 'ClassLang.Title'
        },
        {
            name: 'CourseDetails',
            sortable: false,
            align: 'center',
            formatter:AddCourseDetailsLink,
            title: false
        },
        {
            name: 'ClassSchedule',
            sortable: false,
            align: 'center',
            formatter:AddViewClassScheduleLink,
            title: false
        },
        {
            name: 'AssignUser',
            sortable: false,
            align: 'center',
            formatter: AddAssignUserLink,
            title: false
        },
        {
            name: 'UserName',
            align: 'center'
        },
        {
            name: 'WhenCreated',
            jsonmap: 'Class.WhenCreated',
            align: 'center',
            formatter:'date'
        }
    ],
    iconSet: "fontAwesome",
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: true,
    sortname: "Title",
    sortorder: "desc",
    viewrecords: true,
    multiSort: true,
    sortable: true,
    loadonce: true,
    additionalProperties: ['Class', 'ClassLang'],
    autoencode: true,
    cmTemplate: {
        autoResizable: true
    },
    autoresizeOnLoad: true,
    autowidth: true,
    autoResizing: {
        //resetWidthOrg: true,
        compact: true
    }
});

查看演示 https://jsfiddle.net/OlegKi/b15pmdcg/4/ 。您可以在 the issue 中阅读有关 widthOrg 的更多详细信息。同样的问题解释了 autoResizing 的新 resetWidthOrg: true 属性。

我建议您考虑使用格式化程序的自定义按钮:“actions”(有关详细信息，请参阅 the wiki article)

{
    name: "act", label: "Details", template: "actions", width: 70,
    formatoptions: { editbutton: false, delbutton: false }
}

和选项

actionsNavOptions: {
    courseDetailsicon: "fa-file",
    courseDetailstitle: "show course details",
    classScheduleicon: "fa-calendar",
    classScheduletitle: "class schedule",
    assignUsericon: "fa-users",
    assignUsertitle: "Assign user to class",
    custom: [
        { action: "courseDetails", position: "first",
            onClick: function (options) {
                alert("Course Details, rowid=" + options.rowid);
            } },
        { action: "classSchedule", position: "first",
            onClick: function (options) {
                alert("Class Schedule, rowid=" + options.rowid);
            } },
        { action: "assignUser",
            onClick: function (options) {
                alert("Assign User, rowid=" + options.rowid);
            } }
    ]
}

可以在另一个演示中看到结果 https://jsfiddle.net/OlegKi/rmsz529L/3/

顺便说一下，您可以使用 Boostrap CSS 而不是 jQuery UI CSS 来使用相同的演示。您只需要添加 jqGrid 的 guiStyle: "bootstrap" 选项:

https://jsfiddle.net/OlegKi/b15pmdcg/8/

https://jsfiddle.net/OlegKi/rmsz529L/2/