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