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标记

<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。同一问题解释autoResizing的新resetWidthOrg: true财产。

我建议你考虑使用的自定义按钮的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/