Ace模板的jqGrid在导航栏添加(导出、导入)自定义按钮

默认的Ace模板使用jqGrid的Html：

<table id="grid-table"></table>
<div id="grid-pager"></div>

首先是默认的一些按钮：

var table = "#grid-table";
var pager = "#grid-pager";
jQuery(table).jqGrid('navGrid', page,
    {/* 导航栏按钮项 */},
    {}, // 新增按钮选项
    {}, // 编辑按钮选项
    {}, // 删除按钮选项
    //...
);

 我们添加自定义按钮起始也是一样的：

// 添加导出按钮
jQuery(table).jqGrid('navButtonAdd', pager, {
    caption: "", // 按钮的显示文本
    title: "导出", // 鼠标悬停时提示
    buttonicon: "ace-icon fa fa-download", // 按钮图标的CSS类
    onClickButton: function () {
        // 按钮点击事件处理逻辑
        alert("按钮被点击");
    },
    position: "next" // 按钮在导航栏的位置（可选值：first, last, prev, next）
});

// 添加导入按钮
jQuery(table).jqGrid('navButtonAdd', pager, {
    caption: "", // 按钮的显示文本
    title: "导入", // 按钮的名称，显示在鼠标悬停时
    buttonicon: "ace-icon fa fa-cloud-upload", // 按钮图标的CSS类
    onClickButton: function () {
        // 按钮点击事件处理逻辑
        alert("按钮被点击");
    },
    position: "last" // 按钮在导航栏的位置（可选值：first, last, prev, next）
});

恭喜你，成功啦！ 下面是我的截图供参考，最后面两个是刚刚自定义的两个按钮，觉得图标不好看的也可以自己换，把按钮图标的css类换掉就行，对于自带的icon来言，我们就是换掉一个字符串而且，非常方便~

像是：ace-icon fa fa-upload，ace-icon fa fa-arrow-circle-up等等