关于flexigrid一点用法

zha_zi

浏览: 594008 次
性别:
来自: 西安

最近访客更多访客>>

akingde

layhaokeai

sainery

一直走到黑

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

jQuery CSS JavaScript Ajax json

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

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

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

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

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

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

 <%@ 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>

要注意的是这两句

<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参数介绍

   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做的分页前进后退都比较麻烦

没有在项目中采用

flexigrid.zip (120.1 KB)
下载次数: 279

分享到：

org.hibernate.cache.NoCachingEnabledExce ... | WebLogicDeployableObject' may not be nul ...

2009-12-01 09:20
浏览 4521
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

关于flexigrid一点用法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

关于flexigrid一点用法

评论

发表评论

相关推荐

浏览器事件是冒泡还是捕获

javascript 编程反思1 new 原理

javascript 设计模式1 单例模式

facebook html5开发app 失败的原因，

jQuery zepto 用法区别

js 加载机制和defer async用法

grunt 不是内部命令

你不知道的URL中#井号用法

JS 伪数组原理详解

jquery 滚动条插件nanoScroller 的用法

h5，hybrid 开发中问题汇总

backbone中的 reuter 和histroy

animate 技术分析 raphael

Raphaeljs 插件实现任意SVG节点加载

ECMAScript 5

jQueryUI Widget 代码详解

typescript 用法介绍

window.eval 与eval 区别

jQuery 学习分析系列1 jQuery是个什么东西

Sizzle 引擎--原理与实践3

最近访客更多访客>>