ligerui tree如何获取全路径,包含父节点
ligerui的tree控件,如何获取全路径,选择子节点后,父节点没有被勾选也一起获取,效果如下
ligerui tree如何获取全路径,包含父节点源代码如下。
版本为V1.2.5,其他版本自己对照api和生成的树结构修改对应的方法名称和jquery选择器。示例居于ligerui\V1.2.5\Source\demos\tree\treedata.htm进行修改。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script> <script src="../../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script> <script type="text/javascript"> var data = []; data.push({ id: 1, pid: 0, text: '1' }); data.push({ id: 2, pid: 1, text: '1.1' }); data.push({ id: 4, pid: 2, text: '1.1.2' }); data.push({ id: 5, pid: 2, text: '1.1.2' }); data.push({ id: 10, pid: 8, text: 'wefwfwfe' }); data.push({ id: 11, pid: 8, text: 'wgegwgwg' }); data.push({ id: 12, pid: 8, text: 'gwegwg' }); data.push({ id: 6, pid: 2, text: '1.1.3', ischecked: true }); data.push({ id: 7, pid: 2, text: '1.1.4' }); data.push({ id: 8, pid: 7, text: '1.1.5' }); data.push({ id: 9, pid: 7, text: '1.1.6' }); $(function () { var tree = $("#tree1").ligerTree({ data: data, idFieldName: 'id', slide: false, parentIDFieldName: 'pid' }); treeManager = $("#tree1").ligerGetTreeManager(); treeManager.collapseAll(); }); function getPathIds() { var tree = $("#tree1").ligerTree(); var nodes = tree.getChecked();//选中的节点 var parent; var ids = ',',pid,text=','; for (var i = 0; i < nodes.length; i++) { ids += nodes[i].data.id + ','; text += nodes[i].data.text + ','; parent = tree.getParentTreeItem(nodes[i].target);//获取父节点DOM while (parent) {//有父节点 console.log(parent) pid = parent.id;//父节点id,对应data数组里面的id配置 //ids字符串未包含父节点id,为什么要加这个判断,因为有可能选择同一个节点下的多个子节点,所有要过滤一下,防止出现重复的id if (ids.indexOf(',' + pid + ',') == -1) { ids += pid + ','; text += $(parent).find('>div.l-body span').text() + ',';//有点水的框架,无法获取数据节点,只能通过dom朝找获取数据节点的text配置了 } parent = tree.getParentTreeItem(parent);//获取父节点的上一级节点 } } alert('ID:' + ids) alert('Text:'+text) } </script> </head> <body style="padding:10px"> <div style="width:200px; height:300px; margin:10px; float:left; border:1px solid #ccc; overflow:auto; "> <ul id="tree1"></ul> </div> <input type="button" value="获取路径ID" onclick="getPathIds()"/> </body> </html>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:ligerui tree如何获取全路径,包含父节点