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"