前言
GridManager是一款快速、灵活的对Table标签进行实例化,让Table标签充满活力的前端表格组件,基于原生js实现, 不依赖任何框架但却可以应用在任何框架内,支持React框架、Vue2框架以及Angular1.x框架,其具有丰富的配置功能,满足日常表格业务需要。
使用方式
-
安装
npm install gridmanager --save -
引入
import 'gridmanager/index.css';
import GridManager from 'gridmanager';
或
<link rel="stylesheet" type="text/css" href="gridmanager/index.css"/>
<script type="text/javascript" src="gridmanager/index.js"></script>
简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://gridmanager.lovejavascript.com/node_modules/gridmanager/index.css"/>
</head>
<body>
<table id='table-demo-baseCode'></table>
</body>
<script type="text/javascript" src="https://gridmanager.lovejavascript.com/node_modules/gridmanager/index.js"></script>
<script>
document.querySelector('#table-demo-baseCode').GM({
gridManagerName: 'demo-baseCode',
ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
ajaxType: 'POST',
columnData: [
{
key: 'name',
text: '名称'
},{
key: 'info',
text: '说明'
},{
key: 'url',
text: 'url'
}
]
});
</script>
</html>
API相关
最基本的配置项:
- gridManagerName: 表格的唯一名称
- columnData:表格的列配置项
- ajaxData:表格请求数据方法
数据获取
在获取数据的方式上,使用ajaxData属性,该属性默认是undefine,支持url string,response data,function三种类型,其中function类型支持返回url string、response data,以及promise,下面我们来看每个类型是怎么配置的
如何配置
- url string
new GridManager(table, {
ajaxData: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
// ...其它配置项
});
function类型的话可以写成:
new GridManager(table, {
ajaxData: () => {
return 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList';
}
// ...其它配置项
});
- response data
const responseData = {
"data":[
{
"name": "baukh",
"age": "28",
"createDate": "2015-03-12",
"info": "野生前端程序",
"operation": "修改"
},
{
"name": "baukh",
"age": "28",
"createDate": "2015-03-12",
"info": "野生前端程序",
"operation": "修改"
}
],
"totals": 8 // 分页必须存在的属性
}
new GridManager(table, {
ajaxData: responseData, // 这里使用上面的声明好的responseData变量
// ...其它配置项
});
new GridManager(table, {
ajaxData: () => {
return responseData;
},
// ...其它配置项
});
- promise
const getBlogList = function(paramse) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.lovejavascript.com/blogManager/getBlogList');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState !== 4) {
return;
}
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
resolve(xhr.response);
} else {
reject(xhr);
}
};
// 一个简单的处理参数的示例
let formData = '';
for (let key in paramse) {
if(formData !== '') {
formData += '&';
}
formData += key + '=' + paramse[key];
}
xhr.send(formData);
});
};
new GridManager(table, {
// settings: 当前的配置项汇总,包含分页及排序等信息
// params: 当前请求时所需要协带的参数信息
ajaxData: function(settings, params) => {
// 传入参数信息
return getBlogList(params);
},
// ...其它配置项
});
相关API说明
这里我们主要用到了ajaxData
这个属性,这也是表格组件中必须的配置项,用于获取接口获取应用于表格,配置方法也不复杂,通过使用function的方式,在回调函数的内部我们也可以做很多的数据处理,当然后续还会介绍到一些其他的类似的配置项,如ajaxBeforeSend
、ajaxSuccess
等。
分页
分页是表格的主要功能之一,在GridManager中,分页的配置也是极其简单,只要配置
supportAjaxPage
为true,并且在接口中返回totals
字段,默认的分页如下
如何配置
new GridManager(table, {
ajaxData: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
supportAjaxPage: true
});
相关API说明
在开启分页功能后,只需要我们的接口按规范返回对应的数据结构即可。其中分页相关的一些配置我们也是可以自定义的,主要涉及到以下配置项:
- supportAjaxPage:是否开启分页功能,默认false
- sizeData:配置每页显示条数的下拉项,数组元素仅允许为正整数
- pageSize:配置初次进入时每页的显示条数,需要与sizeData中的值匹配,默认20
- totalsKey:指定返回数据总条数的key键值,默认是
totals
,如果你后端返回的数据结构中总数字段不是totals
,则可以通过该属性进行修改覆盖 - currentPageKey:请求参数中当前页key键值,默认为
cPage
,很多时候后端需要的字段名可能叫current
,那么我们就可以将其设置为current
- pageSizeKey:请求参数中每页显示条数key健值, 默认为
pSize
,很多时候后端需要的字段名可能叫pageSize
,那么我们就可以将其设置为pageSize
配置前:
配置方式:
new GridManager(table, {
ajaxData: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
sizeData: [5,10,15,20],
pageSize: 5,
supportAjaxPage: true,
pageSizeKey: 'pageSize',
currentPageKey: 'current',
totalsKey: 'total',
});
配置后:
当然,有时候我们可能不喜欢默认的分页样式,有些内容可能是我们不需要的,这个时候我们也可以通过ajaxPageTemplate
这个配置项改变分页的的样子,你甚至可以给它穿上你喜欢的衣服。我们创建一个ajaxPageTpl.html,内容如这里其中将对应的字段都已经暴露给了用户,需要哪个直接使用即可,然后在配置如下即可,这样就可以实现自定义分页模板。
import ajaxPageTpl from './ajaxPageTpl.html'
new GridManager(table, {
ajaxData: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
supportAjaxPage: true,
ajaxPageTemplate: ajaxPageTpl
});
列配置
列配置属性
columnData
,拥有多个配置项,最简单的配置为一个数组里面配置key,如['key1', 'key2', 'key3']
,当然可根据实际的使用场景自定义配置。
如何配置
new GridManager(table, {
ajaxData: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
columnData: [
{
// 配置列key值
key: 'pic',
// 配置列表头提醒内容
remind: 'the pic',
// 配置列宽
width: '110px',
// 配置列内容居中
align: 'center',
// 配置列表头
text: '缩略图'
},
{
key: 'url',
remind: 'the url',
align: 'left',
text: '访问地址',
// 配置列自定义模板
template: (cell, row, index, key) => {
return rowData.url;
}
}
]
});
相关API说明
-
key: 列的唯一索引。字符串类型,必设项,一般可根据返回数据中的唯一值进行设置,比如一般返回数据每一条会有一个字段叫id或key,则该属性就可以设置为
id
或key
-
text: 列表头中的显示文本
-
isShow: 配置该列是否显示,默认是true,配置为false,则该列就不会在表格显示
-
disableCustomize: 该列是否禁止使用个性配置功能(宽度调整、位置更换、列的显示隐藏),默认是false不禁止,值为true时,width为必设项
-
disableMoveRow: 指定当前列禁止触发行移动事件,默认为:false,可用于拖拽功能
-
disableRowCheck: 指定当前列禁止触发行选中事件,默认为:false,在拖动列时如果需要设置某列不可拖动,则可设置该属性为true
-
merge: 是否将相同数据列合并,在配置template的情况下会以执行结果进行比对,两种值: 'text’指定比对td.innerText, 'html’指定比对td.innerHTML
-
width: 列宽度
- 如果th实际占用宽度大于该指定宽度时,会导致显示异常。
- 请不要设置所有的列,最少需要保留一列交由gridmanager进行自适应(注意该列的isShow必须为true)
- 只支持px单位的值,可简写为
width: 100
-
align: 列文本对齐信息,字符串类型,非必设项。默认值为空字符,效果与left相同
-
sorting: 列的排序信息,支持
DESC
与ASC
-
fixed: 固定列, 使用后 必须存在
width
且disableCustomize
将强制变更为true -
remind: 列的表头提醒内容,可以是纯文字,也可以是对象在在对象中自定义显示样式
-
filter: 表头筛选条件, 该值由用户操作后会将选中的值以
{key: value}
的形式覆盖至query参数内{ key: 'type', text: 'type', filter: { // 筛选条件列表, 数组类型。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter时该参数为必设项。 option: [ { value: 1, text: '11' }, { value: 2, text: '22' } ], // 筛选选中项,字符串类型, 未存在选中项时设置为''。 在此设置的选中的过滤条件将会覆盖query, 多选时使用','分割。 selected: '1', // 否为多选, 布尔类型, 默认为false,非必设项。 isMultiple: false },
- template: 自定义列模板,可以根据自己的需要使用函数中的参数实现自定义列样式
{ key: 'url', text: 'url', remind: { text: '巧了我也是', style: { 'width': '100px', 'font-size': '20px' }, }, template: (cell, row) => { console.log(row); return row.name + ' 我的加的 ' + row.url;; } },
- children: 子项配置, 通过该项可以实现嵌套表头
通栏
fullColumn
属性,可设置通栏效果,同时也支持行间隔,顶部通栏和底部通栏自定义模板,配置表格区域每一行的通栏,使用该功能后以下功能将失效:
- hover选中样式
- 配置指定列显示隐藏功能
- 拖拽功能
- 行移动功能
- 树型结构
如何配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://gridmanager.lovejavascript.com/node_modules/gridmanager/index.css"/>
</head>
<body>
<table id='table-demo-baseCode'></table>
</body>
<script type="text/javascript" src="https://gridmanager.lovejavascript.com/node_modules/gridmanager/index.js"></script>
<script>
document.querySelector('#table-demo-baseCode').GM({
gridManagerName: 'demo-topFullCode',
ajaxData: 'https://www.lovejavascript.com/blogManager/getBlogList',
disableLine:true,
disableBorder: true,
fullColumn: {
useFold: true,
topTemplate: function(){
return '<div style="padding: 12px; text-align: center;">'
+'快速、灵活的对Table标签进行实例化,让Table标签充满活力。该项目已开源, '
+'<a target="_blank" href="https://github.com/baukh789/GridManager">点击进入</a>github'
+'</div>';
},
// 与顶部通栏设置二选一
// bottomTemplate: function(row, index){
// return '<div>我是底部通栏,哈哈</div>';
// }
},
ajaxType: 'POST',
query: {pluginId: 1},
supportAjaxPage: true,
columnData: [
{
key: 'pic',
remind: 'the pic',
width: '110px',
align: 'center',
text: '缩略图',
// 使用函数返回 dom node
template: function(pic, rowObject) {
var picNode = document.createElement('a');
picNode.setAttribute('href', 'https://www.lovejavascript.com/#!zone/blog/content.html?id='+rowObject.id);
picNode.setAttribute('title', rowObject.title);
picNode.setAttribute('target', '_blank');
picNode.title = '点击阅读['+rowObject.title+']';
picNode.style.display = 'block';
picNode.style.height = '68.5px';
var imgNode = document.createElement('img');
imgNode.style.width = '100px';
imgNode.style.padding = '5px';
imgNode.style.margin = '0 auto';
imgNode.alt = rowObject.title;
imgNode.src = 'https://www.lovejavascript.com/'+pic;
picNode.appendChild(imgNode);
return picNode;
}
},{
key: 'title',
remind: 'the title',
align: 'left',
text: '标题',
// 使用函数返回 dom node
template: function(title, rowObject) {
var titleNode = document.createElement('a');
titleNode.setAttribute('href', 'https://www.lovejavascript.com/#!zone/blog/content.html?id='+rowObject.id);
titleNode.setAttribute('title', title);
titleNode.setAttribute('target', '_blank');
titleNode.innerText = title;
titleNode.title = '点击阅读['+rowObject.title+']';
titleNode.classList.add('plugin-action');
return titleNode;
}
},{
key: 'type',
remind: 'the type',
text: '博文分类',
width: '130px',
align: 'center',
// 使用函数返回 htmlString
template: function(type, rowObject){
// 博文类型
const TYPE_MAP = {
'1': 'HTML/CSS',
'2': 'nodeJS',
'3': 'javaScript',
'4': '前端鸡汤',
'5': 'PM Coffee',
'6': '前端框架',
'7': '前端相关'
};
return TYPE_MAP[type];
}
},
{
key: 'createDate',
width: '130px',
text: '创建时间',
// 使用函数返回 htmlString
template: function(createDate, rowObject){
return new Date(createDate).toLocaleDateString();
}
}
]
});
</script>
</html>
相关API说明
- useFold: false, 是否使用折叠,通过该配置可达到展开收缩行详情功能,默认为false,如上示例
- topTemplate: 设置顶部通栏所使用的模板, 注意事项:
- 1、gridmanager-vue 中 template 请使用vue的模板方式,具体请参考 gridmanager-vue
- 2、gridmanager-angular-1.x 中 template 请使用angular的模板方式,具体请参考 gridmanager-angular-1.x
- 3、gridmanager-react 中 template请使用react组件方式,具体请参考 gridmanager-react
topTemplate: function(row, index){ return '<div>我是通栏,哈哈</div>'; }
- bottomTemplate: 底部通栏: 与顶部通栏使用方式相同
function(row, index){ return '<div>我是通栏,哈哈</div>'; }
过滤
过滤功能应用在列配置中,当某一列需要使用过滤方式进行查询是,可在
columnData
中设置某一列中的过滤配置,只需要使用filter
属性,在[列配置]一节中我们已经设置过了,这里就不再赘述了
数据折叠
在[通栏]一节中,我们在
fullColumn
属性下面设置了useFold
属性,即数据折叠,通过与通栏进行结合,将默认不需要展示的数据设置为折叠隐藏,通过点击展开/折叠按钮实现显示与隐藏,这里也不再赘述了
虚拟滚动
虚拟滚动主要用于解决在数据量巨大时由于DOM节点过多导致的表格滑动卡顿问题,通过设置虚拟滚动的方式,实现万条不卡,配置功能也比较简单,只需要设置
virtualScroll
属性即可,示例中设置了20000条数据进行测试。
如何配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://gridmanager.lovejavascript.com/node_modules/gridmanager/index.css"/>
</head>
<body>
<table id='table-demo-baseCode'></table>
</body>
<script type="text/javascript" src="https://gridmanager.lovejavascript.com/node_modules/gridmanager/index.js"></script>
<script>
const getData = num => {
const data = [];
for (let i = 1; i<= num; i++) {
data.push({
"id": i,
"name": 'baukh-'+ i,
"age": "28",
"createDate": "2015-03-12",
"info": "野生前端程序"
});
}
return data;
};
const ajaxData = {
"data": getData(20000),
"totals": 20000
};
document.querySelector('#table-demo-baseCode').GM({
gridManagerName:'demo-virtualScroll',
supportAjaxPage: false,
virtualScroll: {
useVirtualScroll: true,
virtualNum: 20
},
ajaxData,
exportConfig: {
handler: (fileName, query, pageData, sortData, selectedList, tableData) => {
GM.showLoading('test');
GM.hideLoading('test', 500);
}
},
checkboxConfig: {
key: 'id'
},
columnData: [
{
key: 'name',
remind: 'the username',
sorting: 'up',
width: '200px',
text: 'username'
},{
key: 'age',
remind: 'the age',
sorting: '',
width: '200px',
text: 'age'
},{
key: 'info',
remind: 'the info',
sorting: '',
text: 'info'
},{
key: 'createDate',
text: '创建时间',
remind: 'the createDate',
sorting: 'down',
width: '200px',
fixed: 'right'
}
]
});
</script>
</html>
-
未配置虚拟滚动:页面滚动会出现卡顿,并且白屏时间较长
-
开启虚拟滚动:页面渲染很快,不会出现白屏情况
相关API说明
- useVirtualScroll: 是否使用虚拟滚动功能,默认false,在使用supportTreeData与fullColumn时虚拟滚动无效。使用静态导出,必须配置handler,否则导出数据长度为virtualNum;打印时仅对当前配置virtualNum的条数生效
- virtualNum: 实际渲染的Tr数,该数值大于当前页数据长度时,虚拟滚动不生效,该数值过小时,会导致tbody区域出现空白
嵌套表头
嵌套表头多用于在设置多种类表头,具体场景如一列中需要设置一个作者的信息,信息可能包括作者的头像、昵称、个人网站地址,则我们可能在一个列中设置一个简单通栏为作者,下面包括头像、昵称、个人网站地址。在[columnData]一节中,我们最后有一个属性叫
children
,是一个数组对象,这个属性就是用来配置嵌套表头的。
如何配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://gridmanager.lovejavascript.com/node_modules/gridmanager/index.css"/>
</head>
<body>
<table id='table-demo-baseCode'></table>
</body>
<script type="text/javascript" src="https://gridmanager.lovejavascript.com/node_modules/gridmanager/index.js"></script>
<script>
const NESTED_CODE_TYPE_MAP = {
'1': 'HTML/CSS',
'2': 'nodeJS',
'3': 'javaScript',
'4': '前端鸡汤',
'5': 'PM Coffee',
'6': '前端框架',
'7': '前端相关'
};
document.querySelector('#table-demo-baseCode').GM({
gridManagerName: 'demo-nestedCode',
ajaxData: 'https://www.lovejavascript.com/blogManager/getBlogList',
ajaxType: 'POST',
query: {pluginId: 1},
supportAjaxPage: true,
columnData: [
{
key: 'blogData',
text: '博文数据',
align: 'left',
width: '400px',
children: [
{
key: 'type',
text: '博文分类',
align: 'left',
width: '150px',
template: function(type){
return NESTED_CODE_TYPE_MAP[type];
}
},
{
key: 'blogInteractive',
text: '博文互动',
align: 'left',
width: '150px',
children: [
{
key: 'commentSum',
text: '评论',
align: 'left',
width: '150px',
},
{
key: 'praiseNumber',
text: '点赞',
align: 'left',
width: '150px'
},
{
key: 'read',
text: '阅读情况',
align: 'left',
width: '150px',
children: [
{
key: 'title',
text: '标题',
align: 'left',
width: '150px',
},
{
key: 'readNumber',
text: '阅读数量',
align: 'left',
width: '150px',
}
]
}
]
}
]
},{
key: 'info',
remind: 'the info',
sorting: '',
text: 'info'
},{
key: 'createDate',
text: '创建时间',
remind: 'the createDate',
sorting: 'down',
width: '200px',
fixed: 'right'
}
]
});
</script>
</html>
相关API说明
主要是用了
children
配置型,通过该项可以实现嵌套表头,存在该项时,将禁用: supportConfig、supportDrag、supportAdjust、columnData.fixed,数组对象与columnData对象配置相同,可使用children属性进行多层嵌套,现有版本中最后一层的宽度会平分上一层的宽度
排序
https://gridmanager.lovejavascript.com/demo/index.html#demo-sortCode
表头提醒
https://gridmanager.lovejavascript.com/demo/index.html#demo-remindCode
国际化
http://develop.lovejavascript.com/gridmanager/demo/index.html
具体配置项:
https://github.com/baukh789/GridManager/blob/master/src/module/i18n/config.ts
行移动
行移动功能主要可以应用于拖拽换行排序功能,功能配置也较为简单,只需要设置
supportMoveRow
为true即可,当然也可以配置移动后的回调
如何配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://gridmanager.lovejavascript.com/node_modules/gridmanager/index.css"/>
</head>
<body>
<table id='table-demo-baseCode'></table>
</body>
<script type="text/javascript" src="https://gridmanager.lovejavascript.com/node_modules/gridmanager/index.js"></script>
<script>
document.querySelector('#table-demo-baseCode').GM({
gridManagerName: 'demo-nestedCode',
ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
ajaxType: 'POST',
supportDrag: true,
supportAdjust: false,
supportMoveRow: true,
columnData: [
{
key: 'name',
text: '名称'
},{
key: 'info',
text: '说明'
},{
key: 'url',
text: 'url'
}
]
});
</script>
</html>
相关API说明
- supportMoveRow: 是否开启行移动功能, 默认为false
- moveRowConfig: 行移动功能配置,对象
- key: 指定移动后需要更新的字段, 该字段未配置时将只对DOM进行更新
- useSingleMode: 单列移动模式, 为true时将生成单独的一列
- fixed: 列固定, 仅在单列移动模式下生效, 如果右侧存在固定列则该列必须配置为left
- handler: 移动后执行的程序,可在该程序中完成与后端的交互,回调参数是list和tableData,list为切换后的两条行数据,tableData为切换后的整个表格的数据,在该回调函数中可通过调用接口实现数据替换
树形结构
树形结构主要是结合数据折叠实现,通过简单的配置实现在表格中展示有层级的树形结构样式。
如何配置
https://gridmanager.lovejavascript.com/demo/index.html#demo-treeCode
相关API说明
- supportTreeData:配置是否支持树型表格,配置树型数据后行移动功能将无效,默认false
- treeConfig:指定树展开操作按键所属容器
- insertTo: ‘id’, 配置columnData的key值,未配置时默认选择columnData的第一项
- treeKey: ‘children’, 层级关键字段
- openState: false,初始打开状态
行选中
行选中功能主要可以应用在批量操作表格数据,如批量删除、导出等功能,支持单行选中和多行选中,并有对应的选中配置和选中回调函数,默认开启后为多选,在配置项中可设置为单选模式,同时也支持点击行进行选中。
如何配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://gridmanager.lovejavascript.com/node_modules/gridmanager/index.css"/>
</head>
<body>
<table id='table-demo-baseCode'></table>
</body>
<script type="text/javascript" src="https://gridmanager.lovejavascript.com/node_modules/gridmanager/index.js"></script>
<script>
document.querySelector('#table-demo-baseCode').GM({
gridManagerName: 'demo-nestedCode',
ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
ajaxType: 'POST',
supportCheckbox: true,
checkboxConfig: {
// 选择列宽度配置
width: 40,
// 是否通过点击行来进行选中
useRowCheck: true,
// 当前选中操作是否使用单选
useRadio: false,
// 触发刷新类操作时(搜索、刷新、分页、排序、过滤),是否禁用状态保持
disableStateKeep: undefined,
// 指定选中操作精准匹配字段,该值需保证每条数据的唯一性。默认不指定,对整条数据进行匹配。
// 在使用树型结构表格(supportTreeData)时,必须配置key,否则会造成已选中数据错误。
key: undefined, // 配置此项可提升选中操作性能, 数据量越大越明显。
// 复选时最大可选数,生效条件: supportCheckbox === true && useRadio === false
max: 3,
// 是否使用固定列, 默认为undefined
// 接收两种值: 'left', 'right'
fixed: undefined
},
columnData: [
{
key: 'name',
text: '名称'
},{
key: 'info',
text: '说明'
},{
key: 'url',
text: 'url'
}
]
});
</script>
</html>
相关API说明
- supportCheckbox: 是否开启行选中功能,默认开启,默认为多选模式
- checkboxConfig: 行选中模式开启后的配置项
- width: 选择列的宽度
- useRowCheck: 是否通过点击行来进行选中,默认false
- useRadio: 是否为单选模式,默认false
- disableStateKeep: 触发刷新类操作时(搜索、刷新、分页、排序、过滤),是否禁用状态保持
- key: 数据唯一key值,在使用树型结构表格(supportTreeData)时,必须配置key,否则会造成已选中数据错误,
- max: 多选时最大可选数据条数
- fixed: 是否使用固定列, 默认为undefined
事件相关
在GridManager中,提供了很多的回调事件,在数据请求、点击、拖拽等功能中都会用到
数据请求: 使用三方库(如axios)时,这些事件无效。
- ajaxBeforeSend: AJAX请求前事件函数,在请求执行前触发,参数为请求所使用的promise
ajaxBeforeSend: (res) => { console.log('我是请求前触发', res); res.then(res => console.log(JSON.parse(res))); }
- ajaxSuccess: AJAX成功事件函数,在请求执行成功后触发,参数为请求返回结果
ajaxSuccess: (res) => { console.log('我是请求成功后触发', JSON.parse(res)); }
- ajaxError: AJAX失败事件函数,在请求执行失败时触发,参数为请求中所抛出的错误信息
ajaxError: (err) => { console.log('我是请求错误后触发', err); }
- ajaxComplete: 请求成功时等同于ajaxSuccess, 失败时等同于ajaxError,参数成功时为response, 失败时为error
ajaxComplete: (res) => { console.log('我是请求完成后触发', res); }
这里没有展示请求错误的情况,可在实际情况时查看
排序
- sortingBefore: 排序执行前事件,在ajax请求发送前触发,参数为AJAX请求服务器所协带参数
- sortingAfter: 排序执行后事件,在ajax请求发送前触发,参数为AJAX请求服务器所协带参数
如下所示,我们设置了name列支持排序,通过点击排序的按钮,调用一下排序的回调方法
sortingBefore: (res) => {
console.log('我是排序前', res);
},
sortingAfter: (res) => {
console.log('我是排序后', res);
},
columnData: [
{
key: 'name',
text: '名称',
sorting: 'DESC'
},{
key: 'info',
text: '说明'
},{
key: 'url',
text: 'url'
}
]
分页
- pagingBefore: 分页执行前事件,在ajax请求发送前触发,参数为AJAX请求服务器所协带参数
- pagingAfter: 分页执行后事件,在ajax请求成功后触发,参数为AJAX请求服务器所协带参数
使用该事件需要开启分页功能
supportAjaxPage: true,
pagingBefore: (params) => {
console.log('我是点击分页前', params);
},
pagingAfter: (params) => {
console.log('我是点击分页后', params);
},
columnData: [
{
key: 'name',
text: '名称'
},{
key: 'info',
text: '说明'
},{
key: 'url',
text: 'url'
}
]
宽度调整
-
adjustBefore: 宽度调整前事件,在宽度调整前触发,在鼠标按下后就会触发,参数为当前的window.event对象
-
adjustAfter: 宽度调整后事件,在宽度调整后触发,在拖拽结束鼠标松开后出发,参数为当前的window.event对象
adjustBefore: (params) => {
console.log('我是宽度调整前', params);
},
adjustAfter: (params) => {
console.log('我是宽度调整后', params);
},
拖拽
拖拽的回调事件仅在列移动时会触发,行移动时是不会触发的
- dragBefore: 换位操作前事件,在换位操作前触发,在鼠标按下后就会触发,参数为当前的window.event对象
- dragAfter: 换位操作前事件,在换位操作前触发,在鼠标按下后就会触发,参数为当前的window.event对象
dragBefore: (params) => {
console.log('我是拖拽前', params);
},
dragAfter: (params) => {
console.log('我是拖拽后', params);
}
行选择
- checkedBefore: 选中/取消选中行, 执行前事件。该事件会接收返回值,当返回false时将中止选中事件,该返回值对全选事件无效
- checkedAfter: 选中/取消选中行, 执行后事件, 该事件会接收返回值,当返回false时将中止选中事件,该返回值对全选事件无效。
- checkedAllBefore: 全选/反选, 执行前事件。该事件会接收返回值,当返回false时将中止全选事件。
- checkedAllAfter: 全选/反选, 执行后事件。
checkedBefore: (checkedList, isChecked, rowData) => {
console.log('我是选择前:',
{
'当前已选择的数据' : checkedList,
'当前行是否选中': isChecked,
'当前行数据': rowData
}
)
},
checkedAfter: (checkedList, isChecked, rowData) => {
console.log('我是选择后:',
{
'当前已选择的数据' : checkedList,
'当前行是否选中': isChecked,
'当前行数据': rowData
}
)
},
checkedAllBefore: (checkedList, isChecked) => {
console.log('我全选前:',
{
'当前已选择的数据' : checkedList,
'当前行是否选中': isChecked
}
)
},
checkedAllAfter: (checkedList, isChecked) => {
console.log('我全选后:',
{
'当前已选择的数据' : checkedList,
'当前行是否选中': isChecked
}
)
}
在图中我们可以看到,点击全选或者取消全选的时候都会触发checkedAfter或checkedBefore
行点击
回调事件的参数都为:row: 当前行数据,rowIndex: 当前行索引,tr: 当前触发事件的tr
- rowClick: 表格单条的click事件勾子,可通过返回{ text: ‘这里有个提示’, position: ‘left’ }来显示tooltip。
- rowDblClick: 表格单条的dblclick事件勾子,可通过返回{ text: ‘这里有个提示’, position: ‘left’ }来显示tooltip。
- rowHover: 表格单条的hover事件勾子, 可通过返回{ text: ‘这里有个提示’, position: ‘left’ }来显示tooltip。
rowClick: (row, rowIndex, tr) => {
console.log('我是单击行操作');
console.log('当前行数据: ', row);
console.log('当前行索引: ', rowIndex);
console.log('当前触发事件的tr: ', tr);
},
rowDblClick: (row, rowIndex, tr) => {
console.log('我是双击行操作');
console.log('当前行数据: ', row);
console.log('当前行索引: ', rowIndex);
console.log('当前触发事件的tr: ', tr);
},
rowHover: (row, rowIndex, tr) => {
console.log('我是行悬浮操作');
console.log('当前行数据: ', row);
console.log('当前行索引: ', rowIndex);
console.log('当前触发事件的tr: ', tr);
return { text: '这里有个提示', position: 'left' }
},
列点击
回调事件的参数都为:row: 当前行数据,rowIndex: 当前行索引,colIndex: 当前列索引,td: 当前触发事件的td
- cellClick: 表格单元素的click事件勾子,可通过返回{ text: ‘这里有个提示’ }来显示tooltip。
- cellDblClick: 表格单元素的dblclick事件勾子,可通过返回{ text: ‘这里有个提示’ }来显示tooltip。
- cellHover: 表格单元格的hover事件勾子,可通过返回{ text: ‘这里有个提示’ }来显示tooltip。
cellClick: (row, rowIndex, colIndex, td) => {
console.log('我是单击行操作');
console.log('当前行数据: ', row);
console.log('当前行索引: ', rowIndex);
console.log('当前列索引: ', colIndex);
console.log('当前触发事件的td: ', td);
},
cellDblClick: (row, rowIndex, colIndex, td) => {
console.log('我是双击行操作');
},
cellHover: (row, rowIndex, colIndex, td) => {
console.log('我是行悬浮操作');
return { text: row.name }
}
评论区