Я пытаюсь поиграться с различными шаблонами администратора и запустил старый Bootstrap 3 с поддержкой jqGrid.Хотя демоверсия работает отлично, но она использует коммерческую версию, а не бесплатную jqGrid.
В ссылке на репозиторий исходного кода демо здесь ( Ace Admin Template ), основнойфайл называется jqgrid.html, если я использую самую последнюю бесплатную jqGrid, как показано ниже, то атрибуты изображений кнопок больше не работают.См. Прикрепленные изображения.
Тесты с коммерческим jqGrid:
Тесты с бесплатным jqGrid
Я заменяю следующие строки
<script src="assets/js/jquery.jqGrid.min.js"></script>
на эти
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.min.css ">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.min.js"></script>
Так что мой вопрос в том, какой новый код я должен заменить, чтобы исправить это, поскольку приведенный ниже код вызывается в beforeShowForm ?
//update buttons classes
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')
В версии Premium( Guriddo jqGrid JS - v5.0.2 - 2016-01-18 ), он работает как шарм, см. Рабочие изображения премиум-класса и бесплатные изображения jqGrid, но когда я переключился на бесплатную jqGrid, текст кнопок не отображаетсяусердно работаю над чтением текстов действий.
Этот отличный админ-шаблон является хорошим дополнением к бесплатному jQgrid для завершения моего побочного проекта.Не уверен, где его купить, так как он больше не доступен для покупки. Ace Admin Информация о шаблоне .
Обновлено
У меня все еще есть одна небольшая проблема с отображением в шапке нижеэто снимок экрана
Я использовал один из ваших демонстрационных кодов, чтобы вы могли воспроизвести его.
<script type="text/javascript">
jQuery(function($) {
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
var parent_column = $(grid_selector).closest('[class*="col-"]');
//resize to fit page size
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
})
//resize on sidebar collapse/expand
$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
setTimeout(function() {
$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
}, 20);
}
})
//if your grid is inside another element, for example a tab pane, you should use its parent's width:
/**
$(window).on('resize.jqGrid', function () {
var parent_width = $(grid_selector).closest('.tab-pane').width();
$(grid_selector).jqGrid( 'setGridWidth', parent_width );
})
//and also set width when tab pane becomes visible
$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if($(e.target).attr('href') == '#mygrid') {
var parent_width = $(grid_selector).closest('.tab-pane').width();
$(grid_selector).jqGrid( 'setGridWidth', parent_width );
}
})
*/
$.jgrid.icons.aceFontAwesome = $.extend(true, {},
$.jgrid.icons.fontAwesome,
{
nav: {
add: "fa-plus-circle",
view: "fa-search-plus",
},
actions: {
save: "fa-check",
cancel: "fa-times"
},
pager: {
first: "fa-angle-double-left",
prev: "fa-angle-left",
next: "fa-angle-right",
last: "fa-angle-double-right"
},
form: {
prev: "fa-angle-left",
next: "fa-angle-right",
save: "fa-check",
cancel: "fa-times"
}
}
);
$.jgrid.icons.aceFontAwesome = $.extend(true, {},
$.jgrid.icons.fontAwesome,
{
nav: {
add: "fa-plus-circle",
view: "fa-search-plus",
},
actions: {
save: "fa-check",
cancel: "fa-times"
},
pager: {
first: "fa-angle-double-left",
prev: "fa-angle-left",
next: "fa-angle-right",
last: "fa-angle-double-right"
},
form: {
prev: "fa-angle-left",
next: "fa-angle-right",
save: "fa-check",
cancel: "fa-times"
}
}
);
var data = [
{code:"A", name:"Project A",
jan2017:1, feb2017:0, mar2017:0, apr2017:0,
may2017:0, jun2017:0, jul2017:0, aug2017:0,
sep2017:0, oct2017:0, nov2017:0, dec2017:1},
{code:"A", name:"Project A",
jan2017:1, feb2017:1, mar2017:0, apr2017:0,
may2017:1, jun2017:0, jul2017:0, aug2017:0,
sep2017:0, oct2017:1, nov2017:0, dec2017:0}
],
intTemplate = {
width: 20, template: "integer",
align: "center", editable: true
};
jQuery(grid_selector).jqGrid({
colModel: [
{ name: "code", label: "Code", width: 50, align: "center" },
{ name: "name", label: "Name", width: 70 },
{ name: "jan2017", label: "Jan", template: intTemplate },
{ name: "feb2017", label: "Feb", template: intTemplate },
{ name: "mar2017", label: "Mar", template: intTemplate },
{ name: "apr2017", label: "Apr", template: intTemplate },
{ name: "may2017", label: "May", template: intTemplate },
{ name: "jun2017", label: "Jun", template: intTemplate },
{ name: "jul2017", label: "Jul", template: intTemplate },
{ name: "aug2017", label: "Aug", template: intTemplate },
{ name: "sep2017", label: "Sep", template: intTemplate },
{ name: "oct2017", label: "Oct", template: intTemplate },
{ name: "nov2017", label: "Nov", template: intTemplate },
{ name: "dec2017", label: "Dec", template: intTemplate },
{ name: "jan2018", label: "Jan", template: intTemplate },
{ name: "feb2018", label: "Feb", template: intTemplate },
{ name: "mar2018", label: "Mar", template: intTemplate },
{ name: "apr2018", label: "Apr", template: intTemplate },
{ name: "may2018", label: "May", template: intTemplate },
{ name: "jun2018", label: "Jun", template: intTemplate },
{ name: "jul2018", label: "Jul", template: intTemplate },
{ name: "aug2018", label: "Aug", template: intTemplate },
{ name: "sep2018", label: "Sep", template: intTemplate },
{ name: "oct2018", label: "Oct", template: intTemplate },
{ name: "nov2018", label: "Nov", template: intTemplate },
{ name: "dec2018", label: "Dec", template: intTemplate }
],
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
viewrecords: true,
data: data,
iconSet: "fontAwesome",
rownumbers: true,
sortname: "invdate",
sortorder: "desc",
pager: true,
iconSet: "aceFontAwesome", //"fontAwesome",
grouping: true,
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
groupingView: {
groupField: ["name"],
groupText: ["<b>{0}</b>"]
},
loadComplete : function() {
var table = this;
var parent_column = $(grid_selector).closest('[class*="col-"]');
setTimeout(function(){
$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
}, 0);
},
sortname : 'invid',
inlineEditing: {
keys: true
},
navOptions: {
add: false,
edit: false,
del: false,
search: false
},
inlineNavOptions: {
add: true,
edit: true
},
caption: "Test"
}).jqGrid("navGrid")
.jqGrid("inlineNav")
.jqGrid("rotateColumnHeaders",
["jan2017", "feb2017", "mar2017", "apr2017", "may2017", "jun2017",
"jul2017", "aug2017", "sep2017", "oct2017", "nov2017", "dec2017",
"jan2018", "feb2018", "mar2018", "apr2018", "may2018", "jun2018",
"jul2018", "aug2018", "sep2018", "oct2018", "nov2018", "dec2018"])
.jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{ startColumnName: 'code', numberOfColumns: 2, titleText: '<i>Project</i>' },
{ startColumnName: 'jan2017', numberOfColumns: 12, titleText: '2017' },
{ startColumnName: 'jan2018', numberOfColumns: 12, titleText: '2018' }
]
});
});
Я заменил вышеуказанный код в jqgrid.html,Я не знаю, что на самом деле вызывает это.Может ли это быть rotateColumnHeaders, который нарушает его?
Рис показывает движущийся код после setgroupheader.Вертикальные линии по-прежнему обрезаются.
Дополнительные обновления
После исследования и пробной ошибки я обнаружил проблему, но она маскирует другую, ябольше нет проблем с заголовками, но кнопки не отображаются красиво.Есть ли в любом случае перезаписать CSS, чтобы они выглядели так же, как без строки: guistyle: bootstrap, похоже, что jqueryUI как-то конфликтует с ace css.
Исправьте заголовок, добавив: guiStyle: "bootstrap", кнопки действий выглядят не очень хорошо.Заголовок синего цвета также пропал вместе с цветами кнопок
Удаление guiStyle: заголовок «bootstrap» разрывает, заголовок синего цвета, кнопка действия выглядит красиво
Я пытался воспроизвести с помощью jsfiddle, но пока не повезло.