Combotree 实现树结构-前台页面点击某个结点，input框为xx-xx-xx内容

本文链接：https://blog.youkuaiyun.com/qq_22062405/article/details/79664090

这篇博客介绍了如何使用Combotree组件在前端实现树结构，并且当用户点击树节点时，能够在input框中填充以'-'分隔的节点路径。通过加载指定URL获取树结构数据，然后在onLoadSuccess和onChange事件中处理节点选择，动态生成并设置input框的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//加载目录树

$("#column").combotree({

//后台遍历树结点方法，返回json

url : path + "/op/queryPublishColumn.do?id="+id,

           width : '100%',
           height : 34,
           onLoadSuccess: function (node, data) {
                if (data != null) {
                    node = $('#selShenqFuwujg').combotree("tree").tree("find", data);
                }
            },
            onSelect: function (dirId) {
                   //此方法onselect点击后input框xx-xx-xx内容失败，改为onChange
            },
            onChange: function() {
               var tree = $('#column').combotree('tree');
               var selectedNode = tree.tree('getSelected');
               if (selectedNode) {
                   var path = new Array();
                   do {
                       path.unshift(selectedNode.text);
                       selectedNode = tree.tree('getParent', selectedNode.target);
                   } while (selectedNode);
                   var pathStr = '';
                   for (var i = 0; i < path.length; i++) {
                       pathStr += path[i];
                       if (i < path.length - 1) {
                           pathStr += '-';
                       }
                   }
                   $('#column').combotree('setValue' , pathStr);
               }
            }

});

附jsp定义及后台代码：