|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jqGrid Example Part 1</title>
<link rel="stylesheet"
href="Content/jquery-ui/redmond/jquery-ui-1.8.14.custom.css"
type="text/css" />
<link rel="stylesheet"
href="Content/jquery-grid/ui.jqgrid.css" type="text/css" />
<script src="Scripts/jquery-1.6.2.min.js"
type="text/javascript"></script>
<script src="Scripts/jquery-grid/grid.locale-en.js"
type="text/javascript"></script>
<script src="Scripts/jquery-grid/jquery.jqGrid.min.js"
type="text/javascript"></script>
<script type="text/javascript">
// the url to
var jqDataUrl = "jQGrid/LoadjqData";
$(document).ready(function () {
// Set up the jquery grid
$("#jqTable").jqGrid({
// Ajax related configurations
url: jqDataUrl,
datatype: "json",
mtype: "POST",
// Specify the column names
colNames: ["Id", "Name", "Score", "Enrollment"],
// Configure the columns
colModel: [
{ name: "Id", index: "Id", width: 40, align: "left" },
{ name: "Name", index: "Name", width: 100, align: "left" },
{ name: "Score", index: "Score", width: 200, align: "left" },
{ name: "Enrollment", index: "Enrollment", width: 200, align: "left"}],
// Grid total width and height
width: 550,
height: 200,
// Paging
toppager: true,
pager: $("#jqTablePager"),
rowNum: 5,
rowList: [5, 10, 20],
viewrecords: true, // Specify if "total number of records" is displayed
// Default sorting
sortname: "Id",
sortorder: "asc",
// Grid caption
caption: "A Basic jqGrid - Read Only"
}).navGrid("#jqTablePager",
{ refresh: true, add: false, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
);
});
</script>
</head>
<body>
<div>
<table id="jqTable" class="scroll"></table>
<div id="jqTablePager" />
</div>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
I have been working in the IT industry for some time. It is still exciting and I am still learning. I am a happy and honest person, and I want to be your friend.
Submit an article or tip