- 浏览: 41771 次
最新评论
闲来无事在网上找了一个jquery的grid插件 flexgird,
看了看大概的效果感觉挺喜欢的,想在自己的项目中使用一下,就在bolg上搜索了几篇关于flexgird的文章,按照文章上的说明一步一步来但是就是没法出来table页面上面一片空白 ,感觉很奇怪,是不是那里有问题?
最后发现在下载的压缩包里有例子,例子就在解压后的flexigrid文件夹中的index.html
这里面有各种样式的table以及使用代码
哈哈 这下不用迷茫了,随便吧例子中的代码粘贴过来 立马效果就出现了
现在我把执行通过的页面代码奉上
Flexigrid
-->
flex1" style="display:none">
$('.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');
}
);
Flexigrid --> flex1" style="display:none"> $('.flexme1').flexigrid(); $('.flexme2').flexigrid({height:'auto',striped:fal se}); $("#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'); } );
要注意的是这两句 根据你的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 // 调用自定义的计算函数
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做的分页前进后退都比较麻烦
没有在项目中采用
发表评论
-
“千年传承,再续辉煌”--广东阳江漠阳剑派
2014-10-31 00:33 1重剑无锋,大音希声,周星驰说折凳是最好的武器,我说看似嘻 ... -
数组、字符串
2012-07-06 09:51 7841 一维数组 数 ... -
java中正则表达式运用实例(用String类的matches方法演示)
2012-07-06 09:44 1473java中正则表达式运用实例(参看java中正则表达式运用 ... -
java 正则表达式
2012-07-06 09:37 728[b]Java [/b][b]正则表达式 [/b]在计算机 ... -
Flash CS5 用户自定义Button组件
2012-07-06 09:29 13152010/12/24 Flash CS5 用户自定义But ... -
自己写的自动完成js插件源码
2012-07-05 20:44 622经测试,此插件兼容ie,chrome,firefox。 / ... -
005_《Delphi6组件大全》
2012-07-03 13:42 999Delphi 教程系列书籍 (005) 《Delphi6组 ... -
005_《Delphi6组件大全》
2012-07-03 12:16 592Delphi 教程系列书籍 (005) 《Delphi6组 ... -
jsp页面
2012-07-02 10:12 707做人,生活,学习,玩.... ... -
Mate-基于标签的框架
2012-07-02 10:12 775Mate 将会成为Flex领域的另一个热点。它使用设置(c ... -
Flex中要想使图表的横坐标轴标签成45度显示(2)
2012-07-02 10:11 837从外部引入样式 1.在外部src/assets目录文 ... -
Flex获取操作XML示例
2012-07-01 09:32 691/****** ".",&qu ... -
The architecture of Flex and Java applications two (Flex 和 Java 应用程序架构 2)
2012-07-01 09:31 948Flex and Java application ... -
Flex编程学习基础
2012-07-01 09:31 755Flex是Adobe公司推出 ... -
使用HTTPService读取远程XML文件为TREE赋值的例子
2012-07-01 09:31 717在FLEX4中 使用一个HTTPService 读取远程的 ... -
flex 通过HTTPService与php通信
2012-07-01 09:31 790最近研究HTTPService与php通信,去网上查了好多 ... -
解决Flex4 发布后访问 初始化极其缓慢的问题
2012-06-30 11:16 1382解决Flex4 发布后访问 初始化极其缓慢的问题 2011年 ... -
flex builder 3, flex builder 4下载与安装
2012-06-30 11:16 941flex builder 3, flex builder 4 ... -
Flex4之使用ActionScript构建组件
2012-06-30 11:16 572Flex4之使用ActionScript构 ... -
flex 开源项目组件大全
2012-06-30 11:16 1115flex 开源项目组件大全 2010年09月13日 Fl ...
相关推荐
FlexiGrid使用手册,主要介绍FlexiGrid的主要属性和使用方法。
jquery+flexigrid使用方法.pdfjquery+flexigrid使用方法.pdf
Flexigrid demo
jquery flexigrid;jquery flexigrid
flexigrid.jsflexigrid.jsflexigrid.jsflexigrid.jsflexigrid.jsflexigrid.jsflexigrid.js
FlexiGrid配置与使用说明,不错的文档
flexigrid.js flexigrid.css
Codeigniter Grid 使用方法 (flexigrid) 博客分类: Codeigniter / CakePHP ASPRailsRubyPHPGoogle 来源:http://codeigniter.com/forums/viewthread/75326/P0/ Updated: 6 September 2008 Although I love CI, ...
FlexiGrid(js版本)
FlexiGrid使用教程
《修改jQuery表格插件flexigrid源码添加自定义功能》文章配套代码http://blog.csdn.net/neareast/article/details/12904393,对jquery表格插件flexigrid的源码进行修改,增加了几个自定义功能,对其功能进行了增强。...
此项目是struts2+json+flexigrid的完整实例,可帮助你对flexigrid快速上手,项目下载后直接导入自己的工程即可,所用jar包会另传,因为超出上传限制,还请理解。
flexigrid删除实例flexigrid删除实例flexigrid删除实例flexigrid删除实例
Flexigrid-表格,所属jquery
Flexigrid它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
我们都知道flexigrid表格插件的列宽只能设为固定的值,不能使用百分比来自适应窗口的变化。 本例通过修改flexigrid的源代码来实现列宽的自适应变化。如下使用:{display:'XXX',name:'XXX',width:'30%',sortable:...
jsp中flexigrid插件在ie下样式问题
对于flexigrid的使用,各个参数的意义应该不用解释,网上资料很多。插件接收的数据格式对于刚接触的人来说是个麻烦,这是一位兄台的整理,不尽完美但会告诉你如何封装格式。
FlexiGrid 插件简单应用从英文版本改为简体中文版本