here is the html Table:
<table class="" id="tableId" style="display:none;" border="0" cellpadding="0" cellspacing="0">
<colgroup span="15"></colgroup>
<thead class="rich-table-thead">
<tr class="">
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id45header">
<div id="pgId:formId:pbId:repId:j_id45header:sortDiv">Resource</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id50header">
<div id="pgId:formId:pbId:repId:j_id50header:sortDiv">Supplier</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id55header">
<div id="pgId:formId:pbId:repId:j_id55header:sortDiv">Cost Type</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id58header">
<div id="pgId:formId:pbId:repId:j_id58header:sortDiv">Project</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id61header">
<div id="pgId:formId:pbId:repId:j_id61header:sortDiv">Item</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id64header">
<div id="pgId:formId:pbId:repId:j_id64header:sortDiv">Unit</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id69header">
<div id="pgId:formId:pbId:repId:j_id69header:sortDiv">Mon</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id72header">
<div id="pgId:formId:pbId:repId:j_id72header:sortDiv">Tue</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id75header">
<div id="pgId:formId:pbId:repId:j_id75header:sortDiv">Wed</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id78header">
<div id="pgId:formId:pbId:repId:j_id78header:sortDiv">Thus</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id81header">
<div id="pgId:formId:pbId:repId:j_id81header:sortDiv">Fri</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id84header">
<div id="pgId:formId:pbId:repId:j_id84header:sortDiv">Sat</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id87header">
<div id="pgId:formId:pbId:repId:j_id87header:sortDiv">Sun</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id90header">
<div id="pgId:formId:pbId:repId:j_id90header:sortDiv">Total</div>
</th>
<th class=" " scope="col" colspan="1" id="pgId:formId:pbId:repId:j_id93header">
<div id="pgId:formId:pbId:repId:j_id93header:sortDiv">Costs</div>
</th>
</tr>
</thead>
<tbody id="pgId:formId:pbId:repId:tb">
<tr class="">
<td class="" id="pgId:formId:pbId:repId:0:j_id45" colspan="1"><span id="pgId:formId:pbId:repId:0:j_id47">Equipment-001</span>
</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id50" colspan="1"><span id="pgId:formId:pbId:repId:0:j_id52"></span><span id="pgId:formId:pbId:repId:0:j_id53">Supplier</span><span id="pgId:formId:pbId:repId:0:j_id54"></span>
</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id55" colspan="1"><span id="pgId:formId:pbId:repId:0:j_id57">Cost-name</span>
</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id58" colspan="1"><span id="pgId:formId:pbId:repId:0:j_id60">Test Project 1</span>
</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id61" colspan="1"><span id="pgId:formId:pbId:repId:0:j_id63">Item</span>
</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id64" colspan="1"><span id="pgId:formId:pbId:repId:0:j_id66"> </span><span id="pgId:formId:pbId:repId:0:j_id67"> </span><span id="pgId:formId:pbId:repId:0:j_id68"> </span>
</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id69" colspan="1">12</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id72" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id75" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id78" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id81" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id84" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id87" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id90" colspan="1">12</td>
<td class="" id="pgId:formId:pbId:repId:0:j_id93" colspan="1">0</td>
</tr>
<tr class="">
<td class="" id="pgId:formId:pbId:repId:1:j_id45" colspan="1"><span id="pgId:formId:pbId:repId:1:j_id48">Employee-0012</span>
</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id50" colspan="1"><span id="pgId:formId:pbId:repId:1:j_id52">Supplier</span><span id="pgId:formId:pbId:repId:1:j_id53"></span><span id="pgId:formId:pbId:repId:1:j_id54"></span>
</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id55" colspan="1"><span id="pgId:formId:pbId:repId:1:j_id57">Cost-typeLabor</span>
</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id58" colspan="1"><span id="pgId:formId:pbId:repId:1:j_id60">Test Project 1</span>
</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id61" colspan="1"><span id="pgId:formId:pbId:repId:1:j_id63">Item</span>
</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id64" colspan="1"><span id="pgId:formId:pbId:repId:1:j_id66"> </span><span id="pgId:formId:pbId:repId:1:j_id67"> </span><span id="pgId:formId:pbId:repId:1:j_id68"> </span>
</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id69" colspan="1">24</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id72" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id75" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id78" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id81" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id84" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id87" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id90" colspan="1">24</td>
<td class="" id="pgId:formId:pbId:repId:1:j_id93" colspan="1">0</td>
</tr>
<tr class="">
<td class="" id="pgId:formId:pbId:repId:2:j_id45" colspan="1"><span id="pgId:formId:pbId:repId:2:j_id49">Trade</span>
</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id50" colspan="1"><span id="pgId:formId:pbId:repId:2:j_id52"></span><span id="pgId:formId:pbId:repId:2:j_id53"></span><span id="pgId:formId:pbId:repId:2:j_id54">Supplier</span>
</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id55" colspan="1"><span id="pgId:formId:pbId:repId:2:j_id57">Trade-Cost</span>
</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id58" colspan="1"><span id="pgId:formId:pbId:repId:2:j_id60">Test Project 1</span>
</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id61" colspan="1"><span id="pgId:formId:pbId:repId:2:j_id63">Item</span>
</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id64" colspan="1"><span id="pgId:formId:pbId:repId:2:j_id66"> </span><span id="pgId:formId:pbId:repId:2:j_id67"> </span><span id="pgId:formId:pbId:repId:2:j_id68"> </span>
</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id69" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id72" colspan="1">12</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id75" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id78" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id81" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id84" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id87" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id90" colspan="1">12</td>
<td class="" id="pgId:formId:pbId:repId:2:j_id93" colspan="1">0</td>
</tr>
<tr class="">
<td class="" id="pgId:formId:pbId:repId:3:j_id45" colspan="1"><span id="pgId:formId:pbId:repId:3:j_id48">Employee-0012</span>
</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id50" colspan="1"><span id="pgId:formId:pbId:repId:3:j_id52">Supplier</span><span id="pgId:formId:pbId:repId:3:j_id53"></span><span id="pgId:formId:pbId:repId:3:j_id54"></span>
</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id55" colspan="1"><span id="pgId:formId:pbId:repId:3:j_id57">Cost-typeLabor</span>
</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id58" colspan="1"><span id="pgId:formId:pbId:repId:3:j_id60">Test Project 1</span>
</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id61" colspan="1"><span id="pgId:formId:pbId:repId:3:j_id63">Item</span>
</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id64" colspan="1"><span id="pgId:formId:pbId:repId:3:j_id66"> </span><span id="pgId:formId:pbId:repId:3:j_id67"> </span><span id="pgId:formId:pbId:repId:3:j_id68"> </span>
</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id69" colspan="1">48</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id72" colspan="1">12</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id75" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id78" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id81" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id84" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id87" colspan="1">0</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id90" colspan="1">60</td>
<td class="" id="pgId:formId:pbId:repId:3:j_id93" colspan="1">0</td>
</tr>
</tbody>
</table>
<div id="grid_showhide_columns" style="margin-top:5px;width:1048px;"></div>
<button id="mybutton">Change Sort Indx</button>
and ParamJQuery I used :
$(function () {
var obj = $.paramquery.tableToArray("#tableId");
var newObj = {
width: 1048,
resizable: false,
numberCell: false,
title: false,
sortable: true,
sorting: "local",
location: "local",
resizable: false,
draggable: false,
numberCell: false,
flexHeight: true,
collapsible: false,
flexWidth: true,
groupModel: {
dataIndx: [0, 1],
collapsed: [false, false],
title: ["<b style='font-weight:bold;'>{0} ({1} orders)</b>", "{0} - {1}"],
dir: ["up", "down"]
}
};
obj.colModel = [{
title: "Resources",
width: 100,
dataType: "String"
}, {
title: "Supplier",
width: 100,
dataType: "string"
}, {
title: "Cost Type",
width: 100,
dataType: "string"
}, {
title: "Project",
width: 100,
dataType: "String"
}, {
title: "Item",
width: 100,
dataType: "String"
}, {
title: "Unit",
width: 93,
dataType: "String"
}, {
title: "Mon",
width: 20,
dataType: "Integer"
}, {
title: "Tue",
width: 20,
dataType: "Integer"
}, {
title: "Wed",
width: 20,
dataType: "Integer"
}, {
title: "Thus",
width: 20,
dataType: "Integer"
}, {
title: "Fri",
width: 20,
dataType: "Integer"
}, {
title: "Sat",
width: 20,
dataType: "Integer"
}, {
title: "Sun",
width: 20,
dataType: "Integer"
}, {
title: "Total",
width: 20,
dataType: "Integer"
}, {
title: "Costs",
width: 20,
dataType: "Integer"
}];
newObj.dataModel = {
data: obj.data
};
newObj.colModel = obj.colModel;
dataMobile = newObj.dataModel;
var j$grid = $("#grid_showhide_columns").pqGrid(newObj);
//menu with checkbox images.
$.each(newObj.colModel, function (i, col) {
//var src = '/Content/images/checkbox-checked.png';
var cls = 'pq-sh-checkbox pq-sh-checkbox-checked';
if (col.hidden) {
cls = 'pq-sh-checkbox';
}
if ((col.title != "Resources") && (col.title != "Mon") && (col.title != "Tue") && (col.title != "Wed") && (col.title != "Thus") && (col.title != "Fri") && (col.title != "Sat") && (col.title != "Sun")) {
$(".menu_cols").append("<li><a href='#'><img id='imgId' src='{!URLFOR($Resource.maxedy_Static, 'maxedy_Static/paramQuery/images/Check.png')}'/><span class='" + cls + "'></span> " + col.title + "</a></li>");
// j$(".group_cols").append("<li><a href='#'><img id='imgId' src='{!URLFOR($Resource.maxedy_Static, 'maxedy_Static/paramQuery/images/Check.png')}'/><span class='" + cls + "'></span> " + col.title + "</a></li>");
} else {
$(".menu_cols").append("<li style='display:none;'><a href='#'><span class='" + cls + "'></span> " + col.title + "</a></li>");
// j$(".group_cols").append("<li style='display:none;'><a href='#'><span class='" + cls + "'></span> " + col.title + "</a></li>");
}
if ((col.title == "Resources") || (col.title == "Supplier") || (col.title == "Cost Type") || (col.title == "Project") || (col.title == "Item")) {
$(".group_cols").append("<li><a href='#' id=" + col.title + " style='text-align:left;'><img id='imgId' src='{!URLFOR($Resource.maxedy_Static, 'maxedy_Static/paramQuery/images/Uncheck.png')}'/><span class='" + cls + "'></span> " + col.title + "</a></li>");
} else {
$(".group_cols").append("<li style='display:none;'><a href='#'><span class='" + cls + "'></span> " + col.title + "</a></li>");
}
});
$("#supplierCheck").click(function (evt, ui) {
var DM = j$grid.pqGrid("option", "dataModel");
$grid.pqGrid("refreshDataAndView").pqGrid('groupModel', {
dataIndx: 0
});
});
});
please Suggest any Solution.
i am Using Salesforce's visualForce Page to draw A table. I created example for this but row groping is not working with this.
here is the link :
http://jsfiddle.net/vQXfF/ Thanks