需要实现 在一个<input type="text" id="tree"/>鼠标点击文本框 展示一个小窗口上面有一棵树,然后点击选中的节点,小窗口关闭,被选中节点的名称显示在文本框中。数据用json。
我现在在input中用onclick,打开一个iframe,iframe中显示出了这棵树,可是该怎么让这个节点的信息显示呢?求助。。。。
------解决方案--------------------
<ext:DropDownField ID="DropDownFieldBranch" runat="server" Editable="false" Width="300" TriggerIcon="Search">
<Component>
<ext:TreePanel ID="TreePanel4" runat="server" Height="230" Title="上级部门" UseArrows="true" AutoScroll="true" Animate="true">
<Listeners>
<CheckChange Handler="this.dropDownField.setValue(getTasks(this), false);" />
</Listeners>
</ext:TreePanel>
</Component>
<Listeners>
<Expand Handler="this.component.getRootNode().expand(true);" Single="true" Delay="10" />
</Listeners>
</ext:DropDownField>
方法在这
var getTasks = function (tree) {
var msg = [],
selNodes = tree.getChecked();
msg.push("[");
Ext.each(selNodes, function (node) {
if (msg.length > 1) {
msg.push(",");
}
msg.push(node.data.text);
});
msg.push("]");
return msg.join("");
};
------解决方案--------------------
- JScript code
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> <link type="text/css" href="/ext/resources/css/ext-all.css" rel="Stylesheet" /> <script type="text/javascript" src="/ext/ext-base.js"></script> <script type="text/javascript" src="/ext/ext-all.js"></script> </head> <script type="text/javascript"> var treeWnd; Ext.onReady(function(){ var json=[{text:'选项1',children:[{text:'选项11',leaf:true}]},{text:'选项2',leaf:true}];//你可以用自己的json var treePan=new Ext.tree.TreePanel({ root:{text:'请选择',children:json} }); treeWnd=new Ext.Window({items:[treePan],width:120,height:180,closeAction:'hide'}); treePan.on('click',function(node){ var obj=document.getElementById('tree'); obj.value=node.text; treeWnd.hide(); }); }) function showTree() { treeWnd.show(); var obj=document.getElementById('tree'); treeWnd.setPosition(obj.offsetLeft,obj.offsetTop+28); } </script> <body> <form id="form1" runat="server"> <div> <input id='tree' type="text" onclick="showTree();" style="margin-left:90px;margin-top:30px;" /> </div> </form> </body> </html>