jqgrid 在表格底部添加自定义按钮

往往我们需要在jqgrid底部的分页行中添加一些自定义按钮，效果如下：

上图中，三个按钮均是自定义添加上的。

1、要新增自定义按钮在表格底部，仍离不开分页div，需要给jqgrid绑定分页方法

2、由于此功能中，我们不使用jqgrid默认按钮，故需要将默认按钮设置为不启用false

以上截图完整代码，参考如下：

//根据传入的筛选信息加载grid
function LoadFilterGrid(newFilterArr) {
    $.jgrid.gridUnload("filterGrid");//先卸载

    $("#filterGrid").jqGrid({
        altRows: true,//隔行换色
        data: newFilterArr,
        editurl: 'clientArray',
        styleUI: 'Bootstrap',
        //responsive: true,
        datatype: "local",
        page: 1,
        colModel: [
            { label: 'ID', name: 'Id', width: 20, hidden: true },//id值隐藏
            { label: 'TbReportId', name: 'TbReportId', width: 20, hidden: true },//TbReportId值隐藏
            { label: '字段编码', name: 'FieldCode', width: 150, editable: false },
             {//参数名作为主键
                 label: '参数名',
                 name: 'FieldParam',
                 width: 150,
                 key: true,
                 editable: true,
                 edittype: "text"
                 //editrules: { required: true }
             },
              {
                  label: '显示名称',
                  name: 'FieldName',
                  width: 150,
                  editable: true,
                  edittype: "text"
                  //editrules: { required: true }
              },
              {
                  label: '是否筛选',
                  name: 'IsSearch',
                  width: 80,
                  editable: true,
                  edittype: "select",
                  editoptions: {
                      value: "false:否;true:是"
                  }//默认为否
              },
              {
                  label: '字段类型',
                  name: 'DataType',
                  width: 90,
                  editable: true,
                  edittype: "select",
                  editoptions: {
                      value: "Decimal:数值型;String:字符串;Int32:整型;Int64:长整型;Int16:短整型;DateTime:时间"
                  }
              },

               {
                   label: '正则表达式',
                   name: 'RegularId',
                   width: 120,
                   editable: true,
                   edittype: "select",
                   editoptions: {
                       value: GetRegulars
                   }
               },
                {
                    label: '默认值',
                    name: 'DefaultValue',
                    width: 80,
                    editable: true,
                    edittype: "text"
                },
                 {
                     label: '筛选类型',
                     name: 'FilterType',
                     width: 140,
                     editable: true,
                     edittype: "select",
                     editoptions: {
                         value: "1:文本框;2:复选下拉框;3:单选下拉框;4:日期/年月日;5:日期/年月"
                     }
                 },
                  {
                      label: '下拉筛选sql',
                      name: 'FilterSql',
                      width: 130,
                      editable: true,
                      edittype: "textarea"
                  },
                  {
                      label: '筛选排序',
                      name: 'OrderNum',
                      width: 80,
                      editable: true,
                      edittype: "text"
                  },
                  {
                      label: '快捷筛选',
                      name: 'IsQuick',
                      width: 80,
                      editable: true,
                      edittype: "select",
                      editoptions: {
                          value: "false:否;true:是"
                      }//默认非快捷筛选
                  },
                  {
                      label: '内置字段？',
                      name: 'IsCustom',
                      width: 100,
                      editable: false
                  },
                  {
                      label: '筛选说明',
                      name: 'Remark',
                      width: 120,
                      editable: true,
                      edittype: "textarea",
                      //edittype: "text",
                      hidden: true,//隐藏字段
                      editrules: { edithidden: true }//让隐藏字段可编辑,编辑时显示
                  }
        ],
        loadonce: false,
        viewrecords: true,
        shrinkToFit: false,
        autoScroll: false,
        height: window.innerHeight * 0.6,
        width: $(".modal-body").width(),
       // autowidth: true,
        rowNum: newFilterArr.length + 3,//默认比原行数+3
        pager: "#filterGridPager"
    });

    $('#filterGrid').navGrid('#filterGridPager',
               { edit: false, add: false, del: false, search: false, refresh: false, view: false, position: "left", cloneToTop: false });

    // 添加一个‘添加’按钮
    $('#filterGrid').navButtonAdd('#filterGridPager',
        {
            buttonicon: "glyphicon glyphicon-plus",
            title: "添加",
            caption: "添加",
            position: "last",
            onClickButton: addRow
        });

    //添加一个‘删除’按钮
    $('#filterGrid').navButtonAdd('#filterGridPager',
         {
             buttonicon: "glyphicon glyphicon-trash",
             title: "删除",
             caption: "删除",
             position: "last",
             onClickButton: delRow
         });

    //添加一个‘刷新’按钮
    $('#filterGrid').navButtonAdd('#filterGridPager',
         {
             buttonicon: "glyphicon glyphicon-refresh",
             title: "刷新",
             caption: "刷新",
             position: "last",
             onClickButton: refreshFiterGrid
         });

    //加载完毕后,打开所有行的编辑
    startEdit($("#filterGrid"));
}

说明：

1）filterGrid为jqgrid所在的table，filterGridPager为jqgrid分页插件所在的div

2）给filterGrid绑定分页行filterGridPager，将jqgrid默认按钮禁用(黄色区域)。

$('#filterGrid').navGrid('#filterGridPager',{ edit: false, add: false, del: false, search: false, refresh: false, view: false, position: "left", cloneToTop: false })

若不添加以上行代码，将不会显示自定义的按钮，看截图：

3）通过navButtonAdd添加自定义按钮方法

    // 添加一个‘添加’按钮
    $('#filterGrid').navButtonAdd('#filterGridPager',
        {
            buttonicon: "glyphicon glyphicon-plus",
            title: "添加",
            caption: "添加",
            position: "last",
            onClickButton: addRow
        });

4）小提示：由于当前功能中，会多次进行jqgrid表格编辑操作(添加、删除、编辑行)，会多次绑定表格数据。为确保数据成功刷新与展示在每次绑定jqgrid时先卸载表格

$.jgrid.gridUnload("filterGrid");//先卸载

 5）给按钮设置样式。buttonicon: "glyphicon glyphicon-plus"