проблема сортировки/фильтрации с помощью jqGrid

Question

Я использовал jqGrid 4.5.3. версия, которую я обновил до бесплатно jqGrid версия 4.13.6. После обновления я столкнулся следующие вопросы

1. Сортировка не работает для всех столбцов
2. Я хочу, чтобы отобразить размер столбца в соответствии с содержанием, для которого я задал autoResizable: true и autoresizeOnLoad: true, до сих пор ширины колонки не установлен в качестве за содержание

Ниже мой jqGrid код написанный на document.Ready функции

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, 
        formatter:AddCourseDetailsLink 
       }, 
       { 
        name: 'ClassSchedule', 
        index: 'ClassSchedule', 
        sortable: false, 
        align: 'center', 
        title: false, 
        formatter:AddViewClassScheduleLink 
       }, 
       { 
        name: 'AssignUser', 
        index: 'AssignUser', 
        sortable: false, 
        align: 'center', 
        title: false, 
        formatter: AddAssignUserLink 
       }, 
       { 
        name: 'UserName', 
        index: 'UserName', 
        align: 'center', 
        sortable: true 
       }, 
       { 
        name: 'Class.WhenCreated', 
        index: 'Class.WhenCreated', 
        align: 'center', 
        formatter:'date', 
        sortable: true 
       }], 

      rowNum: 10, 
      rowList: [10, 20, 30], 
      pager: '#pjqgrid', 
      sortname: "Title", 
      sortorder: "desc", 
      toolbarfilter: true, 
      viewrecords: true, 
      multiSort: true, 
      sortable: true, 
      loadonce: true, 
      ignoreCase: true, 
      gridComplete: function() { 

       $("#progbar").css('width', '100%') 
       $("#progess").hide(); 
       $("#grid").css("visibility", 'visible'); 

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

     }); 

Я также добавил ниже функцию, чтобы расширить сетку в соответствии с имеющейся вкладки

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

HTML Markup

<div class="well well-sm well-light" id="content"> 
    <div id='divResult'> 
     @{ 
      await Html.RenderPartialAsync("~/ViewsBackend/Class/_ClassTab.cshtml"); 
     } 
    </div> 

    <section id="widget-grid" class=""> 
     <div class="row"> 
      <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
       <div id="grid"> 
        <table id="jqgrid"></table> 
        <div id="pjqgrid"></div> 
        <br> 
       </div> 
       <br> 
      </article> 
     </div> 
    </section> 
</div> 

Редактировать 1: - Пользовательские форматтеры

function addLink(cellvalue, options, rowObject) { 

      return "<a href='#' style='height:25px;width:120px;' type='button' onclick=CallActionMethod(" + "'" + rowObject.Class.ClassID + "'" + ")>" + rowObject.ClassLang.Title + "</a>"; 

    } 

    function AddAssignUserLink(cellvalue, options, rowObject){ 

      return "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["Class_AssignUser"]' onclick='AssignUser(" + rowObject.Class.ClassID + ")'\"><i class='fa fa-users fa-lg' aria-hidden='true'></i></a>"; 
    } 

    function AddCourseDetailsLink(cellvalue, options, rowObject){ 

      return "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["ViewCourseDetails"]' onclick='CourseDetails(" + rowObject.Class.CourseID + ")'\"><i class='fa fa-file fa-lg' aria-hidden='true'></i></a>"; 

    } 

    function AddViewClassScheduleLink(cellvalue, options, rowObject){ 

      return "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["ViewClassSchedule"]' onclick='ViewClassSchedule(" + rowObject.Class.ClassID + ")'\"><i class='fa fa-calendar fa-lg' aria-hidden='true'></i></a>"; 

    } 

Эти методы вызываются из пользовательских форматтеров

function CallActionMethod(cellvalue) { 
     $.ajax({ 

      type: "POST", 
      url: '@Url.Action("SetClassDetailsClassID", "Class")', 
      data: { cellvalue: cellvalue }, 
      success: function (data) { 
       document.location.href = "@Url.Action("ClassDetails", "Class")"; 
      } 
     }); 
    } 

    function ViewClassSchedule(ClassID){ 

     $.ajax({ 

      type: "POST", 
      url: '@Url.Action("SetClassDetailsClassID", "Class")', 
      data: { cellvalue: ClassID }, 
      success: function (data) { 
       document.location.href = "@Url.Action("ClassSchedule", "Class")"; 
      } 
     }); 
    } 

    function AssignUser(ClassID) { 

     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("AssignUser", "Class")', 
      data: { classid: ClassID }, 
      success: function (data) { 

       jQuery(".modal-content").html(''); 
       jQuery(".modal-content").html(data); 
       jQuery("#AssignUserModal").modal('show'); 

      } 
     }); 
    } 

    function CourseDetails(CourseID) 
    { 

     $.ajax({ 

      type: "POST", 
      url: '@Url.Action("setcourseid", "Course")', 
      data: { cellvalue: CourseID }, 
      success: function (data) { 

       document.location.href = "@Url.Action("CourseDetails", "Course")"; 
      } 
     }); 

    } 

