Menu动态加载数据

aspx:
None.gif      < asp:Menu  ID  = "tvMenu"  runat  ="server" >
None.gif                
< StaticMenuStyle  BackColor ="Silver"   />
None.gif            
< StaticMenuItemStyle  BackColor ="LightSteelBlue"   />
None.gif            
< DynamicHoverStyle  BackColor ="Fuchsia"   />
None.gif            
< StaticSelectedStyle  BackColor ="Red"   />
None.gif    
</ asp:Menu >
cs:
None.gif using  System;
None.gif
using  System.Data;
None.gif
using  System.Configuration;
None.gif
using  System.Collections;
None.gif
using  System.Web;
None.gif
using  System.Web.Security;
None.gif
using  System.Web.UI;
None.gif
using  System.Web.UI.WebControls;
None.gif
using  System.Web.UI.WebControls.WebParts;
None.gif
using  System.Web.UI.HtmlControls;
None.gif
using  System.Data.SqlClient;
None.gif
None.gif
public  partial  class  Menutest : System.Web.UI.Page
ExpandedBlockStart.gifContractedBlock.gif
dot.gif {
InBlock.gif      SqlConnection Conn 
= new SqlConnection("server=A3161228A954417;database=SMS;uid=sa;pwd=sa");
InBlock.gif    DataSet ds;
InBlock.gif    
protected void Page_Load(object sender, EventArgs e)
ExpandedSubBlockStart.gifContractedSubBlock.gif    
dot.gif{
InBlock.gif        
ExpandedSubBlockEnd.gif    }

InBlock.gif    
private DataSet createDataSet()
ExpandedSubBlockStart.gifContractedSubBlock.gif    
dot.gif{
InBlock.gif        ds 
= new DataSet();
InBlock.gif        
string sqlStr = "select * from Tree ";
InBlock.gif        SqlDataAdapter cmdSelect 
= new SqlDataAdapter(sqlStr, Conn);
InBlock.gif        cmdSelect.Fill(ds, 
"Tree");
InBlock.gif        
return ds;
ExpandedSubBlockEnd.gif    }

InBlock.gif    
protected void InitTree(MenuItemCollection Nds, string parentId)//用递归方法动态生成节点
ExpandedSubBlockStart.gifContractedSubBlock.gif
    dot.gif{
InBlock.gif        DataView dv 
= new DataView();
InBlock.gif        MenuItem tmpNode;
InBlock.gif        dv.Table 
= ds.Tables["Tree"];
InBlock.gif        dv.RowFilter 
= "pat_id=" + "'" + parentId + "'";
InBlock.gif        
foreach (DataRowView drv in dv)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            tmpNode 
= new MenuItem();
InBlock.gif            tmpNode.Value 
= drv["node_id"].ToString();
InBlock.gif            tmpNode.Text 
= drv["node_name"].ToString();
InBlock.gif            tmpNode.NavigateUrl 
= drv["url"].ToString();
InBlock.gif            Nds.Add(tmpNode);
InBlock.gif            
this.InitTree(tmpNode.ChildItems, tmpNode.Value);
ExpandedSubBlockEnd.gif        }

ExpandedSubBlockEnd.gif    }

InBlock.gif    
protected void tvMenu_Load(object sender, EventArgs e)
ExpandedSubBlockStart.gifContractedSubBlock.gif    
dot.gif{
InBlock.gif        
if (!IsPostBack)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            tvMenu.Dispose();
InBlock.gif            Conn.Open();
InBlock.gif            
this.createDataSet();
InBlock.gif            Conn.Close();
InBlock.gif            
this.InitTree(tvMenu.Items, "0");
ExpandedSubBlockEnd.gif        }

ExpandedSubBlockEnd.gif    }

ExpandedBlockEnd.gif}

脚本:
None.gif if   exists  ( select   *   from  dbo.sysobjects  where  id  =   object_id (N ' [dbo].[tree] ' and   OBJECTPROPERTY (id, N ' IsUserTable ' =   1 )
None.gif
drop   table   [ dbo ] . [ tree ]
None.gif
GO
None.gif
None.gif
CREATE   TABLE   [ dbo ] . [ tree ]  (
None.gif    
[ node_id ]   [ int ]   NOT   NULL  ,
None.gif    
[ node_name ]   [ varchar ]  ( 20 ) COLLATE Chinese_PRC_CI_AS  NULL  ,
None.gif    
[ pat_id ]   [ int ]   NULL  ,
None.gif    
[ url ]   [ nvarchar ]  ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL  ,
None.gif    
[ icon ]   [ varchar ]  ( 20 ) COLLATE Chinese_PRC_CI_AS  NULL  ,
None.gif    
[ memo ]   [ varchar ]  ( 30 ) COLLATE Chinese_PRC_CI_AS  NULL  
None.gif
ON   [ PRIMARY ]
None.gif
GO
None.gif
None.gif
数据如下:(说明:用#可消除刷新)
None.gif 1     根结点     0     #     NULL      NULL
None.gif
2     子结点2     1     #     NULL      NULL
None.gif
3     子结点3     1     #     NULL      NULL
None.gif
4     子结点4     1     #     NULL      NULL
None.gif
5     结点2 - 1      2      Default .aspx     NULL      NULL
None.gif
6     结点2 - 2      2     #     NULL      NULL
None.gif
7     结点3 - 1      3     #     NULL      NULL
None.gif
8     结点3 - 2      3     #     NULL      NULL


在Vue.js中,结合TypeScript,如果你想根据JSON数据动态创建`<menu>`组件,你可以采用以下步骤: 1. 首先,在你的TypeScript组件中导入必要的库,如Vue、axios或其他用于获取JSON数据的库。 ```typescript import Vue from 'vue'; import axios from 'axios'; ``` 2. 定义一个接口来描述你的JSON数据结构,假设菜单项有`title`和`children`属性。 ```typescript interface MenuItem { title: string; children?: MenuItem[]; // 如果子菜单也是菜单,则是一个数组 } ``` 3. 在`data()`函数中声明一个变量来存储菜单数据,并在`created()`生命周期钩子中从API或本地数据源获取JSON数据。 ```typescript export default { data() { return { menuData: [] as MenuItem[], // 初始化为空数组 }; }, created() { axios.get('/api/menu') // 替换为实际的API路径 .then(response => (this.menuData = response.data)) .catch(error => console.error('Error fetching menu:', error)); }, }; ``` 4. 在模板部分,使用`v-for`循环遍历`menuData`,动态生成`<menu>`元素。 ```html <template> <div> <ul v-for="(item, index) in menuData" :key="index"> <li>{{ item.title }} <!-- 使用递归或者条件渲染处理子菜单 --> <slot v-if="item.children"> <!-- 子菜单部分 --> <ul> <li v-for="child in item.children" :key="child.title"> {{ child.title }} </li> </ul> </slot> </li> </ul> </div> </template> ``` 5. 这样,每次`menuData`更新,对应的菜单项都会动态地被添加到页面上。注意如果子菜单存在,可以使用递归来处理子菜单的显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值