xmSelect树形结构获取父节点的value值方法

xmSelect树形结构获取父节点的value内容

在使用xmSelect树形结构组件时，有时需要获取用户选择的节点的父节点的value值。以下代码展示了如何实现这一功能。

原始代码：

var xm_one = xmSelect.render({
    el: '#tree_one',
    tips: '请选择行业标签',
    empty: '呀，数据为空',
    filterable: true,
    searchTips: '请在此搜索标签',
    paging: false,
    pageSize: 10,
    radio: false,
    repeat: false,
    clickClose: false,
    max: 0,
    height: '200px',
    theme: {
        color: '#409eff',
    },
    tree: {
        //是否显示树状结构
        show: true,
        //是否展示三角图标
        showFolderIcon: true,
        //是否显示虚线
        showLine: false,
        //间距
        indent: 10,
        //默认展开节点的数组, 为 true 时, 展开所有节点
        // expandedKeys: false,
        //是否严格遵守父子模式
        strict: true,
        //是否开启极简模式
        simple: true,
        //点击节点是否展开
        clickExpand: true,
        //点击节点是否选中
        clickCheck: true,
    },
    data: industryList,
    on: function (data) {
        var ids = data.arr.map((item) => {
            if (item.children) { // 判断是否有子节点
                return item.children.map((child) => child.value).join(',');
            } else {
                return item.value;
            }
        }).join(',');
        $('#industry').val(ids);
    },
});

这段代码中，data.arr是一个数组，包含了用户选择的所有节点。每个节点都有一个value属性，表示节点的值。如果节点有子节点，可以通过item.children来访问子节点的数组。

问题： 原始代码无法获取父节点的value值。

解决方法：

在遍历data.arr的过程中，使用item.parent.value来获取父节点的值。

修改后的代码：

var xm_one = xmSelect.render({
    el: '#tree_one',
    tips: '请选择行业标签',
    empty: '呀，数据为空',
    filterable: true,
    searchTips: '请在此搜索标签',
    paging: false,
    pageSize: 10,
    radio: false,
    repeat: false,
    clickClose: false,
    max: 0,
    height: '200px',
    theme: {
        color: '#409eff',
    },
    tree: {
        //是否显示树状结构
        show: true,
        //是否展示三角图标
        showFolderIcon: true,
        //是否显示虚线
        showLine: false,
        //间距
        indent: 10,
        //默认展开节点的数组, 为 true 时, 展开所有节点
        // expandedKeys: false,
        //是否严格遵守父子模式
        strict: true,
        //是否开启极简模式
        simple: true,
        //点击节点是否展开
        clickExpand: true,
        //点击节点是否选中
        clickCheck: true,
    },
    data: industryList,
    on: function (data) {
        var ids = data.arr.map((item) => {
            if (item.parent) { // 判断是否有父节点
                return item.parent.value;
            } else if (item.children) { // 判断是否有子节点
                return item.children.map((child) => child.value).join(',');
            } else {
                return item.value;
            }
        }).join(',');
        $('#industry').val(ids);
    },
});

在这个修改后的代码中，我们添加了一个条件判断if (item.parent)来判断节点是否有父节点，并使用item.parent.value来获取父节点的值。如果节点没有父节点，则继续执行原来的逻辑来获取子节点的值。

注意： 确保你的xmSelect树形结构数据中包含父节点信息，即每个节点都有一个parent属性，指向其父节点。