H!Grid怎么用?其实H!Grid 可以灵活方便的在html任何部分插入jqgrid,当然服务器需要支持`php`,本文介绍了常用的几种设置,如何嵌入完全取决于建站需要
从 安装H!Grid 中可以看出,在php
中使用输出标记可以自动将表格呈现在网页的任何位置
如letter.php包含的参数如下:
higridOP( $tblelement, $pager , $script , $summary, $params , $createtbl , $createpg , $echo );
第一个参数指明了html
的表格ID
,第二个参数为jqgrid
所需的分页ID
,作为jQuery
选择器必须的标识。如果不需要底部页码,第二个参数可忽略。
这些参数在html
页面的代码为:
<table id="grid"></table>
<div id="pager"></div>
第三个参数$script
为jqgrid
自动包含所需要的参数,渲染后的代码如下:
...
<script type="text/javascript">
jQuery(document).ready(function() {
$("#grid").jqGrid({...});
});
</script>
...
第六个和第七个参数设置为true
,自动生成表格和分页的ID
<?php
...
$grid = new hgGridRender($connhigrid);
...
$grid->higridOP("grid","pager",true,null,null,false, false, true);
?>
生成如下代码:
...
<table id="grid"></table>
<div id="pager"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#grid").jqGrid({...});
});
</script>
...
其他情况,可以需要将表格和分页的ID
在html
中定义,但需要H!Grid
自动生成javascript
,这时候需要设置为false
。
<?php
...
$grid = new hgGridRender($connhigrid);
...
$grid->higridOP("grid","pager",true,null,null,false, false, true);
生成html:
...
<script type="text/javascript">
jQuery(document).ready(function() {
$("#grid").jqGrid({...});
});
</script>
...
...
<table id="grid"></table>
<div id="pager"></div>
可以使用jQuery的”ready” event (document.ready)使用jqGrid example.php
<!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 PHP jqGrid </title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
...
<?php include "letter.php";?>
...
});
</script>
</head>
<body>
...
...
<table id="grid"></table>
<div id="pager"></div>
...
</body>
</html>
letter.php 第三、六、七设置为false
<?php
...
$grid = new hgGridRender($connhigrid);
...
$grid->higridOP("grid","pager",false,null,null,false, false, true);
?>
从AJAX加载jqGrid,第三个参数设置为true
,第六、七参数设置为false
<!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 PHP jqGrid </title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
...
jQuery("#mybutton").click(function(){
jQuery("#mycontent").load("letter.php");
return false;
jQuery(this).remove();
});
...
});
</script>
</head>
<body>
...
<button id="mybutton">Create Grid</button>
...
<div id="mycontent"></div>
...
</body>
</html>
letter.php
<?php
...
$grid = new hgGridRender($connhigrid);
...
$grid->higridOP("grid","pager",true,null,null,true, true, true);
?>