以下代码在工具栏上生成带有两个按钮的透视网格
var data = [{
"id": 1,
"make": "toyota",
"model": "corolla",
"fuelusagecity": "17",
"fuelusagehwy": "12",
"fuelmeasure":'Litre',
"salesaboveavg": false,
"totalnumberofsales": 120000.0000,
"highsalestext": null,
"salesdate": "2010-12-01"
}, {
"id": 2,
"make": "toyota",
"model": "corolla",
"fuelusagecity": "10",
"fuelusagehwy": "14",
"salesaboveavg": false,
"fuelmeasure":'Litre',
"totalnumberofsales": 100000.0000,
"highsalestext": "HIGH",
"salesdate": "2010-12-15"
}, {
"id": 3,
"make": "toyota",
"model": "belta",
"fuelusagecity": "15",
"fuelusagehwy": "10",
"salesaboveavg": true,
"fuelmeasure":'Litre',
"totalnumberofsales": 200000.0000,
"highsalestext": null,
"salesdate": "2011-01-10"
}, {
"id": 4,
"make": "toyota",
"model": "camry",
"fuelusagecity": "13",
"fuelusagehwy": "10",
"fuelmeasure":'Litre',
"salesaboveavg": false,
"totalnumberofsales": 300000.0000,
"highsalestext": "HIGH",
"salesdate": "2011-04-23"
}, {
"id": 5,
"make": "nissan",
"model": "skyline",
"fuelusagecity": "14",
"fuelusagehwy": "9",
"fuelmeasure":'Litre',
"salesaboveavg": true,
"totalnumberofsales": 500000.0000,
"highsalestext": "HIGH",
"salesdate": "2010-09-10"
}, {
"id": 6,
"make": "nissan",
"model": "zx300",
"fuelusagecity": "10",
"fuelusagehwy": "8",
"fuelmeasure":'Litre',
"salesaboveavg": false,
"totalnumberofsales": 400000.0000,
"highsalestext": null,
"salesdate": "2012-01-06"
}];
/* convert the salesdate in */
var i, item, dateParts;
for (i = 0; i < data.length; i++) {
item = data[i];
if (typeof item.salesdate === "string") {
dateParts = item.salesdate.split("-");
item.salesYear = dateParts[0];
item.salesMonth = dateParts[1];
item.salesDay = dateParts[2];
item.salesDateFormatted = dateParts[0];
}
}
var myIntTemplate = {
formatter: "currency",
align: "right", sorttype: "number",
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] },
formatoptions: { defaultValue: ""}};
$("#list483").jqGrid("jqPivot",
data,
{
frozenStaticCols: true,
skipSortByX: true,
useColSpanStyle: true,
//defaultFormatting: false,
xDimension: [
{ dataName: "make", width: 100, label: "Make" },
{ dataName: "model", width: 100, label: "Model", align: "center", skipGrouping:true },
{ dataName: "fuelmeasure", width: 103, label: "Units" },
],
yDimension: [
{ dataName: "salesdate", sortorder: "desc"}//,
//{ dataName: "salesYear", sorttype: "integer" },
//{ dataName: "salesMonth", sorttype: "integer" }
],
aggregates: [{
member: "totalnumberofsales",
template: myIntTemplate,
formatter:function(cellvalue, options, rowObject){
if(cellvalue=== undefined){
return '';
}
else{
var x = options.rowData.pivotInfos[options.colModel.name].rows[0].highsalestext;
if(x==="HIGH")
{
return x;
}
else
{
return cellvalue;
}
}
},
cellattr: function (rowId, cellValue, rawObject, cm, rdata) {
if (rawObject != null) {
var items = rawObject.pivotInfos[cm.name];
if (items != null && items.rows != null && items.rows.length > 0) {
var isHigh = true, i;
for (i = 0; i < items.rows.length; i++) {
if (items.rows[i].highsalestext !== "HIGH") {
isHigh = false;
break;
}
}
if (isHigh) {
return "class='high-marker'";
}
}
}
},
aggregator: "max"
}/*,
{
member: "totalnumberofsales",
aggregator: "count",
//template: "integer",
label: "{0}"
}*/]
},
// grid options
{
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true, width: 75 },
shrinkToFit: false,
useUnformattedDataForCellAttr: false,
autoResizing: { compact: true },
groupingView: {
groupField: ["x0"],
groupColumnShow: [false],
groupText: ["<span class='group-text'>{0}</span>"]
},
//width: 450,
toolbar: [true, "top"],
pager: true,
rowNum: 20,
caption: "<b>Car sales statistics</b>",
rowList: [5, 10, 20, 100, "10000:All"]
}
);
$('<div className="clsRangeDiv"><input type="button" id="btnHide" value="Hide" /><input type="button" id="btnShow" value="Show" /></div>').appendTo("#t_list483");
$('#btnHide').click(function(){
var datestoHide = ['2011-04-23','2010-12-15'];
jQuery("#list483").jqGrid('hideCol',datestoHide);
})
$('btnShow').click(function(){
var datestoShow = ['2011-04-23','2010-12-15'];
jQuery("#list483").jqGrid('showCol',datestoShow);
})
以下是jsfiddle的完整代码。
网格工具栏有两个按钮，隐藏和显示。当用户点击隐藏时，它应隐藏日期列＆＃39; 2011-04-23＆＃39;，2010-12- 15＆＃39; 当用户点击显示时，它应显示日期列＆＃39; 2011-04-23＆＃39;，＃12; 2010-12 -15＆＃39; 。
我使用以下代码来实现隐藏和显示
隐藏按钮的点击事件
$('#btnHide').click(function(){
var datestoHide = ['2011-04-23','2010-12-15'];
jQuery("#list483").jqGrid('hideCol',datestoHide);
})
关于显示按钮的点击事件
$('btnShow').click(function(){
var datestoShow = ['2011-04-23','2010-12-15'];
jQuery("#list483").jqGrid('showCol',datestoShow);
})
但代码行jQuery("#list483").jqGrid('hideCol',datestoHide);和jQuery("#list483").jqGrid('showCol',datestoShow);似乎不起作用。为什么这样，我如何隐藏/显示列？
答案 0 :(得分：2)
方法hideCol / showCol允许按列名隐藏/显示网格列 ，但没有名称为'2011-04-23'的列'2010-12-15'。这就是为什么原始代码不起作用的原因。第一列的名称为x0，x1，...以及其他名称为y0，y1，y2的列组。 。 跟随。因此，可以将代码修复为
$('#btnHide').click(function () {
//var datestoHide = ['2011-04-23','2010-12-15'];
var datestoHide = ['y1','y3'];
$("#list483").jqGrid('hideCol', datestoHide);
});
$('#btnShow').click(function () {
//var datestoShow = ['2011-04-23','2010-12-15'];
var datestoShow = ['y1','y3'];
$("#list483").jqGrid('showCol', datestoShow);
});
请参阅https://jsfiddle.net/sppc21dm/3/
可以通过jqGrid的使用pivotOptions选项使代码更具动态性，这将由jqPivot设置。 pivotOptions选项包含许多包含yIndex属性的有用信息，可用于查找
function getYColumnName (yValue) {
var yIndex = $("#list483").jqGrid("getGridParam", "pivotOptions").yIndex,
length = yIndex.getIndexLength(), i, item;
for (i = 0; i < length; i++) {
item = yIndex.getItem(i);
// item is array with different y-values.
// We use yDimension with one element "salesdate", thus every item is array
// with one element item[0], which we can test to find "salesdate"
if (yValue === item[0]) {
return "y" + i;
}
}
}
var columnsToHideOrShow = [getYColumnName('2011-04-23'),getYColumnName('2010-12-15')];
$('#btnHide').click(function() {
$("#list483").jqGrid('hideCol', columnsToHideOrShow);
});
$('#btnShow').click(function(){
$("#list483").jqGrid('showCol', columnsToHideOrShow);
});