在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:GridManager开源软件地址:https://gitee.com/baukh/GridManager开源软件介绍:GridManager [一套代码多框架运行]
优势在支持常见功能的前提下,提供了如: 导出、打印、列配置、右键菜单、行列移动、用户偏好记忆等提升用户体验的功能。 内置基础类库jTool, 对原生DOM提供了缓存机制。 支持在原生JS、jQuery、Angular 1.x、Vue、React环境下使用,一套代码多框架运行。 在框架满天飞的时代,助力前端开发人员用更少的API做更多的事情。 实现功能
安装npm install gridmanager --save 安装文件目录及说明
引用ES6+import 'gridmanager/index.css'; // 各框架通过样式文件import GridManager from 'gridmanager'; // 原生js引用方式import GridManager from 'gridmanager/vue2'; // vu2引用方式import GridManager from 'gridmanager/react'; // react引用方式import GridManager from 'gridmanager/angular-1.x'; // angular-1.x引用方式 ES5<link rel="stylesheet" href="gridmanager/index.css"><script src="gridmanager/index.js"></script> APIDemo框架版本介绍示例使用默认配置<table></table> document.querySelector('table').GM({ gridManagerName: 'demo-baseCode', ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList', ajaxType: 'POST', query: {pluginId: 1}, columnData: [ { key: 'name', text: '名称' },{ key: 'info', text: '使用说明' },{ key: 'url', text: 'url' } ]}); 使用分页<table></table> document.querySelector('table').GM({ gridManagerName: 'demo-ajaxPageCode', ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList', ajaxType: 'POST', query: {pluginId: 1}, supportAjaxPage: true, columnData: [ { key: 'name', text: 'name' },{ key: 'info', text: 'info' },{ key: 'url', text: 'url' } ]}); 调用公开方法// 刷新GM.refreshGrid('demo-ajaxPageCode');// 更新查询条件GM.setQuery('demo-ajaxPageCode', {name: 'baukh'}); 其它更多请直接访问API 数据格式
{ "data": [ { "name": "baukh", "age": "28", "createDate": "2015-03-12", "info": "野生前端程序", "operation": "修改" }, { "name": "baukh", "age": "28", "createDate": "2015-03-12", "info": "野生前端程序", "operation": "修改" }, { "name": "baukh", "age": "28", "createDate": "2015-03-12", "info": "野生前端程序", "operation": "修改" } ], totals: 1682} 皮肤
贡献者
License浏览器兼容
微信讨论群
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论