我正在使用jqGrid 4.5.3。版本我已经升级到免费 jqGrid 版本 4.13.6。升级后我面临以下问题
autoResizable: true and 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 更新版本的屏幕截图
Any help on this appreciated !
您可以将代码修复为以下内容
$(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/ https://jsfiddle.net/OlegKi/b15pmdcg/4/。您可以阅读更多详情 更多详情widthOrg in 问题 https://github.com/free-jqgrid/jqGrid/issues/289。同样的问题解释了新的resetWidthOrg: true的财产autoResizing.
我建议您考虑使用自定义按钮formatter: "actions" (see 维基文章 https://github.com/free-jqgrid/jqGrid/wiki/Enhancement-of-formatter:%22actions%22详情）
{
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/ https://jsfiddle.net/OlegKi/rmsz529L/3/
顺便说一句，您可以使用 Bootstrap CSS 而不是 jQuery UI CSS 来使用相同的演示。您只需要添加guiStyle: "bootstrap"jqGrid的选项：
https://jsfiddle.net/OlegKi/b15pmdcg/8/ https://jsfiddle.net/OlegKi/b15pmdcg/8/
https://jsfiddle.net/OlegKi/rmsz529L/2/ https://jsfiddle.net/OlegKi/rmsz529L/2/