关于flexigrid一点用法

 闲来无事在网上找了一个jquery的grid插件 flexgird,

看了看大概的效果感觉挺喜欢的,想在自己的项目中使用一下,就在bolg上搜索了几篇关于flexgird的文章,按照文章上的说明一步一步来但是就是没法出来table页面上面一片空白 ,感觉很奇怪,是不是那里有问题?

   最后发现在下载的压缩包里有例子,例子就在解压后的flexigrid文件夹中的index.html

这里面有各种样式的table以及使用代码

哈哈 这下不用迷茫了,随便吧例子中的代码粘贴过来 立马效果就出现了

现在我把执行通过的页面代码奉上

Java代码   
  1.  <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>   
  2.     
  3.   
  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  5. <html>   
  6.   <head>   
  7.     
  8.      <title>Flexigrid</title>   
  9.   
  10. <link rel="stylesheet" href="style.css" />   
  11. <link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css"/>   
  12. <script type="text/javascript" src="lib/jquery/jquery.js"></script>   
  13. <script type="text/javascript" src="flexigrid.js"></script>   
  14.     
  15.     <meta http-equiv="pragma" content="no-cache">   
  16.     <meta http-equiv="cache-control" content="no-cache">   
  17.     <meta http-equiv="expires" content="0">       
  18.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
  19.     <meta http-equiv="description" content="This is my page">   
  20.     <!--   
  21.     <link rel="stylesheet" type="text/css" href="styles.css">   
  22.     -->   
  23.   </head>   
  24.      
  25.   <body>   
  26.    <table id="flex1" style="display:none"></table>   
  27.   
  28.   
  29. <script type="text/javascript">   
  30.   
  31.   
  32.   
  33.             $('.flexme1').flexigrid();   
  34.             $('.flexme2').flexigrid({height:'auto',striped:false});   
  35.   
  36.             $("#flex1").flexigrid   
  37.             (   
  38.             {   
  39.             url: 'post2.php',   
  40.             dataType: 'json',   
  41.             colModel : [   
  42.                  {display: '信息编号', name : 'RINO', width : 50, sortable : true, align: 'center',hide: false},     
  43.                  {display: '信息标题', name : 'RITITLE', width : 250, sortable : true, align: 'center'},     
  44.                  {display: '信息类别', name : 'IC.ICNAME', width : 100, sortable : true, align: 'center'},     
  45.                  {display: '信息热点', name : 'RIHOTPOINT', width : 60, sortable : true, align: 'center'},     
  46.                  {display: '信息内容', name : 'RICONTENT', width : 100, sortable : true, align: 'center'},   
  47.                  {display: '发布日期', name : 'RIDATE', width : 120, sortable : true, align: 'center'},     
  48.                  {display: '发布作者', name : 'RIAUTHOR', width : 80, sortable : true, align: 'center'}                                                                   
  49.                  ],    
  50.             buttons : [   
  51.                 {name: '添加', bclass: 'add', onpress : test},   
  52.                 {name: '删除', bclass: 'delete', onpress : test},   
  53.                 {separator: true}   
  54.                 ],   
  55.             searchitems : [   
  56.                 {display: 'ISO', name : 'iso'},   
  57.                 {display: 'Name', name : 'name', isdefault: true}   
  58.                 ],   
  59.             sortname: "iso",   
  60.             sortorder: "asc",   
  61.             usepager: true,   
  62.             title: 'Countries',   
  63.             useRp: true,   
  64.             rp: 15,   
  65.             showTableToggleBtn: true,   
  66.             width: 700,   
  67.             height: 200  
  68.             }   
  69.             );   
  70.                
  71.             function test(com,grid)   
  72.             {   
  73.                 if (com=='Delete')   
  74.                     {   
  75.                         confirm('Delete ' + $('.trSelected',grid).length + ' items?')   
  76.                     }   
  77.                 else if (com=='Add')   
  78.                     {   
  79.                         alert('Add New Item');   
  80.                     }              
  81.             }   
  82.   
  83.             $("#flex2").flexigrid   
  84.             (   
  85.             {   
  86.             url: 'post2.php',   
  87.             dataType: 'json',   
  88.             colModel : [   
  89.                 {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},   
  90.                 {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},   
  91.                 {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},   
  92.                 {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},   
  93.                 {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}   
  94.                 ],   
  95.             buttons : [   
  96.                 {name: 'Add', bclass: 'add', onpress : test},   
  97.                 {name: 'Delete', bclass: 'delete', onpress : test},   
  98.                 {separator: true}   
  99.                 ],   
  100.             searchitems : [   
  101.                 {display: 'ISO', name : 'iso'},   
  102.                 {display: 'Name', name : 'name', isdefault: true}   
  103.                 ],   
  104.             sortname: "iso",   
  105.             sortorder: "asc",   
  106.             usepager: true,   
  107.             title: 'Countries',   
  108.             useRp: true,   
  109.             rp: 15,   
  110.             showTableToggleBtn: true,   
  111.             width: 700,   
  112.             height: 200  
  113.             }   
  114.             );   
  115.   
  116.         $('b.top').click   
  117.         (   
  118.             function ()   
  119.                 {   
  120.                     $(this).parent().toggleClass('fh');   
  121.                 }   
  122.         );   
  123.        
  124. </script>   
  125.   </body>   
  126. </html>  

 要注意的是这两句

