关于flexigrid一点用法

最新推荐文章于 2020-01-09 10:40:33 发布
最新推荐文章于 2020-01-09 10:40:33 发布
阅读量2.9k 收藏
点赞数
分类专栏： Java汇集 文章标签： stylesheet delete processing autoload url json

 闲来无事在网上找了一个jquery的grid插件 flexgird，

看了看大概的效果感觉挺喜欢的，想在自己的项目中使用一下，就在bolg上搜索了几篇关于flexgird的文章，按照文章上的说明一步一步来但是就是没法出来table页面上面一片空白 ，感觉很奇怪，是不是那里有问题？

   最后发现在下载的压缩包里有例子，例子就在解压后的flexigrid文件夹中的index.html

这里面有各种样式的table以及使用代码

哈哈 这下不用迷茫了，随便吧例子中的代码粘贴过来 立马效果就出现了

现在我把执行通过的页面代码奉上

Java代码   
  1.  <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>   
  2.     
  3.   
  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  5. <html>   
  6.   <head>   
  7.     
  8.      <title>Flexigrid</title>   
  9.   
  10. <link rel="stylesheet" href="style.css" />   
  11. <link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css"/>   
  12. <script type="text/javascript" src="lib/jquery/jquery.js"></script>   
  13. <script type="text/javascript" src="flexigrid.js"></script>   
  14.     
  15.     <meta http-equiv="pragma" content="no-cache">   
  16.     <meta http-equiv="cache-control" content="no-cache">   
  17.     <meta http-equiv="expires" content="0">       
  18.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
  19.     <meta http-equiv="description" content="This is my page">   
  20.     <!--   
  21.     <link rel="stylesheet" type="text/css" href="styles.css">   
  22.     -->   
  23.   </head>   
  24.      
  25.   <body>   
  26.    <table id="flex1" style="display:none"></table>   
  27.   
  28.   
  29. <script type="text/javascript">   
  30.   
  31.   
  32.   
  33.             $('.flexme1').flexigrid();   
  34.             $('.flexme2').flexigrid({height:'auto',striped:false});   
  35.   
  36.             $("#flex1").flexigrid   
  37.             (   
  38.             {   
  39.             url: 'post2.php',   
  40.             dataType: 'json',   
  41.             colModel : [   
  42.                  {display: '信息编号', name : 'RINO', width : 50, sortable : true, align: 'center',hide: false},     
  43.                  {display: '信息标题', name : 'RITITLE', width : 250, sortable : true, align: 'center'},     
  44.                  {display: '信息类别', name : 'IC.ICNAME', width : 100, sortable : true, align: 'center'},     
  45.                  {display: '信息热点', name : 'RIHOTPOINT', width : 60, sortable : true, align: 'center'},     
  46.                  {display: '信息内容', name : 'RICONTENT', width : 100, sortable : true, align: 'center'},   
  47.                  {display: '发布日期', name : 'RIDATE', width : 120, sortable : true, align: 'center'},     
  48.                  {display: '发布作者', name : 'RIAUTHOR', width : 80, sortable : true, align: 'center'}                                                                   
  49.                  ],    
  50.             buttons : [   
  51.                 {name: '添加', bclass: 'add', onpress : test},   
  52.                 {name: '删除', bclass: 'delete', onpress : test},   
  53.                 {separator: true}   
  54.                 ],   
  55.             searchitems : [   
  56.                 {display: 'ISO', name : 'iso'},   
  57.                 {display: 'Name', name : 'name', isdefault: true}   
  58.                 ],   
  59.             sortname: "iso",   
  60.             sortorder: "asc",   
  61.             usepager: true,   
  62.             title: 'Countries',   
  63.             useRp: true,   
  64.             rp: 15,   
  65.             showTableToggleBtn: true,   
  66.             width: 700,   
  67.             height: 200  
  68.             }   
  69.             );   
  70.                
  71.             function test(com,grid)   
  72.             {   
  73.                 if (com=='Delete')   
  74.                     {   
  75.                         confirm('Delete ' + $('.trSelected',grid).length + ' items?')   
  76.                     }   
  77.                 else if (com=='Add')   
  78.                     {   
  79.                         alert('Add New Item');   
  80.                     }              
  81.             }   
  82.   
  83.             $("#flex2").flexigrid   
  84.             (   
  85.             {   
  86.             url: 'post2.php',   
  87.             dataType: 'json',   
  88.             colModel : [   
  89.                 {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},   
  90.                 {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},   
  91.                 {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},   
  92.                 {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},   
  93.                 {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}   
  94.                 ],   
  95.             buttons : [   
  96.                 {name: 'Add', bclass: 'add', onpress : test},   
  97.                 {name: 'Delete', bclass: 'delete', onpress : test},   
  98.                 {separator: true}   
  99.                 ],   
  100.             searchitems : [   
  101.                 {display: 'ISO', name : 'iso'},   
  102.                 {display: 'Name', name : 'name', isdefault: true}   
  103.                 ],   
  104.             sortname: "iso",   
  105.             sortorder: "asc",   
  106.             usepager: true,   
  107.             title: 'Countries',   
  108.             useRp: true,   
  109.             rp: 15,   
  110.             showTableToggleBtn: true,   
  111.             width: 700,   
  112.             height: 200  
  113.             }   
  114.             );   
  115.   
  116.         $('b.top').click   
  117.         (   
  118.             function ()   
  119.                 {   
  120.                     $(this).parent().toggleClass('fh');   
  121.                 }   
  122.         );   
  123.        
  124. </script>   
  125.   </body>   
  126. </html>  
 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
     <title>Flexigrid</title>

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css"/>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>
 
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>
   <table id="flex1" style="display:none"></table>


