jqGrid - Displaying only grid like form with data
I have followed the example in creating a new jqGrid. The data loads and displays ok. The number of rows works ok. The only problem is that is just displays the data in plain grid boxes(like below). No layer. Even the sort buttons do not show/work. There is no css effect even though the link is pointed to the correct folder.
col1 | col2 | col3
--------------------------
data1a | data1b | data1c
--------------------------
data2a | data2b | data2c
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="../theme/css/ui.jqgrid.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 50%;
}
</style>
<script src="../theme/js/jquery-1.6.1.js" type="text/javascript"></script>
<script src="../theme/js/grid.locale-en.js" type="text/javascript"></script>
<script src="../theme/js/src/grid.loader.js" type="text/javascript"></script>
<script src="../theme/js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src=“../theme/js/src/jqDnR.js” type=“text/javascript”></script>
<script src=“../theme/js/src/jqModal.js” type=“text/javascript”></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:'JQ.php',
datatype: 'xml',
mtype: 'GET',
colNames:['UNIT ID','ROLE ID', 'CREATED DATE','CREATED BY','Inactive'],
colModel :[
{name:'UNIT_ID', index:'UNIT_ID', width:55},
{name:'ROLE_ID', index:'ROLE_ID', width:90},
{name:'CREATED_DT', index:'CREATED_DT', width:100},
{name:'CREATED_BY', index:'CREATED_BY', width:80},
{name:'INACTIVE', 开发者_开发问答index:'INACTIVE', width:80, sortable:false}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30,50],
sortname: 'UNIT_ID',
sortorder: 'desc',
viewrecords: true,
gridview: true,
width: 500,
height: "100%",
caption: 'My first gridder'
});
});
</script>
You don't included on your page one very important CSS file:
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/redmond/jquery-ui.css" />
Moreover you included the same JavaScript code many times, which is wrong? Which grid.loader.js you use? What is inside? You can open it with any text editor. Why you insert jqModal.js and jqDnR.js? If you use jquery.jqGrid.src.js from jqGrid 4.0.0 you don't need include grid.loader.js, jqModal.js and jqDnR.js. The exact contain of jquery.jqGrid.src.js can depend on the list of modules which you selected as you downloaded the jqGrid. You can open jquery.jqGrid.min.js and examine the comment line at the beginning of the file. The standyrd (full) version of the file contain the following modules:
Modules: grid.base.js; jquery.fmatter.js; grid.custom.js; grid.common.js; grid.formedit.js; grid.filter.js; grid.inlinedit.js; grid.celledit.js; jqModal.js; jqDnR.js; grid.subgrid.js; grid.grouping.js; grid.treegrid.js; grid.import.js; JsonXml.js; grid.tbltogrid.js; grid.jqueryui.js;
So you must not inclde the same modules one more time.
加载中,请稍侯......
精彩评论