根据内容对齐jqGrid列
如何根据列中加载的内容对齐jqGrid列。我知道jqGrid在将数据加载到其中之前调整列宽，然后我如何根据内容调整宽度。此外，内容不应该被削减，落后于专栏。
transitionend在某些列中，我也使用了图标，但与列相比，列看起来更大。
以下是截图
对此有任何帮助表示赞赏！
JSON响应
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());
})
1 个答案:
答案 0 :(得分：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已经死了很长一段时间。它不支持原因。而不是花时间从尸体创建一个弗兰肯斯坦（或僵尸），你应该只使用jqGrid的版本，它是活着的。作为额外的好处，您可以多次减少程序代码，程序将有更好的性能。
顺便说一下，gridComplete的当前代码是反模式，因为在循环中调用setRowData是在列中创建自定义内容的最糟糕方式。更改页面上的一个元素，请按照页面上所有现有元素的网络浏览器reflow进行操作。您应该将gridComplete替换为AssignUser，CourseDetails和ClassSchedule列中的至少自定义格式化程序（与ClassLang.Title列中已有的相同） 。它将多次提高网格性能。您应该在所有jqGrids中添加gridview: true选项（默认情况下为free {jqGrid set gridview: true）。有关详细信息，请参阅the old answer。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？