내용에 따라 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

당신은 내가 몇 년 동안 here을 발표 autoWidthColumns 방법을 사용하려고 할 수 있습니다. 나는 the old answer과 this one에 설명했다. autoWidthColumns 방법은 특히 큰 그리드의 경우 매우 천천히 작동합니다.

필요한 기능이 포함 된 free jqGrid 4.13.6의 최신 버전 (4.13.6)으로 업그레이드하는 것이 좋습니다. 이것은 the wiki article에 설명되어 있습니다. 무료 jqGrid에서해야 할 일은 모든 열에 autoResizable: true을 배치하는 것입니다.이 너비는 열의 내용에 따라 "자동 크기 조정"을 할 수 있기를 원합니다. autoresizeOnLoad: true 속성을 추가하면 필요한 너비가 나타납니다.

버전 4.5.3은 오래전부터으로 사망했음을 이해하는 것이 중요합니다. 그것은 원인을지지하지 않습니다. 시체에서 Frankenstein (또는 좀비)을 만드는 데 시간을 투자하는 대신, 살아있는 jqGrid 버전을 사용해야합니다. 추가적인 이점으로 여러 번 프로그램의 코드를 줄일 수 있으며 프로그램의 성능이 훨씬 향상됩니다.

그런데 gridComplete의 현재 코드는 반복 패턴에서 setRowData을 호출하는 것이 열에 사용자 지정 콘텐츠를 만드는 최악의 방법이기 때문에 반대 패턴입니다. 중 하나를 변경하면 페이지의 요소가 웹 브라우저 reflow의 에있는 모든 기존 요소에 있습니다. gridComplete을 최소한 AssignUser, CourseDetails 및 ClassSchedule 열 (이미 ClassLang.Title 열과 동일한 방식으로)의 맞춤형 포맷터로 대체해야합니다. 그리드의 성능이 여러 번 향상됩니다. 모든 jqGrids에 gridview: true 옵션을 추가해야합니다 (기본적으로 무료 jqGrid는 gridview: true로 설정 됨). 자세한 내용은 the old answer을 참조하십시오.