jstree父节点点击不调用点击事件

在jstree中，如果您想要禁用父节点的点击事件，但仍然需要展开父节点，请使用 `jstree-clicked` 类。您可以通过以下方式实现此目的：

$('#tree').on('select_node.jstree', function(e, data) {
    var node = data.node;
    if (node.children.length > 0) {
        // 阻止选中父节点时子节点也被选中
        e.preventDefault();
        // 添加 jstree-clicked 类以展开父节点
        data.instance.get_node(node, true).children('.jstree-anchor').addClass('jstree-clicked');
    }
});

在上面的代码中，我们在 `select_node` 事件中阻止父节点的选中时，子节点也被选中。同时，我们使用 `get_node` 方法获取父节点的 DOM 元素，并通过添加 `jstree-clicked` 类来展开父节点。这样，当您单击父节点时，该节点将仅展开，而不会触发单击事件。

相关问题

.jstree 怎么对其调用的值更改

如果您想要更改 jstree 中某个节点的值，可以使用 jstree API 中的 `rename_node` 方法。该方法可以接受两个参数：要更改的节点的 ID 和新的节点文本。例如：

$('#tree').jstree('rename_node', 'node_id', 'new_text');

其中，`#tree` 是您的 jstree 元素的 ID，`node_id` 是要更改的节点的 ID，`new_text` 是新的节点文本。

另外，如果您想要在 jstree 中添加新节点，可以使用 `create_node` 方法。该方法也可以接受两个参数：要添加新节点的父节点的 ID 和新节点的配置对象。例如：

$('#tree').jstree('create_node', 'parent_node_id', {text: 'new_node_text'});

其中，`parent_node_id` 是要添加新节点的父节点的 ID，`{text: 'new_node_text'}` 是新节点的配置对象，其中 `text` 属性表示新节点的文本。

el-button点击新增父节点，弹出dialog,显示el-tree的父节点，保存时调用API，修改，删除等功能代码实现

以下是基于Vue.js和Element UI的代码实现示例：

<template>
  <div>
    <el-button type="primary" @click="handleAddParent">新增父节点</el-button>
    <el-dialog title="添加父节点" :visible.sync="parentDialogVisible" width="30%">
      <el-form :model="parentForm" label-width="100px">
        <el-form-item label="父节点名称">
          <el-input v-model="parentForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="parentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addParent">确 定</el-button>
      </div>
    </el-dialog>
    <el-tree :data="treeData" :props="treeProps" :node-key="treeNodeKey" :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [], // 树结构数据
      treeProps: { // 树结构props配置
        children: 'children',
        label: 'name'
      },
      treeNodeKey: 'id', // 树节点key
      parentDialogVisible: false, // 添加父节点弹框是否显示
      parentForm: { // 添加父节点表单数据
        name: ''
      },
      currentSelectedNode: null // 当前选中的树节点
    }
  },
  methods: {
    // 点击新增父节点按钮
    handleAddParent() {
      this.parentDialogVisible = true
    },
    // 添加父节点
    addParent() {
      if (!this.parentForm.name) {
        this.$message.error('请输入父节点名称')
        return
      }
      // 调用API保存父节点数据
      // ...

      // 添加新父节点到树结构
      const newParentNode = {
        id: 1, // 通过API返回的新节点ID
        name: this.parentForm.name,
        children: []
      }
      this.treeData.push(newParentNode)
      this.parentDialogVisible = false
      this.$message.success('添加成功')
    },
    // 点击树节点
    handleNodeClick(node) {
      this.currentSelectedNode = node
    },
    // 修改节点名称
    updateNodeName() {
      if (!this.currentSelectedNode) {
        this.$message.error('请选择需要修改的节点')
        return
      }
      // 调用API修改节点名称
      // ...

      this.$message.success('修改成功')
    },
    // 删除节点
    deleteNode() {
      if (!this.currentSelectedNode) {
        this.$message.error('请选择需要删除的节点')
        return
      }
      this.$confirm('确定删除该节点吗?', '提示', {
        type: 'warning'
      }).then(() => {
        // 调用API删除节点
        // ...
        const parentNode = this.currentSelectedNode.parent
        if (parentNode) {
          const siblingNodes = parentNode.children
          const index = siblingNodes.findIndex(node => node.id === this.currentSelectedNode.id)
          siblingNodes.splice(index, 1)
        } else {
          const index = this.treeData.findIndex(node => node.id === this.currentSelectedNode.id)
          this.treeData.splice(index, 1)
        }
        this.currentSelectedNode = null
        this.$message.success('删除成功')
      }).catch(() => {})
    }
  }
}
</script>

以上示例中，我们通过`el-button`和`el-dialog`实现了添加树节点的功能。当用户点击“新增父节点”按钮时，弹出一个对话框，用户输入父节点名称后，点击“确定”按钮，将新节点保存到后端，并添加到树结构中。

另外，我们还实现了修改节点名称和删除节点的功能。当用户点击树节点时，记录下当前选中的节点，在用户点击“修改节点名称”或“删除节点”按钮时，根据当前选中的节点调用API进行相应操作，并更新树结构数据。