var xm_one = xmSelect.render({\n el: '#tree_one',\n tips: '请选择行业标签',\n empty: '呀,数据为空',\n filterable: true,\n searchTips: '请在此搜索标签',\n paging: false,\n pageSize: 10,\n radio: false,\n repeat: false,\n clickClose: false,\n max: 0,\n height: '200px',\n theme: {\n color: '#409eff',\n },\n tree: {\n //是否显示树状结构\n show: true,\n //是否展示三角图标\n showFolderIcon: true,\n //是否显示虚线\n showLine: false,\n //间距\n indent: 10,\n //默认展开节点的数组, 为 true 时, 展开所有节点\n // expandedKeys: false,\n //是否严格遵守父子模式\n strict: true,\n //是否开启极简模式\n simple: true,\n //点击节点是否展开\n clickExpand: true,\n //点击节点是否选中\n clickCheck: true,\n },\n data: industryList,\n on: function (data) {\n var ids = [];\n var parentIds = [];\n\n data.arr.forEach(function (item) {\n ids.push(item.value);\n\n if (item.parent != 0) {\n parentIds.push(item.parent);\n }\n });\n\n var uniqueIds = Array.from(new Set(ids));\n var uniqueParentIds = Array.from(new Set(parentIds));\n\n var combinedIds = uniqueIds.concat(uniqueParentIds).join(',');\n\n $('#industry').val(combinedIds);\n },\n });xm-select的下拉树tree怎么实现在页面中点击取消选中所有子节点后父节点依然是选中状态,再次点击父节点全选所有子节点,再点击父节点取消父节点和所有子节点选中内容:要实现在页面中点击取消选中所有子节点后父节点依然是选中状态,再次点击父节点全选所有子节点,再点击父节点取消父节点和所有子节点选中,可以通过监听clickCheck事件来实现。\n\n首先,需要在tree配置项中设置clickCheck: true,表示点击节点时可以选中节点。\n\n然后,在on方法中监听clickCheck事件,当点击节点时,判断点击的是父节点还是子节点。如果点击的是父节点,需要判断当前父节点的选中状态,如果已选中,则全选所有子节点,如果未选中,则取消选中父节点和所有子节点。如果点击的是子节点,则判断当前子节点的选中状态,如果已选中,则取消选中父节点和所有子节点,如果未选中,则判断是否所有子节点都未选中,如果是,则取消选中父节点。\n\n下面是修改后的代码示例:\n\njavascript\nvar xm_one = xmSelect.render({\n el: '#tree_one',\n tips: '请选择行业标签',\n empty: '呀,数据为空',\n filterable: true,\n searchTips: '请在此搜索标签',\n paging: false,\n pageSize: 10,\n radio: false,\n repeat: false,\n clickClose: false,\n max: 0,\n height: '200px',\n theme: {\n color: '#409eff',\n },\n tree: {\n //是否显示树状结构\n show: true,\n //是否展示三角图标\n showFolderIcon: true,\n //是否显示虚线\n showLine: false,\n //间距\n indent: 10,\n //默认展开节点的数组, 为 true 时, 展开所有节点\n // expandedKeys: false,\n //是否严格遵守父子模式\n strict: true,\n //是否开启极简模式\n simple: true,\n //点击节点是否展开\n clickExpand: true,\n //点击节点是否选中\n clickCheck: true,\n },\n data: industryList,\n on: function (data) {\n var ids = [];\n var parentIds = [];\n\n data.arr.forEach(function (item) {\n ids.push(item.value);\n\n if (item.parent != 0) {\n parentIds.push(item.parent);\n }\n });\n\n var uniqueIds = Array.from(new Set(ids));\n var uniqueParentIds = Array.from(new Set(parentIds));\n\n var combinedIds = uniqueIds.concat(uniqueParentIds).join(',');\n\n $('#industry').val(combinedIds);\n },\n});\n\nxm_one.tree.$el.on('clickCheck', function (data) {\n var item = data.item;\n var isParent = item.children.length > 0;\n\n if (isParent) {\n if (item.checked) {\n xm_one.tree.setCheck(item.children, true);\n } else {\n xm_one.tree.setCheck(item.children, false);\n }\n } else {\n var parent = item.parent;\n\n if (item.checked) {\n xm_one.tree.setCheck(item.parent, false);\n } else {\n var siblings = parent.children;\n var uncheckedSiblings = siblings.filter(function (sibling) {\n return !sibling.checked;\n });\n\n if (uncheckedSiblings.length === siblings.length - 1) {\n xm_one.tree.setCheck(parent, true);\n }\n\n xm_one.tree.setCheck(item.parent, true);\n }\n }\n});\n\n\n在以上代码中,通过xm_one.tree.setCheck方法来设置节点的选中状态。当点击父节点时,使用xm_one.tree.setCheck(item.children, true)方法全选所有子节点;当点击子节点时,使用xm_one.tree.setCheck(item.parent, false)方法取消选中父节点,使用xm_one.tree.setCheck(item.parent, true)方法选中父节点。\n\n注意:以上代码是基于xmSelect版本为v3.0.0的情况下编写的。如果使用的是其他版本,可能会有一些差异,请根据实际情况进行调整。

xm-select 下拉树 tree 如何实现点击取消选中所有子节点后父节点依然是选中状态

原文地址: https://www.cveoy.top/t/topic/qfmb 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录