各位高手,请问如何在ASP.NET中实现管家婆界面中的同页树状分栏功能!
各位高手,请问在ASP.NET中怎样实现像管家婆中界面一样,左边是类似资源管理器一样的树状功能列表,右边是在同一个页面的功能区,只要点击左边的功能选项,在同一页面的右边就会显示相应的操作功能!请问哪位高手能帮忙下,用什么控件,或着什么方法能实现此功能啊!本人万分感激!!
[解决办法]
树 TreeView控件
左右分栏，使用不同的frame，点击控件时导航到正确的页面，然后再美化美化，差不多就是了
管家婆，没用过
[解决办法]
我用的是ext的ajax tree:
http://www.addtoo.net/visitor/view.aspx
[解决办法]
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<%--<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>--%>
<FRAMESET id="framset1" ROWS="65,*" scrolling="no"noresize>
<FRAME NAME="1" SRC="Default2.aspx" scrolling="no"noresize>
<FRAMESET id="framset2" COLS="170,*" scrolling="no">
<FRAME id="fram1" SRC="Default3.aspx" NAME="fram1" scrolling="no"noresize>
<FRAME id="fram2" src="Default10.aspx" name="fram2" scrolling="yes"noresize>
</FRAMESET>
</FRAMESET>
</html>
</body> 不要了 ,Default2.aspx,Default3.aspx, Default10.aspx 是三个页面,分几块就有几个页面
别忘记给分
[解决办法]
用Ajax 实现无刷的 那多好啊
给你个例子
数据库::
create db
CREATE TABLE [dbo].[tbTree] (
[ID] [int] IDENTITY (1, 1) NOT NULL ,
[Context] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[ParentID] [int] NULL
) ON [PRIMARY]
insert data
SET IDENTITY_INSERT tbtree ON
insert tbtree (ID,Context,ParentID) values ( 1, '中国 ',0)
insert tbtree (ID,Context,ParentID) values ( 2, '北京 ',11)
insert tbtree (ID,Context,ParentID) values ( 3, '天津 ',11)
insert tbtree (ID,Context,ParentID) values ( 4, '河北省 ',1)
insert tbtree (ID,Context,ParentID) values ( 5, '广东省 ',1)
insert tbtree (ID,Context,ParentID) values ( 6, '广州 ',5)
insert tbtree (ID,Context,ParentID) values ( 7, '四川省 ',1)
insert tbtree (ID,Context,ParentID) values ( 8, '成都 ',7)
insert tbtree (ID,Context,ParentID) values ( 9, '深圳 ',5)
insert tbtree (ID,Context,ParentID) values ( 10, '石家庄 ',4)
insert tbtree (ID,Context,ParentID) values ( 11, '辽宁省 ',1)
insert tbtree (ID,Context,ParentID) values ( 12, '大连 ',11)
insert tbtree (ID,Context,ParentID) values ( 13, '上海 ',1)
insert tbtree (ID,Context,ParentID) values ( 14, '天河软件园 ',6)
insert tbtree (ID,Context,ParentID) values ( 15, '汕头 ',5)
SET IDENTITY_INSERT tbtree off
JS文件:
function TreeView(TvCanvert,id,Text,Url,Image,Target)
{
this.TvCanvert=TvCanvert;
this.id=id;
this.Text=Text;
this.Url=Url;
this.Image=Image;
this.Target=Target;
}
TreeView.prototype.RootNode=function()
{
var s= " ";
s+= ' <table border= "0 " cellpadding= "1 " cellspacing= "0 "> ';
s+= ' <tr> ';
s+= ' <td> <img src= "plus.png " mk= "ParentDiv_ '+this.id+ ' " name= "ParentImage " onclick= "onParentNodeTextClick(this) " style= "cursor:pointer; "/> </td> ';
s+= ' <td> <a class= "parentTreeNode " name= "ParentText " mk= "ParentDiv_ '+this.id+ ' " onclick= "onParentNodeTextClick(this); " style= "cursor:pointer; "> ';
s+=this.Text;
s+= ' </a> ';
s+= ' </td> ';
s+= ' </tr> ';
s+= ' <tr> ';
s+= ' <td> </td> <!-- SPACING --> ';
s+= ' <td> <DIV id= "ParentDiv_ '+this.id+ ' " style= "display:none "> ';
s+= ' </DIV> </td> ';
s+= ' </tr> ';
s+= ' </table> ';
this.TvCanvert.insertAdjacentHTML( 'beforeEnd ',s);
}
TreeView.prototype.AddCurrentNode=function(PNode)
{
var s= " ";
s+= ' <table border= "0 " cellpadding= "1 " cellspacing= "0 "> ';
s+= ' <tr> ';
s+= ' <td> <img src= "plus.png " name= "RootImage " mk= "ParentDiv_ '+this.id+ ' " onclick= "onParentNodeTextClick(this) " style= "cursor:pointer; "/> </td> ';
s+= ' <td> <a class= "parentTreeNode " name= "ParentText " mk= "ParentDiv_ '+this.id+ ' " onclick= "onParentNodeTextClick(this); " style= "cursor:pointer; "> ';
s+=this.Text;
s+= ' </a> ';
s+= ' </td> ';
s+= ' </tr> ';
s+= ' <tr> ';
s+= ' <td> </td> <!-- SPACING --> ';
s+= ' <td> <DIV id= "ParentDiv_ '+this.id+ ' " style= "display:none "> ';
s+= ' </DIV> </td> ';
s+= ' </tr> ';
s+= ' </table> ';
var div=document.getElementById( "ParentDiv_ "+PNode.id);
div.insertAdjacentHTML( 'beforeEnd ',s);
}
function onParentNodeTextClick(obj)
{
var div=document.getElementById(obj.mk);
if(div.style.display== "none ")
{
div.style.display= " ";
obj.src= "minus.png ";
}
else
{
div.style.display= "none ";
obj.src= "plus.png ";
}
}
前台:
<title> Untitled Page </title>
<script language= "javascript " src= "js/treedigui.js "> </script>
</head>
<body>
<form id= "form1 " runat= "server ">
<div id= "Canvert ">
</div>
<script>
var count=0;
function Addtree(ParentID,node)
{
// debugger;
count++;
var Canvert=document.getElementById( "Canvert ");
var ds=treedigui.ds(parseInt(ParentID));
var dt=ds.value.Tables[0];
for(var i=0;i <dt.Rows.length;i++)
{
if(node==null)
{
// debugger;
var Rtv=new TreeView(Canvert, "mytree "+count+ "_ ",dt.Rows[i][ "Context "].toString(), "http:// ", " ", " ");
Rtv.RootNode();
Addtree(dt.Rows[i][ "ID "].toString(),Rtv);
}
else
{
var Node1=new TreeView(Canvert, "mytree "+count+ "_ ",dt.Rows[i][ "Context "].toString(), "http:// ", " ", " ");
// debugger;
Node1.AddCurrentNode(node);
Addtree(dt.Rows[i][ "ID "].toString(),Node1);
}
}
}
Addtree(0,null);
</script>
</form>
</body>
</html>
后台:
private void Page_Load(object sender, System.EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(treedigui));
//调用递归函数，完成树形结构的生成
//AddTree(0, (TreeNode)null);
}
[AjaxPro.AjaxMethod]
public DataSet ds(int id)
{
// 定义数据库连接
SqlConnection CN = new SqlConnection();
//初始化连接字符串
CN.ConnectionString = "data source=.;initial catalog=michael;user id=sa;Password=43464616; ";
SqlDataAdapter adp = new SqlDataAdapter( "select * from tbTree where ParentID= "+id, CN);
DataSet ds = new DataSet();
adp.Fill(ds);
//this.ViewState[ "ds "] = ds;
return ds;
}
引用 AjaxPro.2.dll 这样就可以实现了