jqgrid - toppager [工具栏图标]有多行

Question

我使用的是最新的free-jqgrid 4.9.2

我的工具栏（toppager）按钮进入下一行，虽然网格宽度中存在大量空间。请找到附加的屏幕截图。有什么原因吗？

我也尝试了下面的CSS代码，但没有运气;

  /*Toolbar customization*/
    .ui-jqgrid .ui-jqgrid-toppager {    
        width: auto !important;/*1200 px*/
    }

完整的jqGrid脚本 -

＆＃13;

＆＃13;

$(document).ready(
  function() {

    /**
     * User code tab
     */
    var userGrid = $("#userGrid"),
      oldFrom = $.jgrid.from,
      lastSelected;
    var oldFrom = $.jgrid.from;
    var lastSelected;

    $.jgrid.from = function(source, initalQuery) {
      var result = oldFrom.call(this, source, initalQuery),
        old_select = result.select;
      result.select = function(f) {
        lastSelected = old_select.call(this, f);
        return lastSelected;
      };
      return result;
    };

    $("#userGrid").jqGrid({
      //sortable: true,//Columns reordering need to be disabled for frozen column working
      //scroll: 1,//true scrolling rows - paging is not working when we enable scrolling. give fixed height then this will go good.. :)
      url: 'list_user_detail',
      datatype: 'json',
      colNames: [jQuery.i18n.prop('userdetail.table.column.id'),
        jQuery.i18n.prop('userdetail.table.column.username'),
        jQuery.i18n.prop('userdetail.table.column.password'),
        jQuery.i18n.prop('userdetail.table.column.active'),
        jQuery.i18n.prop('userdetail.table.column.firstname'),
        jQuery.i18n.prop('userdetail.table.column.lastname'),
        jQuery.i18n.prop('userdetail.table.column.department'),
        jQuery.i18n.prop('userdetail.table.column.email'),
        jQuery.i18n.prop('userdetail.table.column.dob'),
        jQuery.i18n.prop('userdetail.table.column.country'),
        jQuery.i18n.prop('userdetail.table.column.role'),
        ""
      ],
      colModel: [{
        name: 'id',
        index: 'id',
        width: 80,
        editable: true,
        sortable: true,
        align: 'center',
        sorttype: 'integer',
        searchoptions: {
          sopt: ['eq', 'ne', 'le', 'lt', 'gt', 'ge'] //for filter functionality - specify the search options
        },
        editoptions: {
          readonly: true,
          size: 5
        },
        formoptions: {
          rowpos: 1,
          colpos: 1
        }
      }, {
        name: "username",
        index: "username",
        width: 120,
        align: 'center',
        sortable: true,
        editable: true,
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        frozen: true,
        editoptions: {
          size: 30
        },
        editrules: {
          required: true,
          custom: true,
          custom_func: usernameCheck
        },
        formoptions: {
          label: jQuery.i18n.prop('userdetail.table.form.label.username')
        }
      }, {
        name: "password",
        index: "password",
        width: 100,
        align: 'center',
        sortable: false,
        editable: true,
        hidden: true,
        hidedlg: true, //to remove this column from column chooser as well
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        frozen: true,
        editoptions: {
          size: 30
        },
        //editrules are set as part of form edit validation so we can mark required for all mandatory fields
        editrules: {
          required: true,
          custom: true,
          edithidden: true,
          custom_func: passwordCheck
        },
        formoptions: {
          label: jQuery.i18n.prop('userdetail.table.form.label.password')
        }
      }, {
        name: "active",
        index: "active",
        width: 80,
        sortable: true,
        align: 'center',
        stype: "select", //if stype is enabled then sopt will not work - stype is needed only when search should have select option
        editable: true,
        edittype: "select",
        formatter: "select",
        editoptions: {
          value: ":;1:Yes;0:No" //Default 0
        },
        cellattr: function(rowId, val, rawObject) {
          if (val == 1) {
            return " class='ui-state-useractive'";
          } else if (val == 0) {
            return " class='ui-state-userinactive'";
          }
        },
        formoptions: {
          //rowpos: 3,
          //colpos: 1
        }
      }, {
        name: "firstname",
        index: "firstname",
        width: 120,
        align: 'center',
        sortable: true,
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        editable: true,
        editoptions: {
          size: 30
        },
        editrules: {
          required: false,
          custom: true,
          custom_func: onlyAblhabetCheck
        }
      }, {
        name: "lastname",
        index: "lastname",
        width: 120,
        align: 'center',
        sortable: true,
        editable: true,
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        editoptions: {
          size: 30
        },
        editrules: {
          required: false,
          custom: true,
          custom_func: onlyAblhabetCheck
        }
      }, {
        name: "department",
        index: "department",
        width: 120,
        align: 'center',
        sortable: true,
        editable: true,
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        editoptions: {
          size: 30
        },
        editrules: {
          required: false,
          custom: true,
          custom_func: onlyAblhabetCheck
        }
      }, {
        name: "email",
        index: "email",
        align: 'center',
        width: 220,
        sortable: false,
        editable: true,
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        editoptions: {
          size: 30
        },
        editrules: {
          required: true,
          custom: true,
          custom_func: emailCheck
        },
        formoptions: {
          label: jQuery.i18n.prop('userdetail.table.form.label.email')
        }
      }, {
        name: "birthday",
        index: "birthday",
        width: 120,
        sortable: true,
        align: 'center',
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en'],
          dataInit: function(e) {
            $(e).datepicker({
              dateFormat: 'dd-mm-yy',
              maxDate: new Date()
            });
          }
        }, //for Search/Filter functionality - specify the search options
        editable: true,
        editoptions: {
          size: 10,
          dataInit: function(e) {
            $(e).datepicker({
              dateFormat: 'dd-mm-yy',
              maxDate: new Date()
            });
          }
        },
        formoptions: {
          //rowpos: 3,
          //colpos: 2
        }
      }, {
        name: "country",
        index: "country",
        width: 120,
        align: 'center',
        sortable: true,
        editable: true,
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        editoptions: {
          edittype: 'text',
          size: 30
        },
        editrules: {
          required: false,
          custom: true,
          custom_func: onlyAblhabetCheck
        }
      }, {
        name: "role",
        index: "role",
        width: 100,
        sortable: true,
        align: 'center',
        stype: "select", //if stype is enabled then sopt will not work - stype is needed only when search should have select option
        //searchoptions: {sopt:['cn','eq','ne','bw','bn','nc','ew','en']},//for Search/Filter functionality - specify the search options
        editable: true,
        edittype: "select",
        formatter: "select",
        editoptions: {
          value: ":;ADMIN:Admin;USER:User" //Default User
        },
        formoptions: {
          //rowpos: 3,
          //colpos: 1
        }
      }, {
        name: "oldPassword",
        index: "oldPassword",
        width: 10,
        sortable: false,
        editable: true,
        hidden: true,
        hidedlg: true //to remove this column from column chooser as well
      }],
      pager: "#userPager",
      iconSet: "fontAwesome",
      rowNum: 8,
      rownumbers: false, //Row numbers
      rowList: [8, 12, 20],
      height: 'auto',
      width: 'auto', //Autowidth
      loadonce: true,
      sortable: true,
      sortname: 'No',
      sortorder: 'desc',
      viewrecords: true,
      shrinkToFit: false,
      ignoreCase: true, //Case insensitive search
      gridview: true, //renders data more faster??
      //viewsortcols: true,//easily show what columns are sortable - With this sorting not working.
      caption: jQuery.i18n.prop('userdetail.table.caption'),
      editurl: "edit_user_detail",
      multiselect: false,
      toppager: true, //Toolbar option
      cloneToTop: true, //Toolbar option
      loadComplete: function() {
        this.p.lastSelected = lastSelected; // set this.p.lastSelected - to find out selected data from filter..
      }
    });

    // Navigator tab inside pager grid
    jQuery("#userGrid").jqGrid('navGrid', '#userPager', {
      //General options
      edit: false,
      add: false,
      del: false,
      search: false,
      view: false,
      refresh: false,
      cloneToTop: true //Must for top tool bar - this will close all the pager items in top tool bar.
    }, {
      // edit options
      height: 'auto',
      width: 'auto',
      top: 75,
      left: 350,
      modal: true,
      editCaption: jQuery.i18n.prop('userdetail.table.button.edituser'),
      processData: jQuery.i18n.prop('application.common.message.processing'),
      recreateForm: true,
      bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
      bSubmit: jQuery.i18n.prop('application.common.button.save'),
      reloadAfterSubmit: false,
      closeOnEscape: true,
      //checkOnUpdate:true, //Form Navigation option
      //savekey: [true,13], //Form Navigation option
      //navkeys: [true,38,40], //Form Navigation option
      //checkOnSubmit : true,//Form Navigation option
      closeAfterEdit: true,
      afterSubmit: refreshData // Need to refresh the data in the table to reflect the hashed password back to this table.
    }, {
      //Add options
      height: 'auto',
      width: 'auto',
      top: 75,
      left: 350,
      modal: true,
      addCaption: jQuery.i18n.prop('userdetail.table.button.adduser'),
      processData: jQuery.i18n.prop('application.common.message.processing'),
      recreateForm: true,
      reloadAfterSubmit: false,
      closeAfterAdd: true,
      //checkOnUpdate:true,//Form Navigation option
      //savekey: [true,13], //Form Navigation option
      //navkeys: [true,38,40],//Form Navigation option
      //checkOnSubmit : true,//Form Navigation option
      closeOnEscape: true,
      bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
      bSubmit: jQuery.i18n.prop('application.common.button.save'),
      afterSubmit: refreshData // Need to refresh the data in the table to reflect the primary key added to this table.
    }, {
      // del options
      reloadAfterSubmit: false,
      closeOnEscape: true
    }, {
      //Search options
      multipleSearch: true,
      multipleGroup: true
    }, {
      //View options
      height: 'auto',
      width: 'auto',
      top: 75,
      left: 350,
      viewCaption: jQuery.i18n.prop('userdetail.table.button.viewuser'),
      closeOnEscape: true
    });

    /*Search/Filter toolbar*/
    jQuery("#userGrid").jqGrid('filterToolbar', {
      searchOperators: true,
      searchOnEnter: false,
      jqModal: false,
      multipleSearch: true,
      multipleGroup: true,
      recreateFilter: true,
      closeOnEscape: true,
      overlay: 0,
      stringResult: true
    });

    //Top Toolbar options & Buttons
    //before adding any buttons remove all the items copied/cloned from the bottom pager
    $(".ui-paging-info", userGrid_toppager).remove();
    $("#add_userGrid_top", userGrid_toppager).remove(); //remove add icon from top pager
    $("#edit_userGrid_top", userGrid_toppager).remove(); //remove edit icon from top pager
    $("#del_userGrid_top", userGrid_toppager).remove(); //remove delete icon from top pager
    $("#view_userGrid_top", userGrid_toppager).remove(); //remove view icon from top pager
    $("#search_userGrid_top", userGrid_toppager).remove(); //remove search icon from top pager
    $("#refresh_userGrid_top", userGrid_toppager).remove(); //remove refresh icon from top pager
    $("#userGrid_toppager_center", userGrid_toppager).remove(); //remove center pager details from top pager

    //Toolbar button to add a config
    jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
      caption: jQuery.i18n.prop('userdetail.table.button.adduser'),
      title: jQuery.i18n.prop('userdetail.table.title.add'),
      buttonicon: 'fa-user-plus',
      onClickButton: function() {
        jQuery("#userGrid").jqGrid('editGridRow', "new", {
          //Add options
          height: 'auto',
          width: 'auto',
          top: 75,
          left: 350,
          modal: true,
          addCaption: jQuery.i18n.prop('userdetail.table.button.adduser'),
          processData: jQuery.i18n.prop('application.common.message.processing'),
          recreateForm: true,
          reloadAfterSubmit: false,
          closeOnEscape: true,
          //checkOnUpdate:true,//Form Navigation option
          //savekey: [true,13], //Form Navigation option
          //navkeys: [true,38,40],//Form Navigation option
          //checkOnSubmit : true,//Form Navigation option
          bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
          bSubmit: jQuery.i18n.prop('application.common.button.save'),
          afterSubmit: refreshData, // Need to refresh the data in the table to reflect the primary key added to this table.
          closeAfterAdd: true,
          /*beforeShowForm: function() { //NOT WORKING
                             // "editmodlist"
                             var dlgDiv = $("#editmod" + grid[0].id);
                             var parentDiv = dlgDiv.parent();
                             var dlgWidth = dlgDiv.width();
                             var parentWidth = parentDiv.width();
                             var dlgHeight = dlgDiv.height();
                             var parentHeight = parentDiv.height();
                             // TODO: change parentWidth and parentHeight in case of the grid
                             //       is larger as the browser window
                             dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
                             dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
                          }*/

        });
      }
    });

    //Toolbar button to edit a config
    jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
      caption: jQuery.i18n.prop('userdetail.table.button.edituser'),
      title: jQuery.i18n.prop('userdetail.table.title.edit'),
      buttonicon: 'fa-users',
      onClickButton: function() {
        var gr = jQuery("#userGrid").jqGrid('getGridParam', 'selrow');
        if (gr != null)
          jQuery("#userGrid").jqGrid('editGridRow', gr, {
            //Edit options
            height: 'auto',
            width: 'auto',
            top: 75,
            left: 350,
            modal: true,
            editCaption: jQuery.i18n.prop('userdetail.table.button.edituser'),
            processData: jQuery.i18n.prop('application.common.message.processing'),
            recreateForm: true,
            bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
            bSubmit: jQuery.i18n.prop('application.common.button.save'),
            reloadAfterSubmit: false,
            closeOnEscape: true,
            //checkOnUpdate:true,//Form Navigation option
            //savekey: [true,13], //Form Navigation option
            //navkeys: [true,38,40],//Form Navigation option
            //checkOnSubmit : true,//Form Navigation option
            closeAfterEdit: true,
            afterSubmit: refreshData, // Need to refresh the data in the table to reflect the hashed password
            /*beforeShowForm: function() { //NOT WORKING !!
                               // "editmodlist"
                               var dlgDiv = $("#editmod" + grid[0].id);
                               var parentDiv = dlgDiv.parent();
                               var dlgWidth = dlgDiv.width();
                               var parentWidth = parentDiv.width();
                               var dlgHeight = dlgDiv.height();
                               var parentHeight = parentDiv.height();
                               // TODO: change parentWidth and parentHeight in case of the grid
                               //       is larger as the browser window
                               dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
                               dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
                            }*/
          });
        else {
          $.jgrid.info_dialog.call(
            this,
            jQuery.i18n.prop('userdetail.table.dialog.message.caption'), // dialog title
            jQuery.i18n.prop('userdetail.table.dialog.message.selectrow'), // text inside of dialog
            jQuery.i18n.prop('application.common.button.close') // text in the button
          );
        }
      }
    });

    //Toolbar button to delete a user
    jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
      caption: jQuery.i18n.prop('userdetail.table.button.deleteuser'),
      title: jQuery.i18n.prop('userdetail.table.title.delete'),
      buttonicon: 'fa-user-times',
      onClickButton: function() {
        var gr = jQuery("#userGrid").jqGrid('getGridParam', 'selrow');
        if (gr != null)
          jQuery("#userGrid").jqGrid('delGridRow', gr, {
            reloadAfterSubmit: false,
            closeOnEscape: true
          });
        else {
          $.jgrid.info_dialog.call(
            this,
            jQuery.i18n.prop('userdetail.table.dialog.message.caption'), // dialog title
            jQuery.i18n.prop('userdetail.table.dialog.message.selectrow'), // text inside of dialog
            jQuery.i18n.prop('application.common.button.close') // text in the button
          );
        }
      }
    });

    //Column chooser button in top toolbar
    jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
      caption: jQuery.i18n.prop('application.common.button.columns'),
      title: jQuery.i18n.prop('userdetail.table.title.choosecolumn'),
      buttonicon: 'fa-columns',
      onClickButton: function() {
        jQuery("#userGrid").jqGrid('columnChooser');
      }
    });

    //Button to toggle toolbar search/filter option
    jQuery("#userGrid").jqGrid('navButtonAdd', "#userGrid_toppager", {
      caption: jQuery.i18n.prop('application.common.button.search'),
      title: jQuery.i18n.prop('userdetail.table.title.search'),
      buttonicon: 'fa-toggle-on',
      onClickButton: function() {
        userGrid[0].toggleToolbar();
      }
    });

    //Refresh Button as auto refresh not exists for user detail
    jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
      caption: jQuery.i18n.prop('application.common.button.refresh'),
      title: jQuery.i18n.prop('userdetail.table.title.refreshuserdetail'),
      buttonicon: 'fa fa-cog fa-spin',
      onClickButton: function() {
        refreshData();
      }
    });

    //Frozen columns - NOT needed as of now as no. of columns are limited.
    //jQuery("#userGrid").jqGrid('setFrozenColumns');

    //Grid resize
    jQuery("#userGrid").jqGrid('gridResize', {
      minWidth: 550,
      maxWidth: 1300,
      minHeight: 80,
      maxHeight: 350
    });

    /**
     * Function to refresh the data after a new row inserted in DB. If
     * not then when we update the same row again, because of no primary
     * key reflected in client side, a fresh row will be inserted. Also
     * if we are refreshing the grid, then immediate delete of this row
     * will fail because again primary key(i.e. id) not reflected in the
     * client side
     *
     * NOT SURE IS THERE ANY OTHER BETTER WAY TO DO THIS !!!!
     */
    function refreshData() {
      jQuery("#userGrid").jqGrid("setGridParam", {
        datatype: 'json',
        url: 'list_user_detail',
        page: 1
      }).trigger("reloadGrid");
      return [true, '']; //TO make sure that control goes back to jqGrid inbuild configs like closeafterAdd etc.
    }

    //Username Validation checks !!
    function usernameCheck(value) {
      if (checkLength(value, 6, 50) && checkRegexp(value, /^[a-z]([0-9a-z_.])+$/i)) {
        return [true, "", ""];
      } else {
        return [false, jQuery.i18n.prop('userdetail.validation.message.username'), ""];
      }
    }

    //Password Validation checks !!
    function passwordCheck(value) {
      if (checkLength(value, 6, 60)) {
        return [true, "", ""];
      } else {
        return [false, jQuery.i18n.prop('userdetail.validation.message.password'), ""];
      }
    }

    //Firstname & Lastname Validation checks !!
    function onlyAblhabetCheck(value) {
      if (checkLength(value, 1, 50) && checkRegexp(value, /^[a-z]([a-z ])+$/i)) {
        return [true, "", ""];
      } else {
        return [false, jQuery.i18n.prop('userdetail.validation.message.firstname'), ""];
      }
    }

    //Email Validation checks !!
    function emailCheck(value) {
      if (checkLength(value, 6, 100) && checkRegexp(value, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i)) {
        return [true, "", ""];
      } else {
        return [false, jQuery.i18n.prop('userdetail.validation.message.email'), ""];
      }
    }

    //Birthday Validation checks !!
    function birthdayCheck(value) {
      var now = new Date();
      if (value < now) {
        return [true, "", ""];
      } else {
        return [false, jQuery.i18n.prop('userdetail.validation.message.dob'), ""];
      }
    }

    /*Check length of particular field*/
    function checkLength(o, min, max) {
      if (o.length > max || o.length < min) {
        //o.addClass("ui-state-error");
        return false;
      } else {
        return true;
      }
    }

    /*Check regex/format of particular field*/
    function checkRegexp(o, regexp) {
      if (!(regexp.test(o))) {
        //o.addClass("ui-state-error");
        return false;
      } else {
        return true;
      }
    }


  });

