1. PingCode智库首页
  2. 百科

树形表格怎么做 js

Edit2 • • 百科

树形表格怎么做 js

树形表格（Tree Grid）是一种特殊的表格，它不仅展示了数据的行和列，还展示了数据的层级关系，通常被用于表示嵌套或分层结构的数据。在JavaScript中创建树形表格通常需要使用特定的库、手动操作DOM、实现递归渲染等。接下来，我们将详尽地介绍如何使用JavaScript实现树形表格，并推荐一些常见的库。

一、使用第三方库

1、jQuery DataTables

jQuery DataTables是一个强大的插件，用于增强HTML表格的功能。虽然它本身不支持树形结构，但通过结合其他插件可以实现。

安装和引入

首先，你需要引入jQuery和DataTables库：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">


<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>


<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

实现树形表格

接下来，使用DataTables来创建树形表格：

<table id="example" class="display" style="width:100%">


    <thead>


        <tr>


            <th>Name</th>


            <th>Position</th>


            <th>Office</th>


            <th>Age</th>


            <th>Start date</th>


            <th>Salary</th>


        </tr>


    </thead>


    <tbody>


        <tr data-child-value="child-1">


            <td>Tiger Nixon</td>


            <td>System Architect</td>


            <td>Edinburgh</td>


            <td>61</td>


            <td>2011/04/25</td>


            <td>$320,800</td>


        </tr>


        <tr data-parent="child-1">


            <td>Garrett Winters</td>


            <td>Accountant</td>


            <td>Tokyo</td>


            <td>63</td>


            <td>2011/07/25</td>


            <td>$170,750</td>


        </tr>


    </tbody>


</table>


<script>


$(document).ready(function() {


    var table = $('#example').DataTable({


        "paging": false


    });


    $('#example tbody').on('click', 'tr', function () {


        var tr = $(this).closest('tr');


        var row = table.row(tr);


        if (row.child.isShown()) {


            row.child.hide();


            tr.removeClass('shown');


        } else {


            row.child(format(row.data())).show();


            tr.addClass('shown');


        }


    });


    function format(d) {


        return 'Full name: '+d[0]+'<br>'+


            'Position: '+d[1]+'<br>'+


            'Office: '+d[2]+'<br>'+


            'Age: '+d[3]+'<br>'+


            'Start date: '+d[4]+'<br>'+


            'Salary: '+d[5];


    }


});


</script>

2、ag-Grid

ag-Grid是一个功能强大的数据网格库，支持丰富的功能，包括树形表格。

安装和引入

你可以通过npm安装ag-Grid：

npm install ag-grid-community ag-grid-react

实现树形表格

使用ag-Grid创建树形表格：

import React, { useState } from 'react';


import { AgGridReact } from 'ag-grid-react';


import 'ag-grid-community/styles/ag-grid.css';


import 'ag-grid-community/styles/ag-theme-alpine.css';


const TreeGridExample = () => {


    const [rowData] = useState([


        { id: 1, name: 'Root', children: [


            { id: 2, name: 'Child 1' },


            { id: 3, name: 'Child 2', children: [


                { id: 4, name: 'Grandchild 1' }


            ]}


        ]}


    ]);


    const [columnDefs] = useState([


        { field: 'name', headerName: 'Name' }


    ]);


    return (


        <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>


            <AgGridReact


                rowData={rowData}


                columnDefs={columnDefs}


                treeData={true}


                getDataPath={data => data.name.split('.')}


            />


        </div>


    );


};


export default TreeGridExample;

二、手动实现树形表格

如果你不想使用第三方库，也可以手动实现树形表格。以下是一个简单的示例：

HTML结构

<table id="tree-table">


    <thead>


        <tr>


            <th>Name</th>


            <th>Position</th>


            <th>Office</th>


            <th>Age</th>


            <th>Start date</th>


            <th>Salary</th>


        </tr>


    </thead>


    <tbody>


        <tr data-parent="0" data-level="1">


            <td>Tiger Nixon</td>


            <td>System Architect</td>


            <td>Edinburgh</td>


            <td>61</td>


            <td>2011/04/25</td>


            <td>$320,800</td>


        </tr>


        <tr data-parent="1" data-level="2">


            <td>Garrett Winters</td>


            <td>Accountant</td>


            <td>Tokyo</td>


            <td>63</td>


            <td>2011/07/25</td>


            <td>$170,750</td>


        </tr>


    </tbody>


</table>

JavaScript实现

document.addEventListener('DOMContentLoaded', function () {


    const rows = document.querySelectorAll('#tree-table tbody tr');


    rows.forEach(row => {


        const level = row.getAttribute('data-level');


        row.style.paddingLeft = `${level * 20}px`;


        row.addEventListener('click', () => {


            const parentId = row.getAttribute('data-parent');


            rows.forEach(r => {


                if (r.getAttribute('data-parent') === parentId) {


                    r.style.display = r.style.display === 'none' ? '' : 'none';


                }


            });


        });


    });


});

三、使用Vue.js实现树形表格

Vue.js是一个渐进式JavaScript框架，可以轻松地用来构建用户界面，包括树形表格。

安装和引入

首先，你需要安装Vue.js：

npm install vue

实现树形表格

以下是一个简单的示例，使用Vue.js和Vuex来管理状态：

<template>


  <div>


    <table>


      <thead>


        <tr>


          <th>Name</th>


          <th>Position</th>


          <th>Office</th>


          <th>Age</th>


          <th>Start date</th>


          <th>Salary</th>


        </tr>


      </thead>


      <tbody>


        <tr v-for="item in treeData" :key="item.id" :style="{paddingLeft: (item.level * 20) + 'px'}" @click="toggle(item)">


          <td>{{ item.name }}</td>


          <td>{{ item.position }}</td>


          <td>{{ item.office }}</td>


          <td>{{ item.age }}</td>


          <td>{{ item.startDate }}</td>


          <td>{{ item.salary }}</td>


        </tr>


      </tbody>


    </table>


  </div>


</template>


<script>


export default {


  data() {


    return {


      treeData: [


        { id: 1, name: 'Tiger Nixon', position: 'System Architect', office: 'Edinburgh', age: 61, startDate: '2011/04/25', salary: '$320,800', level: 0, children: [


          { id: 2, name: 'Garrett Winters', position: 'Accountant', office: 'Tokyo', age: 63, startDate: '2011/07/25', salary: '$170,750', level: 1 }


        ]}


      ]


    };


  },


  methods: {


    toggle(item) {


      item.children.forEach(child => {


        child.visible = !child.visible;


      });


    }


  }


};


</script>


<style scoped>


tr {


  cursor: pointer;


}


</style>

四、使用React.js实现树形表格

安装和引入

首先，你需要安装React.js：

npm install react react-dom

实现树形表格

以下是一个简单的示例，使用React和useState来管理状态：

import React, { useState } from 'react';


const TreeGrid = () => {


  const [data, setData] = useState([


    { id: 1, name: 'Tiger Nixon', position: 'System Architect', office: 'Edinburgh', age: 61, startDate: '2011/04/25', salary: '$320,800', level: 0, children: [


      { id: 2, name: 'Garrett Winters', position: 'Accountant', office: 'Tokyo', age: 63, startDate: '2011/07/25', salary: '$170,750', level: 1 }


    ]}


  ]);


  const toggle = (item) => {


    setData(data.map(d => {


      if (d.id === item.id) {


        d.children.forEach(child => {


          child.visible = !child.visible;


        });


      }


      return d;


    }));


  };


  return (


    <table>


      <thead>


        <tr>


          <th>Name</th>


          <th>Position</th>


          <th>Office</th>


          <th>Age</th>


          <th>Start date</th>


          <th>Salary</th>


        </tr>


      </thead>


      <tbody>


        {data.map(item => (


          <tr key={item.id} style={{ paddingLeft: `${item.level * 20}px` }} onClick={() => toggle(item)}>


            <td>{item.name}</td>


            <td>{item.position}</td>


            <td>{item.office}</td>


            <td>{item.age}</td>


            <td>{item.startDate}</td>


            <td>{item.salary}</td>


          </tr>


        ))}


      </tbody>


    </table>


  );


};


export default TreeGrid;

五、总结

树形表格在数据展示中非常实用，特别是在需要展示层级关系的数据时。使用第三方库如jQuery DataTables、ag-Grid等可以快速实现树形表格，而手动实现则提供了更多的灵活性。无论你选择哪种方式，都需要根据项目的具体需求和技术栈来决定。

推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们在项目管理和团队协作中表现优异，能有效提升工作效率。

通过上述介绍，你应当能够根据自己的需求选择合适的方式来实现树形表格。希望这篇文章能对你有所帮助。

相关问答FAQs：

1. 在JavaScript中如何创建一个树形表格？
在JavaScript中，您可以使用DOM操作来动态创建一个树形表格。首先，您可以创建一个空的table元素，并使用createElement方法创建tr（行）和td（列）元素。然后，通过appendChild方法将行和列元素添加到表格中，以创建树形结构。使用适当的CSS样式，您可以将表格中的某些行缩进以形成树形结构。

2. 如何在树形表格中展开和折叠子节点？
要实现树形表格的展开和折叠功能，您可以在每个父节点的行中添加一个按钮或图标。当用户单击该按钮时，可以使用JavaScript来切换子节点的显示状态。您可以通过更改子节点的CSS属性（例如display：none）来隐藏或显示它们，或者通过添加或删除特定的CSS类来切换它们的可见性。

3. 如何为树形表格添加交互功能？
要为树形表格添加交互功能，您可以使用JavaScript事件处理程序。例如，您可以为每个行元素添加一个点击事件处理程序，以便在用户单击行时执行特定的操作，如展开或折叠子节点、选中行等。您还可以为按钮或图标添加点击事件处理程序，以便在用户单击时执行相关操作。通过使用事件处理程序，您可以使树形表格具有更多的交互性和响应性。

请注意，以上是一些常见的问题和解决方案，根据您的具体需求和代码实现方式可能会有所不同。希望对您有所帮助！

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3767675

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部