Ausrichtung von jqGrid-Spalten nach Inhalt

Question

Wie kann ich die jqGrid-Spalte gemäß den in der Spalte geladenen Inhalten ausrichten? Ich weiß, jqGrid die Spaltenbreite vor dem Laden der Daten anpassen, dann wie kann ich die Breite nach dem Inhalt anpassen. Auch sollte der Inhalt nicht gekürzt werden, geht hinter die Säule.

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()); 
      }) 

In einigen Spalten habe ich auch Symbole verwendet, aber die Spalte sieht im Vergleich zur Spalte größer aus. Unten ist der Screenshot Jede Hilfe auf diese geschätzt!

JSON Antwort

[{ 
    "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

Sie können versuchen, autoWidthColumns Methode zu verwenden, die ich here seit vielen Jahren veröffentlicht. Ich habe es in the old answer und in this one beschrieben. Ich sollte Sie warnen, dass die Methode autoWidthColumns sehr langsam arbeitet, besonders bei großen Gittern.

Ich würde Ihnen dringend empfehlen, auf die aktuelle Version (4.13.6) von free jqGrid 4.13.6 zu aktualisieren, die die Funktionalität enthält, die Sie benötigen. Es ist in the wiki article beschrieben. Was Sie im freien jqGrid tun sollten, ist nur die Platzierung von autoResizable: true in jeder Spalte, deren Breite Sie basierend auf dem Inhalt der Spalte "autorisieren" können. Durch Hinzufügen der Eigenschaft autoresizeOnLoad: true haben Sie die erforderliche Breite des Gitters.

Es ist wichtig zu verstehen, dass die Version 4.5.3 ist tot seit langer Zeit. Es wird nicht von Grund auf unterstützt. Anstatt deine Zeit zu investieren, um einen Frankenstein (oder einen Zombie) aus Kadaver zu erschaffen, solltest du einfach die Version von jqGrid verwenden, die lebendig ist. Als zusätzlichen Vorteil können Sie den Code Ihres Programms in vielen Fällen reduzieren und das Programm wird eine viel bessere Leistung haben.

Übrigens ist der aktuelle Code gridComplete anti-Muster, weil der Aufruf von setRowData in der Schleife die schlechteste Möglichkeit ist, benutzerdefinierten Inhalt in der Spalte zu erstellen. Ändern von ein Element auf der Seite folgen Web-Browser reflow von alle vorhandenen Element auf der Seite. Sie sollten gridComplete mindestens benutzerdefinierten Formatierer in den Spalten AssignUser, CourseDetails und ClassSchedule (in der gleichen Weise wie Sie bereits in ClassLang.Title Spalte) ersetzen. Es wird die Leistung im Raster mehrfach verbessern. Sie sollten in allen Ihren jqGrids gridview: true -Option hinzufügen (free jqGrid standardmäßig gridview: true). Weitere Informationen finden Sie unter the old answer.