Hello! I have simple index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TestApp</title>
<!--jQuery dependencies-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--ParamQuery Grid dependencies-->
<link rel="stylesheet" href="lib/pqGrid/pqgrid.min.css" />
<script type="text/javascript" src="lib/pqGrid/pqgrid.min.js"></script>
<!--my dependencies-->
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js\main.js"></script>
</head>
<body>
<div id="pq_grid"></div>
</body>
</html>
and simple .js file:
$(function(){
createPqGrid();
});
function createPqGrid() {
var obj = {
width: 700,
height: 400,
editable:false
}
obj.colModel = [{title:"First name", width:100, dataType:"string", dataIndx: "firstName"},
{title:"Last name", width:200, dataType:"string", dataIndx: "lastName" },
{title:"Age", width:50, dataType:"integer", dataIndx: "age" },
{title:"Sex", width:58, dataType:"string", dataIndx: "sex"}];
obj.dataModel = {
data:users(10000),
location: "local",
sorting: "local",
paging: "local",
curPage: 1,
rPP: 10000,
rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000, 10000],
};
$("#pq_grid").pqGrid( obj );
return true;
}
users - array of js-objects:
var users = [
{firstName: 'Ivan', lastName: 'Ivanov', age: 18, sex: 'm'},
{firstName: 'Petr', lastName: 'Petrov', age: 20, sex: 'm'},
{firstName: 'Sidor', lastName: 'Sidorov', age: 43, sex: 'm'},
{firstName: 'Sergey', lastName: 'Sergeev', age: 25, sex: 'm'},
{firstName: 'Irina', lastName: 'Irinova', age: 18, sex: 'f'},
{firstName: 'Olga', lastName: 'Olgova', age: 25, sex: 'f'},
];
grid rendered well, rows change color hover but row selection does not work (i use Chrome browser).
I need add some additional parameters?
