juqery---Flexigrid – Web 2.0 Javscript Grid for...

最新推荐文章于 2024-09-16 19:32:17 发布
最新推荐文章于 2024-09-16 19:32:17 发布
阅读量97 收藏
点赞数
文章标签： php xhtml javascript ViewUI
原文链接：https://my.oschina.net/zhangdapeng89/blog/55058
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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> 
  &nbsp;&nbsp;
  <a href="example2.html">Example 2.</a> 
  &nbsp;&nbsp;
  <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 /> 
&nbsp; - Setting a total row value allows Ingrid to calculate the total number of pages available
<br /> 
&nbsp; - 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;

 

 

 

转载于:https://my.oschina.net/zhangdapeng89/blog/55058

weixin_34121304
关注
javaScript开源大全
banran9851的博客
04-26 5935
javascript开源大全 转自：http://www.cnblogs.com/yiliweichinasoft/p/3819699.html javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服...
flexigrid.js flexigrid.js flexigrid.js
04-27
Flexigrid.js是一款开源的JavaScript库，主要用于创建可伸缩的、高度自定义的数据网格，它为Web开发者提供了强大的数据展示和操作功能。在网页应用中，数据网格是一种常见的组件，用于显示大量的结构化数据，并支持...
Jquery 的 Flexigrid插件 应用(1)
longandxue的专栏
05-31 355
<br /> Flexigrid – Web 2.0 Javscript Grid for jQuery<br />      可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧。<br /> <br /><br /> <br /> <br />1. 首先去官方网站下载<br />2. 在网页中必须引入三个文件;<br />    (1) jquery.js<br />    (2) Flexigrid.js<br />    (
jQuery 表格插件整理
12-08
jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery – 可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧。 Chromatable JQuery Plugin – 固定表头，可滚动内容区，内容区滚动的时候表头位置保持不变。 Ingrid, the jQuery Datagrid – 在 HTML 表格上加入列宽调整，分页，排序，行列式样等功能（演示）。 JQTreeTable – 在表格中加入树形结构 Scrollable HTML table
jQuery 表格Table插件汇总
itchuxuezhe_yang的专栏
11-25 914
jQuery 表格Table插件汇总 本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教程。希望能对大家的开发有帮助。 jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid f
JQuery 表格插件汇总
第三只眼的专栏
03-09 1198
本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教程。希望能对大家的开发有帮助。 jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽，自动适
jQuery 表格工具集
bydxyj的专栏
04-30 690
来源：http://kb.cnblogs.com/page/61712/ 作者: Paul Andrew  来源: 锐商企业CMS  发布时间: 2010-04-15 10:11  阅读: 573 次  原文链接   字体: 大 中 小 [收藏]   本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好
jqgrid-flexigrid替代优化.zip
04-20
每个码农的手里多少有几个老项目，想换皮却因修改太多感到力不从心，想用新框架又有些不可舍弃的东西，现在这款插件可完美地让项目中的列表变得高大上，支持批量勾选，支持每条自动生成搜索框，自带搜索、重置按钮，...
jquery表格插件flexigrid-1.1.zip
04-26
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
Flexigrid for jQuery
12-05
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
Hutool：Java开发者的瑞士军刀
最新发布
技术无疆
09-16 459
在Java的世界里，有这样一个工具库，它小巧而强大，功能丰富且易于使用，它就是Hutool。Hutool是一个Java工具包，旨在减少Java开发人员在开发过程中需要编写的重复代码。它就像瑞士军刀一样，为开发者提供了各种实用的工具，让开发工作更加高效。
SEAFARING靶场渗透
kknifek的博客
09-13 484
??echo '<??
Netty笔记03-组件Channel
weixin_46425661的博客
09-12 801
本文主要讲解Netty中的组件Channel、ChannelFuture和CloseFuture
Thinkphp5 + Swoole实现邮箱异步通知
Crazy_shark的博客
09-11 740
通过 Swoole 实现的异步任务处理机制，可以将耗时操作如发送邮件等操作放入后台异步执行，提升用户体验和系统性能。Swoole 的 Task 机制非常适合处理这种场景，结合 ThinkPHP 使得开发异步任务更加简单高效。
Struts2.1.6+jQuery Flexigrid 实现JSON分页与Ajax交互
本文档主要介绍了如何在Struts2.1.6框架下结合Spring、Hibernate、jQuery、Flexigrid、Thickbox和MySQL技术实现动态数据分页显示。以下是详细步骤和关键知识点： 1. **技术栈组合**: - Struts2.1.6: 作为Web MVC...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值