- 浏览: 49798 次
- 性别:
- 来自: 青岛
最新评论
关于flexigrid一点用法
- 博客分类:
- 技术杂绘
闲来无事在网上找了一个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做的分页前进后退都比较麻烦
没有在项目中采用
发表评论
-
字符串的排列--总结
2012-07-06 09:51 579题目:输入一个字符串,打印出该字符串中字符的所有排列。例如 ... -
验证整数、小数、实数、有效位小数最简单JavaScript正则表达式
2012-07-06 09:45 661输入完按回车后即可验证!(自认为最简单!) 正整数: ... -
正则表达式学习笔记
2012-07-06 09:37 617元字符: \b: 匹配一个位置,可以是一个串中间的某个位置 ... -
AndroidVirtual Devices (AVD)创建、设置
2012-07-06 09:30 9201.将android-sdk 中的to ... -
div的使用
2012-07-05 20:45 6331.div显示在屏幕中央。 ... -
Android 桌面组件【widget】初探
2012-07-03 13:43 583本来打算晚上继续 Api Demos 系列的,不过今天下午 ... -
flex datechooser 日期小例子
2012-07-02 10:38 660在这个例子中,我们讲解的是DateChooser 控件,这 ... -
Flex权威指南3学习笔记之一------界面知识(二)
2012-07-02 10:38 518使用基于条件的约束的布局 1.在viewCart按钮和ch ... -
flex 读取配置文件 与PHP交互 圆饼图
2012-07-02 10:38 612FLEX文件 teacherevalute.mxml ... -
Flex获取操作XML示例
2012-07-02 10:38 578/****** ".",&qu ... -
FlashPaper 使用经验之谈
2012-07-01 00:16 819FlashPaper 使用经验之谈 李志海 201 ... -
Parsley初次应用
2012-07-01 00:16 676Parsley是一个比较著名的Flex IoC开源项目,也 ... -
在应用中使用Ext Loader
2012-07-01 00:16 609原文:http://www.sencha.com/b ... -
jsp页面
2012-07-01 00:15 552做人,生活,学习,玩.... ...
相关推荐
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 插件简单应用从英文版本改为简体中文版本