<script type="text/javascript">



			$('.flexme1').flexigrid();
			$('.flexme2').flexigrid({height:'auto',striped:false});

			$("#flex1").flexigrid
			(
			{
			url: 'post2.php',
			dataType: 'json',
			colModel : [
				 {display: '信息编号', name : 'RINO', width : 50, sortable : true, align: 'center',hide: false},  
                 {display: '信息标题', name : 'RITITLE', width : 250, sortable : true, align: 'center'},  
                 {display: '信息类别', name : 'IC.ICNAME', width : 100, sortable : true, align: 'center'},  
                 {display: '信息热点', name : 'RIHOTPOINT', width : 60, sortable : true, align: 'center'},  
            	 {display: '信息内容', name : 'RICONTENT', width : 100, sortable : true, align: 'center'},
              	 {display: '发布日期', name : 'RIDATE', width : 120, sortable : true, align: 'center'},  
                 {display: '发布作者', name : 'RIAUTHOR', width : 80, sortable : true, align: 'center'}                                                                
                 ], 
			buttons : [
				{name: '添加', bclass: 'add', onpress : test},
				{name: '删除', bclass: 'delete', onpress : test},
				{separator: true}
				],
			searchitems : [
				{display: 'ISO', name : 'iso'},
				{display: 'Name', name : 'name', isdefault: true}
				],
			sortname: "iso",
			sortorder: "asc",
			usepager: true,
			title: 'Countries',
			useRp: true,
			rp: 15,
			showTableToggleBtn: true,
			width: 700,
			height: 200
			}
			);
			
			function test(com,grid)
			{
				if (com=='Delete')
					{
						confirm('Delete ' + $('.trSelected',grid).length + ' items?')
					}
				else if (com=='Add')
					{
						alert('Add New Item');
					}			
			}

			$("#flex2").flexigrid
			(
			{
			url: 'post2.php',
			dataType: 'json',
			colModel : [
				{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
				{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
				{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
				{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
				{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
				],
			buttons : [
				{name: 'Add', bclass: 'add', onpress : test},
				{name: 'Delete', bclass: 'delete', onpress : test},
				{separator: true}
				],
			searchitems : [
				{display: 'ISO', name : 'iso'},
				{display: 'Name', name : 'name', isdefault: true}
				],
			sortname: "iso",
			sortorder: "asc",
			usepager: true,
			title: 'Countries',
			useRp: true,
			rp: 15,
			showTableToggleBtn: true,
			width: 700,
			height: 200
			}
			);

		$('b.top').click
		(
			function ()
				{
					$(this).parent().toggleClass('fh');
				}
		);
	
</script>
  </body>
</html>

 要注意的是这两句

Java代码   
  1. <link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css"/>   
  2. <script type="text/javascript" src="lib/jquery/jquery.js"></script>   
  3. <script type="text/javascript" src="flexigrid.js"></script>  
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css"/>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>

 根据你的flexigrid.css,jquery.js,flexigrid.js存放的实际位置修改。

 

flexigrid参数介绍

 

Java代码   
  1.  1. height: 200, //flexigrid插件的高度，单位为px     
  2.  2. width: ‘auto’, //宽度值，auto表示根据每列的宽度自动计算     
  3.  3. striped: true, //是否显示斑纹效果，默认是奇偶交互的形式     
  4.  4. novstripe: false,     
  5.  5. minwidth: 30, //列的最小宽度     
  6.  6. minheight: 80, //列的最小高度     
  7.  7. resizable: true, //是否可伸缩     
  8.  8. url: false, //ajax方式对应的url地址     
  9.  9. method: ‘POST’, // 数据发送方式     
  10. 10. dataType: ‘xml’, // 数据加载的类型     
  11. 11. errormsg: ‘Connection Error’,//错误提升信息     
  12. 12. usepager: false, //是否分页     
  13. 13. nowrap: true, //是否不换行     
  14. 14. page: 1, //默认当前页     
  15. 15. total: 1, //总页面数     
  16. 16. useRp: true, //是否可以动态设置每页显示的结果数     
  17. 17. rp: 15, // 每页默认的结果数     
  18. 18. rpOptions: [10,15,20,25,40],//可选择设定的每页结果数     
  19. 19. title: false,//是否包含标题     
  20. 20. pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式     
  21. 21. procmsg: ‘Processing, please wait …’,//正在处理的提示信息     
  22. 22. query: ”,//搜索查询的条件     
  23. 23. qtype: ”,//搜索查询的类别     
  24. 24. nomsg: ‘No items’,//无结果的提示信息     
  25. 25. minColToggle: 1, //minimum allowed column to be hidden     
  26. 26. showToggleBtn: true, //show or hide column toggle popup     
  27. 27. hideOnSubmit: true,//隐藏提交     
  28. 28. autoload: true,//自动加载     
  29. 29. blockOpacity: 0.5,//透明度设置     
  30. 30. onToggleCol: false,//当在行之间转换时     
  31. 31. onChangeSort: false,//当改变排序时     
  32. 32. onSuccess: false,//成功后执行     
  33. 33. onSubmit: false // 调用自定义的计算函数     
   1. height: 200, //flexigrid插件的高度，单位为px  
   2. width: ‘auto’, //宽度值，auto表示根据每列的宽度自动计算  
   3. striped: true, //是否显示斑纹效果，默认是奇偶交互的形式  
   4. novstripe: false,  
   5. minwidth: 30, //列的最小宽度  
   6. minheight: 80, //列的最小高度  
   7. resizable: true, //是否可伸缩  
   8. url: false, //ajax方式对应的url地址  
   9. method: ‘POST’, // 数据发送方式  
  10. dataType: ‘xml’, // 数据加载的类型  
  11. errormsg: ‘Connection Error’,//错误提升信息  
  12. usepager: false, //是否分页  
  13. nowrap: true, //是否不换行  
  14. page: 1, //默认当前页  
  15. total: 1, //总页面数  
  16. useRp: true, //是否可以动态设置每页显示的结果数  
  17. rp: 15, // 每页默认的结果数  
  18. rpOptions: [10,15,20,25,40],//可选择设定的每页结果数  
  19. title: false,//是否包含标题  
  20. pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式  
  21. procmsg: ‘Processing, please wait …’,//正在处理的提示信息  
  22. query: ”,//搜索查询的条件  
  23. qtype: ”,//搜索查询的类别  
  24. nomsg: ‘No items’,//无结果的提示信息  
  25. minColToggle: 1, //minimum allowed column to be hidden  
  26. showToggleBtn: true, //show or hide column toggle popup  
  27. hideOnSubmit: true,//隐藏提交  
  28. autoload: true,//自动加载  
  29. blockOpacity: 0.5,//透明度设置  
  30. onToggleCol: false,//当在行之间转换时  
  31. onChangeSort: false,//当改变排序时  
  32. onSuccess: false,//成功后执行  
  33. onSubmit: false // 调用自定义的计算函数

 

后来发现flexigrid是采用ajax做的分页前进后退都比较麻烦

没有在项目中采用

eidolon8
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
用flexigrid实现分页显示 二
Dean Chen的专栏
11-02 4745
一个可以重用UI的felxigrid 分页实现
使用FlexiGrid实现Extjs表格效果方法分享
12-11
近一段时间Extjs真的是风光无限好，只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它，不过兄弟我可是不敢，原因很简单：太大/太笨/源码不好调试。但是对于Extjs漂亮的表格与功能的强大，实在是让我...
FlexiGrid使用手册
热门推荐
月亮的技术博客
03-19 1万+
FlexiGrid使用手册 一、概览 Flexigrid是一个基于jQuery开发的Grid，与 Ext Gird类似。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。 它的功能包括： s   调整列宽 s   合并列标题 s   自定义查找 s   隐藏列 s   隔行变色 s   行扩展事件 s   动态注册外部参数 s   分页
Jquery插件FLexiGrid完全配置
搓搓那年时光静好
01-20 1946
首先.去下载FlexGrid http://www.flexigrid.info/ ，下载完成后.解压开有__MACOSX和flexigrid两个文件夹 ，主要使用flexigrid里面的文件        flexgrid文件夹下文件如下 ：       准备工作完成后 真正工作开始了 在MyEclipse下新建Webproject.. 把flexigrid包下所有的文件拷贝到WebR
JQuery 插件FlexiGrid 之完全配置与使用
axs441702的博客
08-07 171
首先.去下载FlexGridhttp://www.flexigrid.info/ 下载完成后.解压开有__MACOSX和flexigrid两个文件夹，主要使用flexigrid里面的文件 jquery.js、flexigrid.css、flexigrid.js 三个主要文件自己要根据自己的文件路径.去引入css\js文件 如： <link rel="styl...
jquery+flexigrid使用方法.pdf
最新发布
11-27
jQuery与Flexigrid的结合使用在Web开发中常用于创建动态、交互性强的数据表格。Flexigrid是一款基于jQuery的插件，它提供了一种轻量级的方式来展示和操作网格数据，具有分页、排序、搜索等功能，特别适用于数据密集...
Codeigniter Grid 使用方法 (flexigrid)
11-30
Codeigniter Grid 使用方法 (flexigrid) 博客分类： Codeigniter / CakePHP ASPRailsRubyPHPGoogle 来源：http://codeigniter.com/forums/viewthread/75326/P0/ Updated: 6 September 2008 Although I love CI, ...
flexigrid 参数说明
09-05
8. `url`：通过ajax方式获取数据的URL地址，如果设置为false，表示不使用Ajax加载数据。 9. `method`：发送数据的方式，如'POST'或'GET'。默认为'POST'。 10. `dataType`：指定服务器返回数据的类型，如'xml'、'...
基于jQuery的FlexiGrid的插件使用和改造
gundumw100的专栏
04-10 1993
已不推荐下载，如要下载去这个连接下载最新的 http://gundumw100.iteye.com/admin/blogs/545610 http://www.cnblogs.com/xuanye/archive/2009/11/04/Xuanye_jQuery_FlexiGrid.html http://www.cnblogs.com/xuanye/archive/2009/11/08/Xu
flexigrid列表自适应宽度
01-07
我们都知道flexigrid表格插件的列宽只能设为固定的值，不能使用百分比来自适应窗口的变化。 本例通过修改flexigrid的源代码来实现列宽的自适应变化。如下使用:{display:'XXX',name:'XXX',width:'30%',sortable:false,align:center',hide: false},内附使用说明txt，这个是本人自己修改的，不足之处请见谅。
jQuery Table 系列:Flexigrid概述与基本操作
行成于思，形之于文
05-20 672
Flexigrid 采用Ext风格的外观，代码简洁 如何在Asp.Net  中应用，可参考 http://ddtbnt.codeplex.com/  如何在Asp.net MVC 应用，可参考 http://www.codeproject.com/Articles/30588/ASP-NET-MVC-Flexigrid-sample
Flexigrid使用说明
Simple、
09-13 360
项目用到这玩意，像样的API都是英文的，英文不好，所以经过各种搜集，flexigrid就整理了这么多用得上的东西，用不上的没有整理进来。   flexigrid参数说明:     height: 200, //flexigrid插件的高度，单位为px     width: 'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题     str...
Flexigrid系列使用教程（一）前台代码及参数说明
Mchange的专栏
05-28 1768
Flexigrid系列使用教程（一）前台代码及参数说明 本教程从零开始介绍Flexigrid的使用方法，记录了作者学习中的点点滴滴，实例主要是在.net mvc框架下实现的，废话不多说了，先看一下Flexigrid的效果图吧。  一、首先简单介绍一下flexigrid： 1、主要特性： Flexigrid是Jquery家族中table类或grid类的一员，主
element 表格出现滚动条时，出现错位问题
weixin_41700532的博客
01-09 7789
最近使用element表格，在表格出现滚动条的时候，发现线对不齐，如图： 这是因为表头预留的滚动条位置跟表内容的宽度不一样； 解决方法： 第一种： body .el-table th.gutter { display: table-cell!important; } 第二种： body .el-table--scrollable-y { .el-table__body-wr...
flexigrid自定义绑定数据源
weixin_43842590的博客
01-18 443
flexAddData  var testData = { "page": 1, "total": 20, "rows": [ {"cell" : ["A", "a group", "0", "d"]}, {"cell" : ["B", "b group", &quot
Struts2整合jQuery Flexigrid实现数据网格详细教程
在JavaScript中，使用jQuery选择器找到表格元素，并调用`.flexigrid()`方法进行初始化。设置`url`指向获取数据的后台接口，`dataType`指定数据类型（通常是JSON），并定义`colModel`来指定列的显示方式和排序等属性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值