下拉框显示多级菜单

效果图:

 

生成HTML源码:

 

表结构:

 

/// <summary>
/// 绑定控件
/// </summary>
protected void BindCtrl()
{//上级菜单
    SiteNavsBLL bllSiteNavs = new SiteNavsBLL();
    BindNav(bllSiteNavs, 0);
    ddlParentNav.Items.Insert(0,new ListItem("一级菜单","0-0"));
}

/// <summary>
/// 递归遍历菜单
/// </summary>
/// <param name="bll"></param>
/// <param name="ParentId"></param>
protected void BindNav(SiteNavsBLL bll, long ParentId=0)
{
    DataTable dtNav = bll.GetListJoin("ParentId=" + ParentId).Tables[0];
    if (dtNav.Rows.Count <= 0)
    {
        return;
    }

    //遍历菜单
    foreach (DataRow drNav in dtNav.Rows)
    {
        string dataText = "";
        string dataValue = "";
        //获取菜单级别
        int NavLevel;
        if (!int.TryParse(drNav["NavLevel"].ToString(), out NavLevel))
        {
            NavLevel = 1;
        }
                

        // |-- 菜单名称 
        for (int i = 0; i < NavLevel; i++)
        {
            dataText+="|- ";
        }
        dataText += drNav["Name"].ToString();

        dataValue = drNav["NavLevel"].ToString() + "-" + drNav["Id"].ToString();

        ddlParentNav.Items.Add(new ListItem(dataText, dataValue));

        BindNav( bll, Convert.ToInt64(drNav["Id"]));
    }
}

 

转载于:https://www.cnblogs.com/linyongqin/articles/6008803.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element Plus 是一款基于 Vue.js 的 UI 组件库,它提供了丰富的组件来构建用户界面。在 Element Plus 中,可以使用 Cascader 组件来实现多级下拉菜单。 Cascader 组件可以根据数据源逐级展示下拉选项,用户可以通过点击选择项来进行多级选择。你可以通过传递一个数组作为数据源来定义多级菜单的选项,每个选项可以包含子选项。 下面是一个简单的示例,展示了如何使用 Cascader 组件创建多级下拉菜单: ```html <template> <el-cascader v-model="selectedOptions" :options="options" placeholder="请选择" ></el-cascader> </template> <script> export default { data() { return { selectedOptions: [], options: [ { value: '1', label: '一级菜单', children: [ { value: '1-1', label: '二级菜单1', children: [ { value: '1-1-1', label: '三级菜单1' }, { value: '1-1-2', label: '三级菜单2' } ] }, { value: '1-2', label: '二级菜单2' } ] }, { value: '2', label: '一级菜单2' } ] }; } }; </script> ``` 在这个示例中,`options` 数组定义了多级菜单的选项,每个选项都有一个 `value` 和一个 `label` 属性,用于指定选项的值和显示文本。如果一个选项还有子选项,可以在该选项下添加一个 `children` 数组,并依次定义子选项。 通过 `v-model` 指令可以将选中的值绑定到 `selectedOptions` 变量上,可以通过读取 `selectedOptions` 变量来获取用户选择的多级菜单的值。 这只是一个简单的示例,你可以根据自己的需求定制更复杂的多级下拉菜单。你可以参考 Element Plus 的官方文档来了解更多关于 Cascader 组件的用法和配置选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值