123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <link rel="stylesheet" type="text/css" href="../css/gm.css">
- <script type="text/javascript" src="https://www.lovejavascript.com/js/jquery-2.1.4.min.js"></script>
- <script type="text/javascript" src="../js/gm.js"></script>
- <title>GridManager:jquery环境下渲染</title>
- <style>
- html, body{
- width: 100%;
- height: 100%;
- overflow-x:hidden;
- margin: 0px;
- padding: 0px;
- }
- </style>
- </head>
- <body>
- <div class="dialog-demo">
- <table grid-manager="demoOne"></table>
- </div>
- <script type="text/javascript" >
- $('table').GM({
- gridManagerName: 'test'
- // ,disableCache:true
- ,height: '300px'
- ,supportAjaxPage:true
- ,ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList'
- ,ajaxType: 'POST'
- ,query: {pluginId: 1}
- ,pageSize:20
- ,columnData: [{
- key: 'name',
- remind: 'the name',
- width: '100px',
- text: '名称',
- sorting: 'DESC'
- },{
- key: 'info',
- remind: 'the info',
- text: '使用说明',
- sorting: ''
- },{
- key: 'url',
- remind: 'the url',
- text: 'url'
- },{
- key: 'createDate',
- remind: 'the createDate',
- text: '创建时间',
- template: function(createDate, rowObject){
- return new Date(createDate).format('YYYY-MM-DD HH:mm:ss');
- }
- },{
- key: 'lastDate',
- remind: 'the lastDate',
- text: '最后修改时间',
- template: function(lastDate, rowObject){
- return new Date(lastDate).format('YYYY-MM-DD HH:mm:ss');
- }
- },{
- key: 'action',
- remind: 'the action',
- text: '操作',
- template: function(action, rowObject){
- return '<span class="plugin-action edit-action" learnLink-id="'+rowObject.id+'">编辑</span>'
- +'<span class="plugin-action del-action" learnLink-id="'+rowObject.id+'">删除</span>';
- }
- }
- ]
- // 分页前事件
- ,pagingBefore: function(query){
- console.log('pagingBefore', query);
- }
- // 分页后事件
- ,pagingAfter: function(data){
- console.log('pagingAfter', data);
- }
- // 排序前事件
- ,sortingBefore: function (data) {
- console.log('sortBefore', data);
- }
- // 排序后事件
- ,sortingAfter: function (data) {
- console.log('sortAfter', data);
- }
- // 宽度调整前事件
- ,adjustBefore: function (event) {
- console.log('adjustBefore', event);
- }
- // 宽度调整后事件
- ,adjustAfter: function (event) {
- console.log('adjustAfter', event);
- }
- // 拖拽前事件
- ,dragBefore: function (event) {
- console.log('dragBefore', event);
- }
- // 拖拽后事件
- ,dragAfter: function (event) {
- console.log('dragAfter', event);
- }
- });
- // 日期格式化,不是插件的代码,只用于处理时间格式化
- Date.prototype.format = function(fmt){
- var o = {
- "M+": this.getMonth() + 1, //月份
- "D+": this.getDate(), //日
- "d+": this.getDate(), //日
- "H+": this.getHours(), //小时
- "h+": this.getHours(), //小时
- "m+": this.getMinutes(), //分
- "s+": this.getSeconds(), //秒
- "q+": Math.floor((this.getMonth() + 3) / 3), //季度
- "S": this.getMilliseconds() //毫秒
- };
- if (/([Y,y]+)/.test(fmt)){
- fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
- }
- for (var k in o){
- if(new RegExp("(" + k + ")").test(fmt)){
- fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
- }
- }
- return fmt;
- }
- </script>
- </body>
- </html>
|