0
Как выровнять столбец jqGrid в соответствии с содержимым, загруженным в столбец. Я знаю, что jqGrid настраивает ширину столбца перед загрузкой данных в него, тогда как я могу настроить ширину в соответствии с содержанием. Кроме того, содержимое не должно сокращаться, идет за столбец.Выровнять столбцы 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
},
{
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());
})
В некоторых столбцах я также использовал значки, но столба выглядит больше по сравнению с столбцом. Ниже приведен скриншот 
Любая помощь по этому признанию!
JSON ответ
[{
"Class": {
"ClassID": 2,
"CourseID": 2,
"ClassStatusID": 1,
"ClassTypeID": 1,
"InstructorID": null,
"AlternateInstructorID": null,
"ContactPersonID": null,
"CurrencyID": 2,
"CertificateID": null,
"AllowSelfEnrollment": true,
"ClassSizeMin": 150,
"ClassSizeMax": 170,
"Username": "test",
"ClassUrl": "www.google.com",
"StartDate": "2016-10-23T00:00:00",
"EndDate": "2016-10-23T00:00:00",
"DiscountedCoursePrice": 180.00,
"CoursePrice": 210.00,
"Password": null,
"WhoCreated": 3,
"WhenCreated": "2017-01-02T15:30:45.623",
"WhoModified": 3,
"WhenModified": "2017-01-03T01:00:45.623",
"PasswordString": null,
"CoursePriceString": null,
"DiscountedCoursePriceString": null
},
"ClassLang": {
"ClassLangID": 5,
"ClassID": 2,
"LanguageTypeID": 3,
"Title": "de-DE_Introduction to Piano",
"Description": "de-DE_Introduction to Piano",
"WhoCreated": null,
"WhenCreated": null,
"WhoModified": null,
"WhenModified": null
},
"UserName": "User admin"
}, {
"Class": {
"ClassID": 3,
"CourseID": 3,
"ClassStatusID": 2,
"ClassTypeID": 1,
"InstructorID": null,
"AlternateInstructorID": null,
"ContactPersonID": null,
"CurrencyID": 2,
"CertificateID": null,
"AllowSelfEnrollment": true,
"ClassSizeMin": 140,
"ClassSizeMax": 180,
"Username": "test",
"ClassUrl": "www.google.com",
"StartDate": "2016-10-23T00:00:00",
"EndDate": "2016-10-23T00:00:00",
"DiscountedCoursePrice": 180.00,
"CoursePrice": 210.00,
"Password": null,
"WhoCreated": 3,
"WhenCreated": "2017-01-02T15:30:45.623",
"WhoModified": 3,
"WhenModified": "2017-01-03T01:00:45.623",
"PasswordString": null,
"CoursePriceString": null,
"DiscountedCoursePriceString": null
},
"ClassLang": {
"ClassLangID": 8,
"ClassID": 3,
"LanguageTypeID": 3,
"Title": "de-DE_Class Learn classical music",
"Description": "de-DE_Class Learn classical music",
"WhoCreated": null,
"WhenCreated": null,
"WhoModified": null,
"WhenModified": null
},
"UserName": "User admin"
}, {
"Class": {
"ClassID": 4,
"CourseID": 4,
"ClassStatusID": 2,
"ClassTypeID": 1,
"InstructorID": null,
"AlternateInstructorID": null,
"ContactPersonID": null,
"CurrencyID": 2,
"CertificateID": null,
"AllowSelfEnrollment": true,
"ClassSizeMin": 15,
"ClassSizeMax": 17,
"Username": "test",
"ClassUrl": "www.google.com",
"StartDate": "2016-10-23T00:00:00",
"EndDate": "2016-10-23T00:00:00",
"DiscountedCoursePrice": 180.00,
"CoursePrice": 210.00,
"Password": null,
"WhoCreated": 3,
"WhenCreated": "2017-01-02T15:30:45.623",
"WhoModified": 3,
"WhenModified": "2017-01-03T01:00:45.623",
"PasswordString": null,
"CoursePriceString": null,
"DiscountedCoursePriceString": null
},
"ClassLang": {
"ClassLangID": 11,
"ClassID": 4,
"LanguageTypeID": 3,
"Title": "de-DE_Playing Electric blue guitar",
"Description": "de-DE_Playing Electric blue guitar",
"WhoCreated": null,
"WhenCreated": null,
"WhoModified": null,
"WhenModified": null
},
"UserName": "User admin"
}]
Пожалуйста, включите в каждый ваш вопрос версию jqGrid, которую вы используете, и вилку. Решение для [free jqGrid] (https://github.com/free-jqgrid/jqGrid) fork (начиная с первой версии 4.8) прост, но решение для других версий/вилок может быть очень сложным. Кроме того, вы используете имена, содержащие точки (например, «name:« Class.ClassID »). Это может быть источником других проблем, особенно в старых версиях jqGrid. Вместо этого лучше использовать 'jsonmap'. Использование 'setRowData' в цикле внутри' gridComplete' делает сетку ** намного медленнее **. Хорошо заменить его. – Oleg
Я использую версию 4.5.3. Я знаю, что версия устарела, но мы находимся на стадии выпуска, поэтому сразу не можем изменить версию. Поэтому будет полезно, если вы предоставите решение с предоставленной версией. – Rohit