使用higrid将jqGrid灵活嵌入页面中

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>

第三个参数$scriptjqgrid自动包含所需要的参数,渲染后的代码如下:

...
<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>
...

自定义Table和pager的ID,自动生成javascript

其他情况,可以需要将表格和分页的IDhtml中定义,但需要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使用jqGrid

可以使用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

从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);
?>

随机文章 Random Posts