pqgrid title 항목 rowspan 하기
Posted by Albert 826Day 19Hour 36Min 37Sec ago [2022-02-12]
pqgrid head 항목 rowspan 하기 위하여 찾다가
{ colModel : [ { title: "User Result", align: "center",
colModel:[
{title: "Status",width: 60, align: "center", dataType: "string"},
{title: "User", width: 60, align: "center", dataType: "string"},
{title: "Time", width: 60, align: "center", dataType: "string"},
]
}]
}
https://paramquery.com/forum/index.php?topic=3794.0
위처럼 title 항목 obj 로 하단에 들어갈 항목 감싸면 된다는걸 알았다.
쌤플코드 링크 https://paramquery.com/pro/demos77
$(function () {
var data = [[1, 'Exxon Mobil', '339938.0', '36130.0'],
[2, 'Wal-Mart Stores', '315654.0', '11231.0'],
[3, 'Royal Dutch Shell', '306731.0', '25311.0'],
[4, 'BP', '267600.0', '22341.0'],
[5, 'General Motors', '192604.0', '-10567.0'],
[6, 'Chevron', '189481.0', '14099.0'],
[7, 'DaimlerChrysler', '186106.3', '3536.3'],
[8, 'Toyota Motor', '185805.0', '12119.6'],
[9, 'Ford Motor', '177210.0', '2024.0'],
[10, 'ConocoPhillips', '166683.0', '13529.0'],
[11, 'General Electric', '157153.0', '16353.0'],
[12, 'Total', '152360.7', '15250.0'],
[13, 'ING Group', '138235.3', '8958.9'],
[14, 'Citigroup', '131045.0', '24589.0'],
[15, 'AXA', '129839.2', '5186.5'],
[16, 'Allianz', '121406.0', '5442.4'],
[17, 'Volkswagen', '118376.6', '1391.7'],
[18, 'Fortis', '112351.4', '4896.3'],
[19, 'Crédit Agricole', '110764.6', '7434.3'],
[20, 'American Intl. Group', '108905.0', '10477.0']];
var options = {
collapsible: {on: false, toggle: false},
colModel: [ { title: "User Result", align: "center",
colModel:[
{ title: "Rank", width: 100, dataType: "integer" },
{ title: "Company", width: 200, dataType: "string" },
]
},
{ title: "Revenues ($ millions)", width: 170, dataType: "float",align:"center"},
{ title: "Profits ($ millions)", width: 170, dataType: "float", align:"center"}
],
columnBorders: false,
dataModel: { data: data },
freezeCols: 0,
freezeRows: 0,
height: 360,
numberCell: { show: false },
pageModel: { type: "" },
//important option for this example.
reactive: true,
roundCorners: false,
rowBorders: false,
selectionModel: { type: 'cell' },
stripeRows: false,
scrollModel: {autoFit: false},
showHeader: true,
showTitle: false,
showToolbar: false,
showTop: false,
title: "Grid Constituents",
toolbar: {
items: [{
type: "button",
label: 'button on toolbar',
listener: function () {
alert("button clicked");
}
}]
},
width: '100%'
};
var grid = pq.grid("'grid_parts", options);
$("'grid_parts_topVisible").change(function (evt) {
options.showTop = $(this).prop("checked");
}).attr("checked", options.showTop );
$("'grid_parts_showTitle").change(function (evt) {
options.showTitle = $(this).prop("checked");
}).attr("checked", options.showTitle );
$("'grid_parts_showToolbar").change(function (evt) {
options.showToolbar = $(this).prop("checked");
}).attr("checked", options.showToolbar );
$("'grid_parts_collapsible").change(function (evt) {
options.collapsible.on = $(this).prop("checked");
}).attr("checked", options.collapsible.on );
$("'grid_parts_header").change(function (evt) {
options.showHeader = $(this).prop("checked");
}).attr("checked", options.showHeader );
$("'grid_parts_columnBorders").change(function (evt) {
options.columnBorders = $(this).prop("checked");
}).attr("checked", options.columnBorders );
$("'grid_parts_rowBorders").change(function (evt) {
options.rowBorders = $(this).prop("checked");
}).attr("checked", options.rowBorders );
$("'grid_parts_freezeRows").change(function (evt) {
options.freezeRows = $(this).prop("checked") ? 2 : 0;
}).attr("checked", options.freezeRows > 0 ? true : false);
$("'grid_parts_freezeCols").change(function (evt) {
options.freezeCols = ($(this).prop("checked") ? 1 : 0);
}).attr("checked", options.freezeCols > 0 ? true : false);
$("'grid_parts_oddRowsHighlight").change(function (evt) {
options.stripeRows = $(this).prop("checked");
}).attr("checked", options.stripeRows);
$("'grid_parts_numberCell").change(function (evt) {
options.numberCell.show = $(this).prop("checked");
}).attr("checked", options.numberCell.show);
$("'grid_parts_autoHeight").change(function (evt) {
options.height = ($(this).prop("checked") ? 'flex' : 360);
}).attr("checked", (options.height == 'flex'));
$("'grid_parts_flexWidth").change(function (evt) {
var flex = $(this).prop("checked");
if(flex) {
options.scrollModel.autoFit = false;
grid.one('refresh', function(){
options.width = 'flex';
});
grid.flex();
}
else{
var CM = options.colModel;
CM[0].width = CM[1].width = CM[2].width = CM[2].width = 70;
options.width = 400;
}
}).attr("checked", (options.width == 'flex'));
$("'grid_parts_autoFit").change(function (evt) {
var autoFit = $(this).prop("checked");
options.scrollModel.autoFit = autoFit;
if(!autoFit){
var CM = options.colModel;
CM[0].width = CM[1].width = CM[2].width = CM[2].width = 150;
}
}).attr("checked", options.scrollModel.autoFit);
$("'grid_parts_resizable").change(function (evt) {
options.resizable = $(this).prop("checked");
}).attr("checked", options.resizable );
$("'grid_parts_paging").change(function (evt) {
var paging = "";
if ($(this).prop("checked")) {
paging = "local";
}
options.pageModel.type = paging;
}).attr("checked", (options.pageModel.type == "local") ? true : false);
$("'grid_parts_roundCorners").change(function (evt) {
options.roundCorners = $(this).prop("checked");
}).attr("checked", options.roundCorners );
});