Jqgrid 隐藏寻呼机中的按钮分隔符

在我的网格中，我在寻呼机中有 3 个按钮："刷新"、"构建"和"开发"。它们由两个导航分隔符(竖线(分隔。加载网格时，我隐藏了"已开发"按钮，仅在用户单击一行时才显示它，并在取消选择它时隐藏它。我想在隐藏"开发"按钮时隐藏分隔符。只有一个分隔符(构造按钮和"开发"按钮之间的分隔符(应该隐藏，而不是所有分隔符。我该怎么做？

在这里看到我的jsfiddle。

请参阅下面的我的JavaScript代码：

 var hideButton = function (buttonTitle) {
     var $td = $(grid[0].p.pager + '_left ' + 'td[title="' + buttonTitle + '"]');
     $td.hide();
 };
 var showButton = function (buttonTitle) {
     var $td = $(grid[0].p.pager + '_left ' + 'td[title="' + buttonTitle + '"]');
     $td.show();
 };
 var controlButtonView = function (selRowIds, buttonTitle) {
     var i, rowData, show = false;
     for (i = 0; i < selRowIds.length; i++) {
         rowData = grid.jqGrid("getRowData", selRowIds[i]);
         if (rowData.Developed) {
             show = true;
         } else {
             show = false;
             hideButton(buttonTitle);
             break;
         }
     }
     if (show) {
         showButton(buttonTitle);
     }
 };
 var hideShowButton = function (status) {
     var selRowIds = grid.jqGrid('getGridParam', 'selarrrow');
     if (status) {
         controlButtonView(selRowIds, "Set Developed");
     } else {
         if (selRowIds.length > 0) {
             controlButtonView(selRowIds, "Set Developed");
         } else {
             hideButton("Set Developed");
         }
     }
 };
 var mydata = [{
     Country: "Germany",
     Capital: "Berlin",
     Date: "05-09-2014",
     Code: 49
 }, {
     Country: "France",
     Capital: "Paris",
     Date: "05-09-2014",
     Code: 33
 }, {
     Country: "Cameroon",
     Capital: "Yaounde",
     Date: "06-09-2014",
     Code: 237
 }, {
     Sel: false,
     Country: "Gabon",
     Capital: "Libreville",
     Date: "06-09-2014",
     Code: 241
 }, {
     Country: "Holland",
     Capital: "Amsterdam",
     Date: "07-09-2014",
     Code: 31
 }, {
     Country: "Japan",
     Capital: "Tokyo",
     Date: "08-09-2014",
     Code: 81
 }, {
     Country: "Italy",
     Capital: "Rome",
     Date: "09-09-2014",
     Code: 39
 }, {
     Country: "Spain",
     Capital: "Madrid",
     Date: "09-09-2014",
     Code: 34
 }, {
     Country: "England",
     Capital: "London",
     Date: "10-09-2014",
     Code: 44
 }, {
     Country: "US",
     Capital: "Washington D.C.",
     Date: "12-09-2014",
     Code: 1
 }],
     grid = jQuery("#pays_grid"),
     initDateWithButton = function (elem) {
         if (/^'d+%$/.test(elem.style.width)) {
             $(elem).css({
                 width: "230px"
             });
         }
         setTimeout(function () {
             $(elem).datepicker({
                 dateFormat: 'dd-mm-yy',
                 showOn: 'button',
                 changeYear: true,
                 changeMonth: true,
                 buttonImageOnly: true,
                 buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                 buttonText: "Select date",
                 onSelect: function (dateText, inst) {
                     if (inst.id.substr(0, 3) === "gs_") {
                         grid[0].triggerToolbar();
                     } else {
                         // to refresh the filter
                         $(inst).trigger("change");
                     }
                 }
             });
         }, 100);
     };
 grid.jqGrid({ //set your grid id
     data: mydata, //insert data from the data object we created above
     datatype: 'local',
     height: '250',
     gridview: true,
     width: 700,
     autoheight: true,
     auwidth: true,
     multiselect: true,
     rowNum: 10,
     rowList: [1, 5, 10],
     colNames: ['Country', 'Country Code', 'Developed', 'Capital', 'Date'],
     colModel: [{
         name: 'Country',
         key: true,
         align: 'center'
     }, {
         name: 'Code',
         align: 'center'
     }, {
         name: 'Developed',
         align: 'center',
         formatter: function () {
             return "<img src='http://www.iconsdb.com/icons/preview/red/circle-xxl.png' alt='red light' style='width:15px;height:15px'/>";
         }
     }, {
         name: 'Capital',
         align: 'center'
     }, {
         name: 'Date',
         align: 'center',
         sorttype: 'date',
         editable: true,
         editoptions: {
             dataInit: initDateWithButton,
             size: 11
         },
         searchoptions: {
             sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
             dataInit: initDateWithButton
         }
     }], //define column models
     pager: '#pays_grid_pager', //set your pager div id
     viewrecords: true,
     sortorder: "asc",
     sortname: 'Country',
     shrinkToFit: true,
     forceFit: true,
     caption: "Country Overview",
     onSelectRow: function (id, status) {
         hideShowButton(status);
         return true;
     },
     onSelectAll: function (rowIds, status) {
         hideShowButton(status);
         return true;
     }
 }).navGrid('#pays_grid_pager', {
     edit: false,
     add: false,
     del: false,
     search: false,
     refresh: true
 }).navSeparatorAdd('#pays_grid_pager', {
     sepclass: 'ui-separator',
     sepcontent: '',
     position: 'last'
}).navButtonAdd('#pays_grid_pager', {
     caption: "Constitution",
     buttonicon: "ui-icon-document",
     id: "Constitution",
     title: "Get Constitution"
}).navSeparatorAdd('#pays_grid_pager', {
     sepclass: 'ui-separator',
     sepcontent: '',
     position: 'last'
 }).navButtonAdd('#pays_grid_pager', {
     caption: "Developed",
     buttonicon: "ui-icon-circle-check",
     position: "last",
     title: "Set Developed",
     onClickButton: function () {
         var selRowIds = grid.jqGrid('getGridParam', 'selarrrow');
         var data;
         var image;
         for (var i = 0; i < selRowIds.length; i++) {
             data = grid.getRowData(selRowIds[i]);
             image = "<img src='http://www.clker.com/cliparts/q/j/I/0/8/d/green-circle-icon-md.png' alt='green light' style='width:15px;height:15px'/>";
             data.Developed = image;
             $('#' + data.Country + ' [aria-describedby="pays_grid_Developed"]').html(image);
             grid.jqGrid("resetSelection");
             grid.jqGrid('setRowData', i, data[i]);
             grid.jqGrid('saveRow', i, false);
         }
     }
 }).jqGrid('filterToolbar', {
     autoSearch: true,
     beforeSearch: function () {
         var postData = grid.jqGrid('getGridParam', 'postData');
         if (!postDataHasParams(postData)) {
             return false;
         } else if (postData.Code !== null) {
             var numToSearch = Number(postData.Code);
             if (isNaN(numToSearch)) {
                 alert('Country Code can only contain numeric values');
                 return true;
             } else {
                 return false;
             }
         }
         return false;
     }
 });
 hideButton("Set Developed");