加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

关于flexigrid一点用法

发布时间：2020-12-15 01:35:51 所属栏目：百科 来源：网络整理
导读：?闲来无事在网上找了一个jquery的grid插件 flexgird， 看了看大概的效果感觉挺喜欢的，想在自己的项目中使用一下，就在bolg上搜索了几篇关于flexgird的文章，按照文章上的说明一步一步来但是就是没法出来table页面上面一片空白 ，感觉很奇怪，是不是那里有问

?闲来无事在网上找了一个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,?align:?'center'},?? ??
  44. ?????????????????{display:?'信息类别',?name?:?'IC.ICNAME',?width?:?100,?? ??
  45. ?????????????????{display:?'信息热点',?name?:?'RIHOTPOINT',?width?:?60,?? ??
  46. ?????????????????{display:?'信息内容',?name?:?'RICONTENT',??
  47. ?????????????????{display:?'发布日期',?name?:?'RIDATE',?width?:?120,?? ??
  48. ?????????????????{display:?'发布作者',?name?:?'RIAUTHOR',?width?:?80,?align:?'center'}???????????????????????????????????????????????????????????????? ??
  49. ?????????????????],? ??
  50. ????????????buttons?:?[ ??
  51. ????????????????{name:?'添加',?bclass:?'add',?onpress?:?test},??
  52. ????????????????{name:?'删除',?bclass:?'delete',??
  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. ????????????colModel?:?[ ??
  88. ????????????????{display:?'ISO',?name?:?'iso',?width?:?40,?width?:?180,?align:?'left'},??
  89. ????????????????{display:?'Printable?Name',?name?:?'printable_name',??
  90. ????????????????{display:?'ISO3',?name?:?'iso3',?width?:?130,?align:?'left',?hide:?true},??
  91. ????????????????{display:?'Number?Code',?name?:?'numcode',?align:?'right'} ??
  92. ????????????????],??
  93. ????????????buttons?:?[ ??
  94. ????????????????{name:?'Add',??
  95. ????????????????{name:?'Delete',??
  96. ????????????height:?200??
  97. ????????????} ??
  98. ????????????); ??
  99. ??
  100. ????????$('b.top').click ??
  101. ????????( ??
  102. ????????????function?() ??
  103. ????????????????{ ??
  104. ????????????????????$(this).parent().toggleClass('fh'); ??
  105. ????????????????} ??
  106. ????????); ??
  107. ???? ??
  108. </script> ??
  109. ??</body> ??
  110. </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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同