【发布时间】：2011-11-24 03:08:53
【问题描述】：
在这个表格上有很多关于这个主题的主题；但是，我仍然无法让它正常工作。我想将表格的宽度设置为 900px。此外，因为我要显示近十几行，所以如果行溢出表格大小的边界（如果可能的话），我希望自动实现滚动条。
我目前遇到的问题：
用户帮我解决了这个问题，就是设置宽度
数据不再出现在我的网格中，猜测是服务器端问题。
更新为包含完整代码：
HTML：
<?php
require_once 'tabs.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery jqGrid Demonstration</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript" ></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
// first create the grid
$('#grid').jqGrid({
url:'grid.php',
datatype: "json",
height: 100,
width: 900,
colNames:['Customer ID','Hardware ID', 'Username','Password','Email','Last Login','Last IP','Registration Date','Expire Date'],
colModel:[
{name:'customerid',index:'customerid', width:150, sorttype:'int'},
{name:'hardware_id',index:'hardware_id', width:150},
{name:'username',index:'username', width:100},
{name:'password',index:'password', width:100},
{name:'email',index:'email', width:100},
{name:'lastlogin',index:'lastlogin', width:100},
{name:'lastipaddress',index:'lastipaddress', width:100},
{name:'registration_date',index:'registration_date', width:100},
{name:'expire_date',index:'expire_date', width:100}
],
rowNum:5,
rowList:[5,8,10,20,30],
mtype: "GET",
gridview: true,
pager: '#pager',
sortname: 'customerid',
viewrecords: true,
sortorder: "desc",
caption: "Virtual scrolling on local data"
});
$("#grid").jqGrid('navGrid','#pager', {view: true,del:false});
// now you can any time change the width of the grid
$('#grid').jqGrid('setGridWidth', 900);
});
//]]>
</script>
</head>
<body>
<div>
<?php include ("grid.php");?>
</div>
<div id="pager"></div>
</body>
</html>
服务器端 (grid.php)
<?php
include '../dbc.php';
page_protect();
require_once 'jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/jqGrid.php";
// include the driver class
require_once ABSPATH."php/jqGridPdo.php";
// Connection to the server
$link = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$link ->query("SET NAMES utf8");
// Create the jqGrid instance
$grid = new jqGridRender($link);
$username = $_SESSION['user_name'];
$grid->SelectCommand = "SELECT * FROM tblcustomer_$username";
// set the ouput format to json
$grid->dataType = 'json';
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set some grid options
$grid->setGridOptions(array("rowNum"=>100,"sortname"=>"customerid","height"=>150));
// Change some property of the field(s)
$grid->setColProperty("lastlogin", array(
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
"search"=>false,
"width"=>"400"
));
// Registration date
$grid->setColProperty("registration_date", array(
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
"search"=>false,
"width"=>"400"
));
$grid->setColProperty("expire_date", array(
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
"search"=>false,
"width"=>"400"
));
$grid->setColProperty("customerid",array("width"=>"650"));
$grid->setColProperty("hardware_id",array("width"=>"250"));
$grid->setColProperty("username",array("width"=>"150"));
$grid->setColProperty("password",array("width"=>"150"));
$grid->setColProperty("email",array("width"=>"150"));
$grid->setColProperty("lastipaddress",array("width"=>"100"));
$grid->setFilterOptions(array("stringResult"=>true));
$grid->navigator=true;
$grid->setNavOptions('navigator',array("excel"=>true,"add"=>true,"edit"=>true,"view"=>true,"del"=>true,"search"=>true));
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$link = null;
?>
我觉得好像我已经尝试了所有东西，但是如果有人看到我看不到的东西，请随时告诉我！
感谢您的帮助，
埃文
【问题讨论】：
-
您是否仔细检查过父元素的大小？
-
是的，我可以使用以下事件来更改网格的宽度（但仅在调整屏幕大小时才有效）。 $(window).bind('resize', function() { $("#grid").setGridWidth($(window).width()); }).trigger('resize');
-
首先你应该在你的JavaScript代码中插入
);在代码的末尾，这将对应于$(document).ready(function() {。目前，您的代码中有语法错误。第二个sortname: 'item_id'错误，因为网格没有'item_id'列。 -
@Oleg - 我以为我已经正确更新了它，它在当前版本中不存在（现在将修复）。此外，我更新了我遇到的问题，因为您解决了其中的一部分，这反过来又导致了另一个问题。猜测此错误与服务器端有关？
-
jqGrid 是开源的 JavaScript 代码。在您的问题中，您发布了 PHP 代码。此外，它使用来自trirand.net 的商业 产品。我个人不使用 PHP，当然也不使用 jqGrid for PHP。如果您要捕获返回服务器代码
'grid.php'的 JSON 结果（您可以使用 Fiddler 或 Firebug 捕获 HTTP 流量），则可以独立于 PHP 代码分析问题。