Скриншот jqGrid с обновленной версией

Любая помощь на это оценили!

Answer 1

Вы можете исправить свой код следующего

$(window).on("resize", maximizeGrid); 
$grid.on("jqGridAfterLoadComplete", function() { 
    var colModel = $(this).jqGrid("getGridParam", "colModel"), i, cm; 

    // reset widthOrg to the new values after autoResizeAllColumns 
    for (i = 0; i < colModel.length; i++) { 
     cm = colModel[i]; 
     cm.widthOrg = cm.width; 
    } 
    maximizeGrid(); 
}); 

$grid.jqGrid({ 
    datatype: "json", 
    url: "/echo/json/", 
    mtype: "POST", 
    postData: { 
     json: JSON.stringify(serverResponse) 
    }, 
    colModel: [ 
     { 
      name: 'ClassID', 
      key: true, 
      jsonmap: 'Class.ClassID', 
      hidden: true 
     }, 
     { 
      name: 'Title', 
      formatter: addLink, 
      jsonmap: 'ClassLang.Title' 
     }, 
     { 
      name: 'CourseDetails', 
      sortable: false, 
      align: 'center', 
      formatter:AddCourseDetailsLink, 
      title: false 
     }, 
     { 
      name: 'ClassSchedule', 
      sortable: false, 
      align: 'center', 
      formatter:AddViewClassScheduleLink, 
      title: false 
     }, 
     { 
      name: 'AssignUser', 
      sortable: false, 
      align: 'center', 
      formatter: AddAssignUserLink, 
      title: false 
     }, 
     { 
      name: 'UserName', 
      align: 'center' 
     }, 
     { 
      name: 'WhenCreated', 
      jsonmap: 'Class.WhenCreated', 
      align: 'center', 
      formatter:'date' 
     } 
    ], 
    iconSet: "fontAwesome", 
    rowNum: 10, 
    rowList: [10, 20, 30], 
    pager: true, 
    sortname: "Title", 
    sortorder: "desc", 
    viewrecords: true, 
    multiSort: true, 
    sortable: true, 
    loadonce: true, 
    additionalProperties: ['Class', 'ClassLang'], 
    autoencode: true, 
    cmTemplate: { 
     autoResizable: true 
    }, 
    autoresizeOnLoad: true, 
    autowidth: true, 
    autoResizing: { 
     //resetWidthOrg: true, 
     compact: true 
    } 
}); 

Смотреть демо https://jsfiddle.net/OlegKi/b15pmdcg/4/. Вы можете прочитать более подробную информацию о widthOrg в the issue. Эта же проблема объясняет новое свойство resetWidthOrg: trueautoResizing.

Я бы порекомендовал вам рассмотреть возможность использования пользовательских кнопок из formatter: "actions" (см the wiki article подробности)

{ 
    name: "act", label: "Details", template: "actions", width: 70, 
    formatoptions: { editbutton: false, delbutton: false } 
} 

и возможность

actionsNavOptions: { 
    courseDetailsicon: "fa-file", 
    courseDetailstitle: "show course details", 
    classScheduleicon: "fa-calendar", 
    classScheduletitle: "class schedule", 
    assignUsericon: "fa-users", 
    assignUsertitle: "Assign user to class", 
    custom: [ 
     { action: "courseDetails", position: "first", 
      onClick: function (options) { 
       alert("Course Details, rowid=" + options.rowid); 
      } }, 
     { action: "classSchedule", position: "first", 
      onClick: function (options) { 
       alert("Class Schedule, rowid=" + options.rowid); 
      } }, 
     { action: "assignUser", 
      onClick: function (options) { 
       alert("Assign User, rowid=" + options.rowid); 
      } } 
    ] 
} 

можно увидеть результаты на другом демо https://jsfiddle.net/OlegKi/rmsz529L/3/

Кстати, вы можете использовать те же демоверсии с Boostrap CSS вместо jQuery UI CSS.Вам нужно просто добавить guiStyle: "bootstrap" вариант jqGrid:

https://jsfiddle.net/OlegKi/b15pmdcg/8/

https://jsfiddle.net/OlegKi/rmsz529L/2/