Java代码   
  1. <link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css"/>   
  2. <script type="text/javascript" src="lib/jquery/jquery.js"></script>   
  3. <script type="text/javascript" src="flexigrid.js"></script>  

 根据你的flexigrid.css,jquery.js,flexigrid.js存放的实际位置修改。

 

flexigrid参数介绍

 

Java代码   
  1.  1. height: 200//flexigrid插件的高度,单位为px     
  2.  2. width: ‘auto’, //宽度值,auto表示根据每列的宽度自动计算     
  3.  3. striped: true//是否显示斑纹效果,默认是奇偶交互的形式     
  4.  4. novstripe: false,     
  5.  5. minwidth: 30//列的最小宽度     
  6.  6. minheight: 80//列的最小高度     
  7.  7. resizable: true//是否可伸缩     
  8.  8. url: false//ajax方式对应的url地址     
  9.  9. method: ‘POST’, // 数据发送方式     
  10. 10. dataType: ‘xml’, // 数据加载的类型     
  11. 11. errormsg: ‘Connection Error’,//错误提升信息     
  12. 12. usepager: false//是否分页     
  13. 13. nowrap: true//是否不换行     
  14. 14. page: 1//默认当前页     
  15. 15. total: 1//总页面数     
  16. 16. useRp: true//是否可以动态设置每页显示的结果数     
  17. 17. rp: 15// 每页默认的结果数     
  18. 18. rpOptions: [10,15,20,25,40],//可选择设定的每页结果数     
  19. 19. title: false,//是否包含标题     
  20. 20. pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式     
  21. 21. procmsg: ‘Processing, please wait …’,//正在处理的提示信息     
  22. 22. query: ”,//搜索查询的条件     
  23. 23. qtype: ”,//搜索查询的类别     
  24. 24. nomsg: ‘No items’,//无结果的提示信息     
  25. 25. minColToggle: 1//minimum allowed column to be hidden     
  26. 26. showToggleBtn: true//show or hide column toggle popup     
  27. 27. hideOnSubmit: true,//隐藏提交     
  28. 28. autoload: true,//自动加载     
  29. 29. blockOpacity: 0.5,//透明度设置     
  30. 30. onToggleCol: false,//当在行之间转换时     
  31. 31. onChangeSort: false,//当改变排序时     
  32. 32. onSuccess: false,//成功后执行     
  33. 33. onSubmit: false // 调用自定义的计算函数     

 

后来发现flexigrid是采用ajax做的分页前进后退都比较麻烦

没有在项目中采用

  • flexigrid.zip (120.1 KB)
  • 下载次数: 131

你可能感兴趣的:(json,url,delete,processing,autoload,stylesheet)