npm包ob-datatable-dev使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，数据表格是一个常见的需求，它能够让我们以表格的形式展示数据，并且具备搜索、排序、分页等功能。而 ob-datatable-dev 就是一个强大的npm包，它提供了丰富的数据表格组件，可供我们快速实现数据表格的开发。

安装

使用 npm 命令行安装 ob-datatable-dev：

npm install ob-datatable-dev --save

基础使用

小编在这里提供一个基础的例子,让我们可以更好的了解 ob-datatable-dev 的基本用法:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ob-datatable-dev使用教程</title>
    <link rel="stylesheet" href="./node_modules/ob-datatable-dev/dist/ob-datatable.css">
</head>
<body>
<div id="example"></div>
<script src="./node_modules/ob-datatable-dev/dist/ob-datatable.js"></script>
<script>
    var config = {
        el: '#example',
        data: [{
            id: 0,
            name: 'miranda',
            age: 24,
            gender: 'female'
        }, {
            id: 1,
            name: 'john',
            age: 27,
            gender: 'male'
        }, {
            id: 2,
            name: 'tom',
            age: 21,
            gender: 'male'
        }, {
            id: 3,
            name: 'lucy',
            age: 18,
            gender: 'female'
        }],
        columns: [{
            title: '编号',
            key: 'id'
        }, {
            title: '姓名',
            key: 'name'
        }, {
            title: '年龄',
            key: 'age'
        }, {
            title: '性别',
            key: 'gender'
        }]
    }
    var table = new window.OB.DataTable(config);
    table.render();
</script>
</body>
</html>

上述代码中，我们通过引入ob-datatable.css和ob-datatable.js，以及构造表格实例，配置表格基本属性（id、name、age、gender），并且在页面上呈现了表格。

配置项

ob-datatable-dev 提供了非常丰富的表格配置项，大大增加了表格的可定制性。在这里我们详细介绍几个常用的配置项:

el

类型：string

说明：表格渲染的 DOM 元素的 CSS 选择器。例如 #example。

data

类型：array

说明：表格显示的数据。

columns

类型：array

说明：定义表格显示的列信息。这个选项包含的是一个数组，数组中的元素就是一个配置信息对象。

sortParams

类型：array

说明：定义表格默认排序方式，为形如 ['key', 'asc'] 的数组，默认按第一列升序排列。

rowClassName

类型：function

说明：自定义表格行的 class 名称。注意：此函数应返回一个 string 类型的结果。

更多配置项请参考API文档。

事件

ob-datatable-dev 同时也提供了丰富的表格事件，方便我们对表格进行监听。在这里我们介绍几个常用的事件：

rowClick

说明：表格行点击事件。

示例代码：

var table = new window.OB.DataTable({
    el: '#example',
    data: responseData,
    rowClick: function (rowData) {
        // do something on row click
    }
})

columnClick

说明：定义表格列点击事件。

示例代码：

var table = new window.OB.DataTable({
    el: '#example',
    data: responseData,
    columnClick: function (columnData) {
        // do something on column click
    }
})

总结

ob-datatable-dev 作为一个成熟、稳定的 npm 包，其提供的功能强大且使用方便。我们可以根据自己的需求配置表格的各种属性，同时也能够监听表格的各种事件。通过本文的介绍，相信大家一定能够快速上手使用这个 npm 包，为前端开发提供更好的支持和便利。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53df0