wangangie17
- 浏览: 41399 次
- 性别:
- 来自: 深圳
-
最新评论
闲来无事在网上找了一个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做的分页前进后退都比较麻烦
没有在项目中采用
分享到：
发表评论
-
C++中的字符串类型
2012-07-06 09:52 601C＋＋中字符串的两 ... -
正则表达式匹配Flash
2012-07-06 09:45 517public static string[] GetHtm ... -
正则表达式提取工具regularTools
2012-07-06 09:37 930正如王咏刚在《凌波微步》中所说的:我整天生活在控制电脑 ... -
图片左右浮动底部浮动
2012-07-05 20:45 768无标题页 ... -
Android开发之旅:应用程序基础及组件
2012-07-03 13:43 482--成功属于耐得住 ... -
flex AS中TabNavigator子项后报超出索引 commitProperties解决
2012-07-02 10:50 595width="200" height= ... -
Dom4j java编程
2012-07-02 10:50 788dom4j 是一种解析 XML 文档的开放源代码 XML ... -
flex 给DataGrid每行加上tooltip
2012-07-02 10:50 466在初始化时加上tooltip的字体大小 mx.sty ... -
CVS 版本控制环境配置指南
2012-07-01 00:31 651CVS 是应用最为广泛的版本控制系统。有大量的有关如何使用 ... -
ArcGIS在线应用介绍(12)华盛顿州地质信息门户
2012-07-01 00:31 595华盛顿州地质信息门户（Washington State G ... -
一些有用的Web或者手机UI设计工具
2012-07-01 00:31 830http://www.webjx.com/webm ... -
Flash Builder新版 - Adobe Flash Builder "Burrito"(手机项目)
2012-07-01 00:31 4961、支持Flex开发手机AIR项目（目前支持Google ... -
Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法
2012-07-01 00:31 531这段时间做个项目 ...
相关推荐
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 插件简单应用从英文版本改为简体中文版本