jquery.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <link rel="stylesheet" type="text/css" href="../css/gm.css">
  6. <script type="text/javascript" src="https://www.lovejavascript.com/js/jquery-2.1.4.min.js"></script>
  7. <script type="text/javascript" src="../js/gm.js"></script>
  8. <title>GridManager:jquery环境下渲染</title>
  9. <style>
  10. html, body{
  11. width: 100%;
  12. height: 100%;
  13. overflow-x:hidden;
  14. margin: 0px;
  15. padding: 0px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div class="dialog-demo">
  21. <table grid-manager="demoOne"></table>
  22. </div>
  23. <script type="text/javascript" >
  24. $('table').GM({
  25. gridManagerName: 'test'
  26. // ,disableCache:true
  27. ,height: '300px'
  28. ,supportAjaxPage:true
  29. ,ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList'
  30. ,ajaxType: 'POST'
  31. ,query: {pluginId: 1}
  32. ,pageSize:20
  33. ,columnData: [{
  34. key: 'name',
  35. remind: 'the name',
  36. width: '100px',
  37. text: '名称',
  38. sorting: 'DESC'
  39. },{
  40. key: 'info',
  41. remind: 'the info',
  42. text: '使用说明',
  43. sorting: ''
  44. },{
  45. key: 'url',
  46. remind: 'the url',
  47. text: 'url'
  48. },{
  49. key: 'createDate',
  50. remind: 'the createDate',
  51. text: '创建时间',
  52. template: function(createDate, rowObject){
  53. return new Date(createDate).format('YYYY-MM-DD HH:mm:ss');
  54. }
  55. },{
  56. key: 'lastDate',
  57. remind: 'the lastDate',
  58. text: '最后修改时间',
  59. template: function(lastDate, rowObject){
  60. return new Date(lastDate).format('YYYY-MM-DD HH:mm:ss');
  61. }
  62. },{
  63. key: 'action',
  64. remind: 'the action',
  65. text: '操作',
  66. template: function(action, rowObject){
  67. return '<span class="plugin-action edit-action" learnLink-id="'+rowObject.id+'">编辑</span>'
  68. +'<span class="plugin-action del-action" learnLink-id="'+rowObject.id+'">删除</span>';
  69. }
  70. }
  71. ]
  72. // 分页前事件
  73. ,pagingBefore: function(query){
  74. console.log('pagingBefore', query);
  75. }
  76. // 分页后事件
  77. ,pagingAfter: function(data){
  78. console.log('pagingAfter', data);
  79. }
  80. // 排序前事件
  81. ,sortingBefore: function (data) {
  82. console.log('sortBefore', data);
  83. }
  84. // 排序后事件
  85. ,sortingAfter: function (data) {
  86. console.log('sortAfter', data);
  87. }
  88. // 宽度调整前事件
  89. ,adjustBefore: function (event) {
  90. console.log('adjustBefore', event);
  91. }
  92. // 宽度调整后事件
  93. ,adjustAfter: function (event) {
  94. console.log('adjustAfter', event);
  95. }
  96. // 拖拽前事件
  97. ,dragBefore: function (event) {
  98. console.log('dragBefore', event);
  99. }
  100. // 拖拽后事件
  101. ,dragAfter: function (event) {
  102. console.log('dragAfter', event);
  103. }
  104. });
  105. // 日期格式化,不是插件的代码,只用于处理时间格式化
  106. Date.prototype.format = function(fmt){
  107. var o = {
  108. "M+": this.getMonth() + 1, //月份
  109. "D+": this.getDate(), //日
  110. "d+": this.getDate(), //日
  111. "H+": this.getHours(), //小时
  112. "h+": this.getHours(), //小时
  113. "m+": this.getMinutes(), //分
  114. "s+": this.getSeconds(), //秒
  115. "q+": Math.floor((this.getMonth() + 3) / 3), //季度
  116. "S": this.getMilliseconds() //毫秒
  117. };
  118. if (/([Y,y]+)/.test(fmt)){
  119. fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  120. }
  121. for (var k in o){
  122. if(new RegExp("(" + k + ")").test(fmt)){
  123. fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  124. }
  125. }
  126. return fmt;
  127. }
  128. </script>
  129. </body>
  130. </html>