＆＃13;

＆＃13;

＆＃13;

附图像 - 圆形和圆形问号..！

Answer 1

您可以通过添加一行代码来解决您的主要问题：

$("#userGrid_toppager_right").hide();

它隐藏了顶部寻呼机的右侧部分，并将整个首页用于工具栏。

此外，我建议您查看现有代码。它可以减少两倍的时间，并且可以简化，如果你将使用更多的免费jqGrid的可能性。我在下面只提一些建议。

• 开头的代码会重载$.jgrid.from以及稍后的loadComplete设置jqGrid的lastSelected参数。在免费的jqGrid中不需要它。您可以删除代码，只使用内置的lastSelectedData选项而不是lastSelected。自免费jqGrid 4.8（参见the demo的README48）
后，存在选项lastSelectedData
• 您应该从所有index项中删除所有colModel属性。
• colModel的代码包含大量重复内容。我建议你使用列模板。您可以定义一些本地对象，并使用模板或在$.jgrid.cmTemplate下定义模板$.jgrid.cmTemplate的属性可以用作template colModel属性的字符串值}。您可以在jqGrid的align: 'center'选项中包含一些常见属性（例如editable: true或cmTemplate）。该选项会更改colModel属性的默认值，您可以从每个colModel项中删除重复项。我建议您阅读the old answer和the pull request。
• 您在代码jQuery("#userGrid")和jQuery.i18n.prop中多次使用。您应该了解它的表达式将在代码中每次进行评估。引入var $grid = jQuery("#userGrid"), localeProp = jQuery.i18n.prop;之类的变量并在代码中使用变量是切实可行的。函数refreshData和所有onClickButton可以使用jQuery(this)代替jQuery("#userGrid")。
• 使用寻呼机和工具栏可以简化。首先，您可以将pager: "#userPager"替换为pager: true并从HTML标记中删除<div id="userPager"></div>。免费的jqGrid将以相同的方式创建页面的div，就像它为顶部寻呼机创建div一样。
• 您可以将navGrid的长时间通话替换为以下内容：

jQuery("#userGrid").jqGrid('navGrid', '#userGrid_toppager', {
    //General options
    edit: false,
    add: false,
    del: false,
    search: false,
    view: false,
    refresh: false
});

仅为顶部寻呼机创建导航栏。

• 您使用$("#...", userGrid_toppager).remove();的代码块可以替换为一行代码

$("#userGrid_toppager_center,#userGrid_toppager_right").hide();

隐藏顶部寻呼机的右侧和中间部分。

• 我建议您阅读the wiki article并使用新的表单编辑选项和navGrid。您可以将navOptions，formEditing，formDeleting，searching 定义为jqGrid参数，这将指定navGrid的默认值，{{ 1}}等等。如果可以减少和简化代码，使其更易读，更易于维护。