Question

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

排序不适用于所有列
我想根据我设置autoResizable: 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的更多详细信息。同一问题解释了resetWidthOrg: true的新autoResizing属性。

我建议您考虑使用formatter: "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/

使用jqGrid排序/过滤问题

1 个答案: