在我的网格中，我有3个按钮：寻呼机中的“刷新”，“建立”和“已开发”。它们由两个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");
答案 0 :(得分：0)
看到分隔符位于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();
};
...
，其中包含您隐藏和显示的按钮，为什么不对它执行相同的操作？
像这样：
{{1}}
更新的小提琴here。