关于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做的分页前进后退都比较麻烦
　　没有在项目中采用