javascript - 根据内容对齐jqGrid列

Question

如何根据列中加载的内容对齐 jqGrid 列。我知道 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

                    },
                     {
                         name: 'ClassSchedule',
                         index: 'ClassSchedule',
                         sortable: false,
                         align: 'center',
                         title: false

                     },

               {
                   name: 'AssignUser',
                   index: 'AssignUser',
                   formatter:'date',
                   sortable: false,
                   align: 'center',
                   title: false


               },

               {
                   name: 'UserName',
                   index: 'UserName',

                   sortable: true
               },
               {
                   name: 'Class.WhenCreated',
                   index: 'Class.WhenCreated',

                   formatter:'date',
                   sortable: true
               }],

                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#pjqgrid',
                sortname: 'id',
                toolbarfilter: true,
                viewrecords: true,
                sortorder: "asc",
                loadonce: true,
                ignoreCase: true,
                gridComplete: function () {
                    var myGrid = $("#jqgrid");

                    //$(this).jqGrid('hideCol', 'cb'); // code is commented for grid size get reduce  (Default checkboxes hidden)
                    var ids = jQuery("#jqgrid").jqGrid('getDataIDs');

                    for (var i = 0; i < ids.length; i++) {
                        var cl = ids[i];
                        var classSchedule='Class Schedule';

                        Au = "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["Class_AssignUser"]' onclick='AssignUser(" + cl + ")'\"><i class='fa fa-users fa-lg' aria-hidden='true'></i></button>";
                        Cd="<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["ViewCourseDetails"]' onclick='CourseDetails(" + cl + ")'\"><i class='fa fa-file fa-lg' aria-hidden='true'></i></button>";
                        Cs="<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["ViewClassSchedule"]' onclick='ViewClassSchedule(" + cl + ")'\"><i class='fa fa-calendar fa-lg' aria-hidden='true'></i></button>";

                        jQuery("#jqgrid").jqGrid('setRowData', ids[i], {
                            AssignUser: Au,
                            CourseDetails:Cd,
                            ClassSchedule:Cs
                        });
                    }
                    $("#progbar").css('width', '100%')
                    $("#progess").hide();
                    $("#grid").css("visibility", 'visible');

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


            });
            jQuery("#jqgrid").jqGrid('navGrid', "#pjqgrid", {
                edit: false,
                add: false,
                del: true
            });



            jQuery("#jqgrid").jqGrid('navButtonAdd', '#pjqgrid_left', { // "#list_toppager_left"
                caption: "",
                title: '@objLocalizer["Class_AddClass_Btn"]',
                buttonicon: 'ui-icon-plus',
                onClickButton: function () {
                    sessionStorage.removeItem('Showkey');
                    document.location.href = '@Url.Action("AddClass", "Class")';
                    //'/Account/Adduser';
                }
            });
            ////
            jQuery("#m1").click(function () {
                var s;
                s = jQuery("#jqgrid").jqGrid('getGridParam', 'selarrrow');

            });
            jQuery("#m1s").click(function () {
                jQuery("#jqgrid").jqGrid('setSelection', "13");
            });
            // remove classes
            $(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
            $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
            $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
            $(".ui-jqgrid-pager").removeClass("ui-state-default");
            $(".ui-jqgrid").removeClass("ui-widget-content");

            // add classes
            $(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
            $(".ui-jqgrid-btable").addClass("table table-bordered table-striped");

            $(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
            $(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus");
            $(".ui-icon.ui-icon-pencil").removeClass().addClass("fa fa-pencil");
            $(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o");
            $(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search");
            $(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh");
            $(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
            $(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");

            $(".ui-icon.ui-icon-seek-prev").wrap("<div class='btn btn-sm btn-default'></div>");
            $(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward");

            $(".ui-icon.ui-icon-seek-first").wrap("<div class='btn btn-sm btn-default'></div>");
            $(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward");

            $(".ui-icon.ui-icon-seek-next").wrap("<div class='btn btn-sm btn-default'></div>");
            $(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward");

            $(".ui-icon.ui-icon-seek-end").wrap("<div class='btn btn-sm btn-default'></div>");
            $(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward");

            var bottomPagerDiv = $("div#pjqgrid")[0];
            //$("#refresh_jqgrid", bottomPagerDiv).remove();
            $("#jqgrid_ilcancel", bottomPagerDiv).remove();
            $("#jqgrid_ilsave", bottomPagerDiv).remove();
            $("#del_jqgrid", bottomPagerDiv).remove();
            $("#jqgrid_iledit", bottomPagerDiv).remove();
            $("#jqgrid_ilsave", bottomPagerDiv).remove();
            $("#Enroll_btn").find('span').remove();

            $('#refresh_jqgrid').attr('title', '@objLocalizer["Class_Refresh_Btn"]');
            $('#search_jqgrid').attr('title', '@objLocalizer["Class_Search_Btn"]');


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

在某些列中，我也使用了图标，但与列相比，列看起来更大。下面是截图 对此有任何帮助表示赞赏!

JSON 响应

[{
    "Class": {
        "ClassID": 2,
        "CourseID": 2,
        "ClassStatusID": 1,
        "ClassTypeID": 1,
        "InstructorID": null,
        "AlternateInstructorID": null,
        "ContactPersonID": null,
        "CurrencyID": 2,
        "CertificateID": null,
        "AllowSelfEnrollment": true,
        "ClassSizeMin": 150,
        "ClassSizeMax": 170,
        "Username": "test",
        "ClassUrl": "www.google.com",
        "StartDate": "2016-10-23T00:00:00",
        "EndDate": "2016-10-23T00:00:00",
        "DiscountedCoursePrice": 180.00,
        "CoursePrice": 210.00,
        "Password": null,
        "WhoCreated": 3,
        "WhenCreated": "2017-01-02T15:30:45.623",
        "WhoModified": 3,
        "WhenModified": "2017-01-03T01:00:45.623",
        "PasswordString": null,
        "CoursePriceString": null,
        "DiscountedCoursePriceString": null
    },
    "ClassLang": {
        "ClassLangID": 5,
        "ClassID": 2,
        "LanguageTypeID": 3,
        "Title": "de-DE_Introduction to Piano",
        "Description": "de-DE_Introduction to Piano",
        "WhoCreated": null,
        "WhenCreated": null,
        "WhoModified": null,
        "WhenModified": null
    },
    "UserName": "User admin"
}, {
    "Class": {
        "ClassID": 3,
        "CourseID": 3,
        "ClassStatusID": 2,
        "ClassTypeID": 1,
        "InstructorID": null,
        "AlternateInstructorID": null,
        "ContactPersonID": null,
        "CurrencyID": 2,
        "CertificateID": null,
        "AllowSelfEnrollment": true,
        "ClassSizeMin": 140,
        "ClassSizeMax": 180,
        "Username": "test",
        "ClassUrl": "www.google.com",
        "StartDate": "2016-10-23T00:00:00",
        "EndDate": "2016-10-23T00:00:00",
        "DiscountedCoursePrice": 180.00,
        "CoursePrice": 210.00,
        "Password": null,
        "WhoCreated": 3,
        "WhenCreated": "2017-01-02T15:30:45.623",
        "WhoModified": 3,
        "WhenModified": "2017-01-03T01:00:45.623",
        "PasswordString": null,
        "CoursePriceString": null,
        "DiscountedCoursePriceString": null
    },
    "ClassLang": {
        "ClassLangID": 8,
        "ClassID": 3,
        "LanguageTypeID": 3,
        "Title": "de-DE_Class Learn classical music",
        "Description": "de-DE_Class Learn classical music",
        "WhoCreated": null,
        "WhenCreated": null,
        "WhoModified": null,
        "WhenModified": null
    },
    "UserName": "User admin"
}, {
    "Class": {
        "ClassID": 4,
        "CourseID": 4,
        "ClassStatusID": 2,
        "ClassTypeID": 1,
        "InstructorID": null,
        "AlternateInstructorID": null,
        "ContactPersonID": null,
        "CurrencyID": 2,
        "CertificateID": null,
        "AllowSelfEnrollment": true,
        "ClassSizeMin": 15,
        "ClassSizeMax": 17,
        "Username": "test",
        "ClassUrl": "www.google.com",
        "StartDate": "2016-10-23T00:00:00",
        "EndDate": "2016-10-23T00:00:00",
        "DiscountedCoursePrice": 180.00,
        "CoursePrice": 210.00,
        "Password": null,
        "WhoCreated": 3,
        "WhenCreated": "2017-01-02T15:30:45.623",
        "WhoModified": 3,
        "WhenModified": "2017-01-03T01:00:45.623",
        "PasswordString": null,
        "CoursePriceString": null,
        "DiscountedCoursePriceString": null
    },
    "ClassLang": {
        "ClassLangID": 11,
        "ClassID": 4,
        "LanguageTypeID": 3,
        "Title": "de-DE_Playing Electric blue guitar",
        "Description": "de-DE_Playing Electric blue guitar",
        "WhoCreated": null,
        "WhenCreated": null,
        "WhoModified": null,
        "WhenModified": null
    },
    "UserName": "User admin"
}]

Answer 1

您可以尝试使用我发布的autoWidthColumns方法here很多年了。我在the old answer中描述过它并在 this one 。我应该警告您，autoWidthColumns 方法运行速度非常慢，尤其是对于大型网格。

我强烈建议您升级到 free jqGrid 的当前版本 (4.13.6) 4.13.6，其中包含您需要的功能。它在 the wiki article 中有描述。 。在免费的 jqGrid 中，您应该做的只是在每一列中放置 autoResizing: true ，您希望能够根据列的内容“自动调整大小”。通过添加属性 autoresizeOnLoad: true 您将获得所需的网格宽度。

重要的是要了解版本 4.5.3 已经死亡很长时间了。它不受理由支持。您不应该花时间从尸体上创建弗兰肯斯坦(或僵尸)，而应该使用 jqGrid 的版本，它是活的。作为额外的好处，您可以多次减少程序的代码，并且程序将具有更好的性能。

顺便说一句，gridComplete 的当前代码是反模式，因为在循环中调用 setRowData 是在列中创建自定义内容的最差方法。按照网络浏览器更改页面上的一个元素 reflow 页面上所有现有元素。您应该将 gridComplete 至少替换为 AssignUser、CourseDetails 和 ClassSchedule 列中的自定义格式化程序(以相同的方式就像您在 ClassLang.Title 列中所做的那样)。它将成倍提高网格性能。您当然应该在所有 jqGrid 中添加 gridview: true 选项(默认情况下免费 jqGrid 设置 gridview: true)。请参阅the old answer更多细节。