使用jqGrid排序/过滤问题
我在使用jqGrid 4.5.3。 我升级到免费jqGrid版本4.13.6的版本 。 升级后，我面临以下问题
- 排序不适用于所有列
- 我想根据我设置
autoResizable: true的内容显示列大小autoResizable: true和autoresizeOnLoad: true，仍然没有按照内容设置列宽
下面是我在document.Ready函数上编写的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, 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, });
我还添加了以下function，以根据可用选项卡扩展网格
$(window).on('resize.jqGrid', function () { $("#jqgrid").jqGrid('setGridWidth', $("#content").width()); })
HTML标记
@{ await Html.RenderPartialAsync("~/ViewsBackend/Class/_ClassTab.cshtml"); }
编辑1： – 自定义格式化程序
function addLink(cellvalue, options, rowObject) { return "" + rowObject.ClassLang.Title + ""; } function AddAssignUserLink(cellvalue, options, rowObject){ return "
从自定义格式化程序调用这些方法
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的屏幕截图
对此有任何帮助表示赞赏！
您可以将代码修改为以下内容
$(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更多详细信息。 同样的问题解释了autoResizing新resetWidthOrg: true属性。
我建议你考虑使用formatter: "actions"自定义按钮formatter: "actions" （有关详细信息，请参阅wiki文章 ）
{ 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"选项：