Jqgrid隱藏按鈕分離器在尋呼機

Question

在我的網格中，我有3個按鈕：'刷新'，'Constution'和'開發'在尋呼機。它們由兩個navSeparator（豎線）分隔。當網格加載時，我隱藏了「開發」按鈕，只有當用戶點擊某一行並在取消選擇時隱藏它時才顯示它。當我隱藏「開發」按鈕時，我想隱藏分隔符。只有一個分隔符（Constution'和'Developed'按鈕之間的分隔符）應該被隱藏，而不是所有的分隔符。我怎樣才能做到這一點？

查看我的jsfiddle HERE。

見我下面的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"); 

Answer 1

眼看隔板舉行td這是包含您所隱藏和顯示按鈕td的前任裏面，爲什麼不只是做同樣的它？

像這樣：

var hideButton = function (buttonTitle) { 
    var $td = ... 
    var $sep = $td.prev(); 
    $td.hide(); 
    $sep.hide(); 
}; 
var showButton = function (buttonTitle) { 
    var $td = ... 
    var $sep = $td.prev(); 
    $sep.show(); 
    $td.show(); 
}; 
... 

更新小提琴here。