Javascript 根据内容对齐jqGrid列_Javascript_Jquery_Jqgrid

Javascript 根据内容对齐jqGrid列

javascript jquery jqgrid

Javascript 根据内容对齐jqGrid列,javascript,jquery,jqgrid,Javascript,Jquery,Jqgrid,如何根据列中加载的内容对齐jqGrid列。我知道jqGrid在将数据加载到列之前会调整列宽，那么如何根据内容调整列宽呢。此外，内容不应被删减，而应放在专栏后面 jQuery("#jqgrid").jqGrid({ url: '@Url.Action("GetClassList", "Class")', datatype: 'json', height: 'auto',

如何根据列中加载的内容对齐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());
            })

您可以尝试使用我多年来发布的

autoWidthColumns

方法。我详细地描述了它。我应该警告您，

autoWidthColumns

方法的工作速度非常慢，尤其是对于大型网格

我强烈建议您升级到4.13.6的当前版本（4.13.6），该版本包含您需要的功能。如中所述。在免费jqGrid中，您应该做的只是在每一列中放置

autoresize:true

，您希望能够根据列的内容“自动调整大小”。通过添加属性

autoresizeOnLoad:true

，您将获得所需的网格宽度

重要的是要了解4.5.3版已经过时了。这是没有理由的。与其花时间从尸体上创造一个弗兰肯斯坦（或一个僵尸），不如使用jqGrid版本，它是活的。作为额外的好处，您可以多次减少程序的代码，程序将具有更好的性能

顺便说一下，
gridComplete
的当前代码是反模式的，因为在循环中调用
setRowData
是在列中创建自定义内容的最糟糕方式。更改页面上的一个元素时，请跟随页面上所有现有元素的web浏览器。您应该在
AssignUser
、
CourseDetails
和
ClassSchedule
列中至少将
gridComplete
替换为自定义格式设置程序（就像您在
ClassLang.Title
列中所做的那样）。它将多次提高网格上的性能。当然，您应该在所有jqGrids中添加
gridview:true
选项（默认情况下，免费jqGrid集
gridview:true
）。有关更多详细信息，请参阅
请在每个问题中包括您使用的jqGrid版本和fork。fork的解决方案（从第一个4.8版本开始）很简单，但其他版本/fork的解决方案可能非常复杂。此外，还可以使用包含点的名称（如
name:'Class.ClassID'
）。这可能是其他问题的根源，尤其是在jqGrid的旧版本中。最好改用
jsonmap
。在
gridComplete
内部的循环中使用
setRowData
，会使网格运行得更慢。更换它很好，我用的是4.5.3版本。我知道版本是旧的，但我们在发布阶段，所以不能立即更改版本。因此，如果您提供具有所提供版本的解决方案，这将很有帮助。@Olegs只是一个小疑问，免费jqGrid和trirand.com jqGrid之间有什么区别吗？@Rohit：“jqGrid”自2014年底以来就不存在了。老jqGrid的主要开发者Tony Tomov于2014年12月中旬更改了jqGrid 4.7.1中的许可协议（见），并使产品不再免费。你可以看到当前的价格。因此，我在2014年底开始开发免费jqGrid，为之前使用jqGrid 4.7和早期版本的用户免费提供（在相同的MIT/GPL许可下）。我试图保持与旧版本的最大兼容性，因此使用了4.x.y版本。@Rohit：换句话说，jqGrid已经没有了。存在两个分叉，都基于jqGrid 4.7：1）商业版Guriddo jqGrid JS，当前版本为5.2.0；2）免费jqGrid，当前版本为4.13.6，我开发并免费提供。“免费jqGrid”和“Guriddo jqGrid”是产品的名称。感谢提供重要信息。几天后将试用最新版本的免费jgGrid。非常有帮助@罗希特：不客气！您可以包含一个来自
@Url.Action（“GetClassList”，“Class”）
的JSON响应示例，我可以为您提供一些减少代码的建议。了解每个项的哪个属性是唯一的（可以用作本机rowid）很重要。是否在每个项目中都插入了
id
属性？另外，我建议您使用 LooTime:Trime< /Cord>场景，因为您有相对较小的一组项目（
[{ "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" }]