juqery---Flexigrid – Web 2.0 Javscript Grid for...
ui页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ingrid. the jQuery Datagrid</title>
<!-- this stylesheet is for page styling only -->
<style media="all" type="text/css">@import "<?php echo $_BASE_DIR;?>css/ingrid/site.css";</style>
<!-- include jquery lib -->
<script type="text/javascript" src="<?php echo $_BASE_DIR;?>js/ingrid/jquery.js"></script>
<!-- include ingrid lib -->
<script type="text/javascript" src="<?php echo $_BASE_DIR;?>js/ingrid/jquery.ingrid.js"></script>
<!-- ingrid default stylesheet -->
<style media="all" type="text/css" >@import "<?php echo $_BASE_DIR;?>css/ingrid/ingrid.css";</style>
<!-- to make ingrid save her state (selected rows, page number, column sort & direction); just include the jQ cookie plugin -->
<script type="text/javascript" src="<?php echo $_BASE_DIR;?>js/ingrid/jquery.cookie.js"></script>
<!-- initialize -->
<script type="text/javascript">
$(document).ready(
function() {
$("#table1").ingrid({
url: '<?php echo url('default::ingrid/data')?>',
height: 350,
initialLoad: true,
rowClasses: ['grid-row-style1','grid-row-style1','grid-row-style2','grid-row-style1','grid-row-style1','grid-row-style3'],
sorting: false,
paging: true,
totalRecords: 1000,
extraParams: {sessid : 'some_session_token_here'}
});
}
);
</script>
</head>
<body>
<h1>Ingrid, the jQuery Datagrid.</h1>
<div class="demo">
<a href="example1.html">Example 1.</a>
<a href="example2.html">Example 2.</a>
<a href="example3.html">Example 3.</a>
</div>
<table id="table1">
<thead>
<tr>
<th>Col 0</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>
</tbody>
</table>
<p>
Some extras:
<br />
- Setting a total row value allows Ingrid to calculate the total number of pages available
<br />
- Pass additional parameters to the server using the <code>extraParams</code> option
</p>
</p>
</body>
</html>
后台页面代码（基于qeephp）
$page = $this->_context->page;
$ssid = $this->_context->sessid;
if(isset($page)){
$page = '&page='.$page;
}
$url = "http://reconstrukt.com/ingrid/src/remote.php?sessid={$ssid}{$page}";
//echo $url;
$ch = curl_init();
curl_setopt($ch, CURLOPT_USERAGENT, "Baiduspider");
curl_setopt($ch, CURLOPT_TIMEOUT, 40);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
//curl_setopt($ch, CURLOPT_REFERER, $ref_url);
//curl_setopt($ch, CURLOPT_HEADER, $header);
//curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 0);
ob_start();
$content = curl_exec ($ch);
ob_end_clean();
curl_close ($ch);
unset($ch);
echo $content;
exit;