Question

我已经按照示例创建了一个新的jqGrid。数据加载并显示正常。行数可以正常工作。唯一的问题是它只是在普通网格框中显示数据（如下所示）。没有层。即使排序按钮也不显示/工作。即使链接指向正确的文件夹，也没有css效果。

  col1 |  col2    |  col3
--------------------------
data1a |  data1b  | data1c
--------------------------
data2a |  data2b  | data2c

这是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>

Answer 1

您的网页上未包含一个非常重要的 CSS文件：

<link rel="stylesheet" type="text/css"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/redmond/jquery-ui.css" />

此外，您多次包含相同的 JavaScript代码，这是错误的？您使用哪个grid.loader.js？里面是什么？您可以使用任何文本编辑器打开它。为什么要插入jqModal.js和jqDnR.js？如果您使用jqGrid 4.0.0中的jquery.jqGrid.src.js，则不需要包含grid.loader.js，jqModal.js和jqDnR.js。 jquery.jqGrid.src.js的确切包含可能取决于您在下载jqGrid时选择的模块列表。您可以打开jquery.jqGrid.min.js并检查文件开头的注释行。该文件的standyrd（完整版）包含以下模块：

模块：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;

所以你不能再一次包含相同的模块。

jqGrid - 仅显示带有数据的网格

1 个答案: