根據內容對齊jqGrid列

如何根據列中加載的內容來對齊jqGrid列。我知道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" 
}]

來源

2017-01-13 Rohit

請在每個問題中包含您使用的jqGrid的版本以及叉子。 [免費jqGrid]（https://github.com/free-jqgrid/jqGrid）fork（從第一個4.8版本開始）的解決方案很容易，但其他版本/分支的解決方案可能非常複雜。此外，您使用包含點的名稱（如'name：'Class.ClassID''）。這可能是其他問題的根源，特別是在舊版本的jqGrid中。代替使用'jsonmap'會更好。 'gridComplete'內的循環中'setRowData'的使用使得網格**變得更加緩慢**。替換它很好。 – Oleg

我正在使用4.5.3版本。我知道該版本是舊的，但我們處於發佈階段，因此無法立即更改版本。因此，如果您提供解決方案和提供的版本將會很有幫助。 – Rohit

你可以嘗試使用autoWidthColumns方法，我很多年出版here。我在the old answer和this one中描述了它。我應該警告你，autoWidthColumns方法工作非常緩慢，特別是對於大型電網。

我強烈建議您升級到最新版本（4.13.6）free jqGrid 4.13.6，其中包含您需要的功能。它在the wiki article中有描述。你應該在免費的jqGrid中做什麼只是在每一列中放置autoResizable: 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。

來源

2017-01-13 16:05:42 Oleg

@ Olegs只是有點懷疑，免費的jqGrid和trirand.com jqGrid有什麼區別嗎？ – Rohit

@Rohit：「jqGrid」自2014年底以來不存在。舊jqGrid的主開發人員Tony Tomov在2014年12月中旬更改了許可協議（請參閱[帖子]（http://www.trirand.com/ blog /？p = 1438））在jqGrid 4.7.1中使產品不再更自由。你可以看到目前的價格[這裏]（http://guriddo.net/?page_id=103334）。因此，我開始在2014年底開發免費的jqGrid，以免費提供（在相同的MIT/GPL許可下）使用jqGrid 4.7和早期版本的人員。我試圖保持與舊版本的最大兼容性，因此使用4.x.y版本。 – Oleg

@Rohit：換句話說：沒有更多的jqGrid。有兩個叉，基於jqGrid 4.7：1）**紀念** Guriddo jqGrid JS，當前版本是5.2.0和2）免費jqGrid，目前版本4.13.6，我開發和提供自由。「免費jqGrid」和「Guriddo jqGrid」是產品的名稱。 – Oleg

根據內容對齊jqGrid列

回答

相關問題