表格管理插件
npm install jingdata-grid-manager2!image




javascript
npm install gridmanager --save
`引用
$3
`
import 'gridmanager/css/gm.css';
import GridManager from 'gridmanager';
`$3
`
`API
- APIDemo
- 简单的示例
- 复杂的示例相关链接
- GridManager by Angular 1.x
- GridManager by Vue
- GridManager by React示例
$3
`html
`
`javascript
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'
}
]
});
`$3
`html
`
`javascript
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'
}
]
});
`$3
`javascript
// 刷新
GM.refreshGrid('demo-ajaxPageCode');// 更新查询条件
GM.setQuery('demo-ajaxPageCode', {name: 'baukh'});
`其它更多请直接访问API
数据格式
> 这是标准格式, 如果返回格式不同。可以通过参数或responseHandler进行修改。 具体请参考API`javascript
{
"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
}
``BoWang816 | luchyrabbit | xtfan21 | gaochaodd | silence717 | heriky |