闲来无事在网上找了一个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做的分页前进后退都比较麻烦
没有在项目中采用
发表评论
-
解决Delphi截取字符串时遇到半个汉字
2012-07-06 09:52 2066演示程序中主要是用了 IsDBCSLeadByte 这个 ... -
js 学习笔记!
2012-07-06 09:46 6051.在ie 6 中 "//" 注释会 ... -
黑莓开发第三篇:常用UI组件
2012-07-03 13:44 828最低层次的UI 组件 可以处理自身的显示 用于显示各种 ... -
虚拟机随谈:解释器,树遍历解释器,基于栈与基于寄存器,大杂烩
2012-07-02 12:53 808虚拟机随谈:解释器,树遍历解释器,基于栈与基于寄存器, ... -
如何使用registerClassAlias来解决module中使用RemoteObject---第一次访问正常、第二次出错
2012-07-02 12:52 587问题:今天我在Flex的module中使用RemoteOb ... -
超级面板皮肤及其使用
2012-07-02 12:52 670画出类似于遨游那样的最大化,最小化,关闭,还原按钮的皮肤。 ... -
flex 弹出的titleWindow 隐藏标题栏
2012-07-02 12:52 1778showTopPanelTitle.titleDispla ... -
Flex中调用FileReference.download()方法的限制【已解决】
2012-07-01 10:19 1970[2011-04-21 02:11:24] 问题解决。原因 ... -
Flex自定义鼠标右键
2012-07-01 10:19 794这里写了一个简单的自定义鼠标右键,代码不难,请看注释 ... -
Flex右键菜单扫盲
2012-07-01 10:18 939怎么添加右键?在 Flex 中,只有应用程序中的顶层组件才 ... -
整合Flash Builder4.0+MyEclipse 8.6+BlazeDS+Sping 3.0+Hibernate3.3+MySQL5.5+Tomcat+JDK1.6
2012-07-01 10:18 888,设置好环境变量。 Tomcat 6.0。 去官方下 ... -
走在网页游戏开发的路上(一)
2012-06-30 16:45 718走在网页游戏开发的路 ... -
2011-10-18
2012-06-30 16:45 6612011-10-18 2011年10月18日 ... -
文启领航教育:“内幕大公开”
2012-06-30 16:45 3文启领航教育:“内幕大 ... -
2011-11-24
2012-06-30 16:45 6982011-11-24 2011年11月24日 大型多人在 ... -
FLEX和Actionscript开发FLASH游戏 10-4
2012-06-30 16:45 591FLEX和Actionscript开发FLASH游戏 10-4 ...
相关推荐
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 插件简单应用从英文版本改为简体中文版本