jqGrid 免费和 ace 管理模板集成
jqGrid free and ace admin template integration
我正在尝试使用各种管理模板和 运行 到一个支持 jqGrid 的旧 Bootstrap 3 模板。虽然演示运行良好，但它使用商业版本而不是免费的 jqGrid。
在link到这里的demo的源代码库(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>')
使用高级版本 (Guriddo jqGrid JS - v5.0.2 - 2016-01-18)，它就像一个魅力，查看工作高级图像和免费 jqGrid 图像，但是当我切换到免费的 jqGrid 时，按钮文本无法正常阅读操作文本。
这个很棒的管理模板是一个很好的 add-on 来释放 jQgrid 来完成我的副项目。不确定在哪里可以买到它，因为它不再可以购买 Ace Admin Template Info。
已更新
我在 header 上还有一个小的显示问题，下面是屏幕截图
我使用了你的一个演示代码，所以你可以重现它。
<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后移动代码。垂直线仍然被切割。
更多更新
经过调查和错误试验，我发现了问题，但它掩盖了另一个问题，我不再有 header 问题，但按钮显示不佳。无论如何要覆盖 css 以使它们看起来像不使用该行的那个：guistyle:bootstrap，似乎 jqueryUI 与 ace css.
有一些冲突
通过添加：guiStyle: "bootstrap" 修复 header，操作按钮看起来不太好。蓝色 header 也与按钮颜色
一起消失了
删除 guiStyle："bootstrap" 中断 header，蓝色 header，操作按钮看起来不错
我尝试用 jsfiddle 重现，但还没有成功。
我查看了 Ace Admin 模板。可以看出它是从不支持 Font Awesome 和 Bootstrap 的旧 jqGrid 创建的。免费的 jqGrid 支持两者（参见 here and here). One more wiki article 描述了如何使用其他 Font Awesome 图标来创建自己的图标集。例如，可以定义
$.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"
}
}
);
使用其他一些图标作为默认图标（参见 here）。之后可以使用 iconSet: "aceFontAwesome" 选项而不是通常使用的 iconSet: "fontAwesome"。
Ace Admin 模板的所有其他 CSS 设置只是标准 CSS 的自定义。我个人认为 Ace Admin CSS 非常好，但需要花一些时间才能使免费的 jqGrid 看起来与 Ace Admin 完全一样。不需要 jqGrid 知识。使用 Chrome 的开发人员工具来检查 http://ace.jeka.by/jqgrid.html and to implement the same (or close) settings on free jqGrid. I created the demo http://jsfiddle.net/OlegKi/jj0qbhbt/ 上使用的 CSS 就足够了，它展示了如何做到这一点。只需扩展我在演示中包含的 CSS 设置。
我正在尝试使用各种管理模板和 运行 到一个支持 jqGrid 的旧 Bootstrap 3 模板。虽然演示运行良好，但它使用商业版本而不是免费的 jqGrid。
在link到这里的demo的源代码库(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>')
使用高级版本 (Guriddo jqGrid JS - v5.0.2 - 2016-01-18)，它就像一个魅力，查看工作高级图像和免费 jqGrid 图像，但是当我切换到免费的 jqGrid 时，按钮文本无法正常阅读操作文本。
这个很棒的管理模板是一个很好的 add-on 来释放 jQgrid 来完成我的副项目。不确定在哪里可以买到它，因为它不再可以购买 Ace Admin Template Info。
已更新
我在 header 上还有一个小的显示问题，下面是屏幕截图
我使用了你的一个演示代码，所以你可以重现它。
<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后移动代码。垂直线仍然被切割。
更多更新
经过调查和错误试验，我发现了问题，但它掩盖了另一个问题，我不再有 header 问题，但按钮显示不佳。无论如何要覆盖 css 以使它们看起来像不使用该行的那个：guistyle:bootstrap，似乎 jqueryUI 与 ace css.
有一些冲突通过添加：guiStyle: "bootstrap" 修复 header，操作按钮看起来不太好。蓝色 header 也与按钮颜色
一起消失了删除 guiStyle："bootstrap" 中断 header，蓝色 header，操作按钮看起来不错
我尝试用 jsfiddle 重现，但还没有成功。
我查看了 Ace Admin 模板。可以看出它是从不支持 Font Awesome 和 Bootstrap 的旧 jqGrid 创建的。免费的 jqGrid 支持两者（参见 here and here). One more wiki article 描述了如何使用其他 Font Awesome 图标来创建自己的图标集。例如，可以定义
$.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"
}
}
);
使用其他一些图标作为默认图标（参见 here）。之后可以使用 iconSet: "aceFontAwesome" 选项而不是通常使用的 iconSet: "fontAwesome"。
Ace Admin 模板的所有其他 CSS 设置只是标准 CSS 的自定义。我个人认为 Ace Admin CSS 非常好，但需要花一些时间才能使免费的 jqGrid 看起来与 Ace Admin 完全一样。不需要 jqGrid 知识。使用 Chrome 的开发人员工具来检查 http://ace.jeka.by/jqgrid.html and to implement the same (or close) settings on free jqGrid. I created the demo http://jsfiddle.net/OlegKi/jj0qbhbt/ 上使用的 CSS 就足够了，它展示了如何做到这一点。只需扩展我在演示中包含的 CSS 设置。