Question

我正在尝试使用各种管理模板，然后运行一个支持jqGrid的旧Bootstrap 3。虽然演示工作得很好，但它使用的是商业版，而不是免费的jqGrid。

在这里演示源代码库的链接（Ace Admin Template）中，主文件是调用jqgrid.html，如果我使用最新的免费jqGrid，如下所示，那么按钮的属性图像不再有效。见附图。

使用商业jqGrid进行测试：

Premium Test

使用免费的jqGrid进行测试

Free Test 1

Free Test 2

我替换以下行

<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，按钮文字不起作用，难以阅读动作文本。

这个出色的管理模板是免费的jQgrid完成我的副项目的一个很好的附加组件。由于无法再购买Ace Admin Template Info，因此无法确定在何处购买。

更新

标题上仍然有一个小显示问题，下面是屏幕截图

Header Display Issue

我使用了您的一个演示代码，因此您可以重现它。

        <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打破它吗？

Pic显示setgroupheader之后的移动代码。垂直线仍然被切断。

Lost grouping header

jqGrid免费和ace管理员模板集成

更新

更多更新

1 个答案: