vue dhtmlx 左侧表格排序

Vue 和 DHTMLX Grids 结合可以创建动态且功能丰富的数据表格，其中包括左侧表格排序的功能。DHTMLX Grid 是一款强大的 JavaScript 表格库，它允许你在 Vue.js 应用程序中轻松地实现表格展示、数据绑定以及交互式功能。

要在左侧表格添加排序，首先需要在 Vue 中安装 DHTMLX Grid，并在组件内初始化网格。以下是一个简单的步骤：

1. **安装**：
使用 npm 安装 `@dhtmlx/dhx_web` 或者 `dhtmlxgantt`（如果用于 Gantt 图表），示例：

   npm install @dhtmlx/dhx_web

2. **导入并配置**：
在 Vue 组件中引入并设置 DHTMLX Grid 的实例：

   import dhxGrid from '@dhtmlx/dhx_web';

   export default {
     data() {
       return {
         grid: null,
       };
     },
     mounted() {
       this.grid = new dhxGrid('gridbox'); // 假设 'gridbox' 是你的 HTML 中的 id
       this.grid.loadXMLHttp('/api/data'); // 调用 API 获取数据并加载到表格
       this.grid.sort(0, "asc"); // 设置默认列排序（这里第0表示第一列）
     },
   };

3. **响应式更新**：
如果数据发生变化，你可以使用 Vue 的 `watch` 或者 `computed` 来监听并更新排序状态：

   watch: {
     dataSource() {
       this.grid.reload(); // 当数据源变化时，重新加载数据
     }
   },

4. **添加事件处理**：
为了实现在左侧点击列头进行排序，可以在 grid 初始化时添加点击事件监听器：

   mounted() {
     this.grid.attachEvent("onColumnSort", (colIndex, direction) => {
       this.grid.sort(colIndex, direction);
     });
   }