侧边栏壁纸
博主头像
恪晨博主等级

前端程序员

  • 累计撰写 140 篇文章
  • 累计创建 41 个标签
  • 累计收到 17 条评论
标签搜索

目 录CONTENT

文章目录
Web 其他

GridManager视频教程大纲

恪晨
恪晨
2023-02-06 / 2 评论 / 2 点赞 / 1,095 阅读 / 7,873 字 / 正在检测是否收录...

前言

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>

简单使用

image-1675845222871

<!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相关

相关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); 
    },
    // ...其它配置项
});

在线Demo

相关API说明

  这里我们主要用到了ajaxData这个属性，这也是表格组件中必须的配置项，用于获取接口获取应用于表格，配置方法也不复杂，通过使用function的方式，在回调函数的内部我们也可以做很多的数据处理，当然后续还会介绍到一些其他的类似的配置项，如ajaxBeforeSend、ajaxSuccess等。

分页

分页是表格的主要功能之一，在GridManager中，分页的配置也是极其简单，只要配置supportAjaxPage为true，并且在接口中返回totals字段，默认的分页如下

image-1675935684730

如何配置

new GridManager(table, {
    ajaxData: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
    supportAjaxPage: true
});

在线Demo

相关API说明

  在开启分页功能后，只需要我们的接口按规范返回对应的数据结构即可。其中分页相关的一些配置我们也是可以自定义的，主要涉及到以下配置项：

  • supportAjaxPage：是否开启分页功能，默认false
  • sizeData：配置每页显示条数的下拉项，数组元素仅允许为正整数
  • pageSize：配置初次进入时每页的显示条数，需要与sizeData中的值匹配，默认20
  • totalsKey：指定返回数据总条数的key键值，默认是totals，如果你后端返回的数据结构中总数字段不是totals，则可以通过该属性进行修改覆盖
  • currentPageKey：请求参数中当前页key键值,默认为cPage，很多时候后端需要的字段名可能叫current，那么我们就可以将其设置为current
  • pageSizeKey：请求参数中每页显示条数key健值, 默认为pSize，很多时候后端需要的字段名可能叫pageSize，那么我们就可以将其设置为pageSize

配置前：
image-1675935697064

配置方式：

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',
});

配置后：
image-1675935709741

  当然，有时候我们可能不喜欢默认的分页样式，有些内容可能是我们不需要的，这个时候我们也可以通过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: 列的表头提醒内容，可以是纯文字，也可以是对象在在对象中自定义显示样式
    image-1676282850581

  • 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
  },

image-1676282869973

  • template: 自定义列模板，可以根据自己的需要使用函数中的参数实现自定义列样式
    {
    key: 'url',
    text: 'url',
    remind: {
        text: '巧了我也是',
        style: {
            'width': '100px',
            'font-size': '20px'
        },
    },
    template: (cell, row) => {
        console.log(row);
        return row.name + '  我的加的  ' + row.url;;
    }
},

image-1676282884075

  • children: 子项配置, 通过该项可以实现嵌套表头

通栏

fullColumn属性，可设置通栏效果，同时也支持行间隔，顶部通栏和底部通栏自定义模板，配置表格区域每一行的通栏，使用该功能后以下功能将失效:

  1. hover选中样式
  2. 配置指定列显示隐藏功能
  3. 拖拽功能
  4. 行移动功能
  5. 树型结构

如何配置

<!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>

image-1676882125723

image-1676882145529

相关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属性，即数据折叠，通过与通栏进行结合，将默认不需要展示的数据设置为折叠隐藏，通过点击展开/折叠按钮实现显示与隐藏，这里也不再赘述了
image-1676882182086

虚拟滚动

虚拟滚动主要用于解决在数据量巨大时由于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>

  • 未配置虚拟滚动：页面滚动会出现卡顿，并且白屏时间较长
    image-1676882201954

  • 开启虚拟滚动：页面渲染很快，不会出现白屏情况
    image-1676882212098

相关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>

image-1676882230295

相关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>

image-1677052671358

相关API说明

  • supportMoveRow: 是否开启行移动功能, 默认为false
  • moveRowConfig: 行移动功能配置，对象
    • key: 指定移动后需要更新的字段, 该字段未配置时将只对DOM进行更新
    • useSingleMode: 单列移动模式, 为true时将生成单独的一列
    • fixed: 列固定, 仅在单列移动模式下生效, 如果右侧存在固定列则该列必须配置为left
    • handler: 移动后执行的程序，可在该程序中完成与后端的交互，回调参数是list和tableData，list为切换后的两条行数据，tableData为切换后的整个表格的数据，在该回调函数中可通过调用接口实现数据替换

树形结构

树形结构主要是结合数据折叠实现，通过简单的配置实现在表格中展示有层级的树形结构样式。

如何配置

https://gridmanager.lovejavascript.com/demo/index.html#demo-treeCode

image-1677052699903

相关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>

image-1677052712474

相关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);
}

这里没有展示请求错误的情况，可在实际情况时查看
image-1677057305778

排序

  • 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'
        }
    ]

image-1677057321525

分页

  • 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'
        }
    ]

image-1677057330737

宽度调整

  • adjustBefore: 宽度调整前事件，在宽度调整前触发，在鼠标按下后就会触发，参数为当前的window.event对象

  • adjustAfter: 宽度调整后事件，在宽度调整后触发，在拖拽结束鼠标松开后出发，参数为当前的window.event对象

    adjustBefore: (params) => {
        console.log('我是宽度调整前', params);
    },
    adjustAfter: (params) => {
        console.log('我是宽度调整后', params);
    },

image-1677057339883

拖拽

拖拽的回调事件仅在列移动时会触发，行移动时是不会触发的

  • dragBefore: 换位操作前事件，在换位操作前触发，在鼠标按下后就会触发，参数为当前的window.event对象
  • dragAfter: 换位操作前事件，在换位操作前触发，在鼠标按下后就会触发，参数为当前的window.event对象
    dragBefore: (params) => {
        console.log('我是拖拽前', params);
    },
    dragAfter: (params) => {
        console.log('我是拖拽后', params);
    }

image-1677057350878

行选择

  • 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
            }
        )
    }

image-1677057362011
在图中我们可以看到，点击全选或者取消全选的时候都会触发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' }
    },

image-1677057374351

列点击

回调事件的参数都为：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 }
    }

image-1677057384160

方法相关

https://gridmanager.lovejavascript.com/api/index.html#init

2
web GridManager
  1. qrcode alipay
  2. qrcode weixin
版权归属： 恪晨
本文链接： https://blog.wangboweb.site/archives/598
许可协议： 本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权

评论区