关于flexigrid一点用法
闲来无事在网上找了一个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做的分页前进后退都比较麻烦
没有在项目中采用