在下拉框中显示树形菜单

    #region   在下拉框中显示树形菜单

    private void BindDdlData(DropDownList ddl, int id)

    {

        DataSet ds = (DataSet)this.ViewState["ds"];

        DataView dv = new DataView(ds.Tables[0]);

        dv.RowFilter = "parentid = " + id.ToString();

        int m = 0;

        foreach (DataRowView drv in dv)

        {

            m++;

            string blank = "";

            if (id != 0)

            {

                for (int i = 0; i < m; i++)

                {

                    blank += "-";

                }

            }

            ListItem li = new ListItem();

            li.Text = blank + drv["categoryname"].ToString();

            li.Value = drv["categoryid"].ToString();

            ddl.Items.Add(li);

            BindDdlData(ddl, Convert.ToInt32(drv["categoryid"]));

        }

    }

    #endregion   在下拉框中显示树形菜单
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个基于 Vue 的树形组件下拉框的示例代码: ```html <template> <div class="tree-select"> <div class="tree-select__input" @click="toggleDropdown"> <div class="tree-select__input-text">{{ selectedNode.name }}</div> <div class="tree-select__input-icon"></div> </div> <transition name="tree-select__dropdown"> <div v-if="isDropdownVisible" class="tree-select__dropdown"> <ul> <li v-for="node in treeData" :key="node.id"> <div class="tree-select__dropdown-item" @click="selectNode(node)"> <div class="tree-select__dropdown-item-text">{{ node.name }}</div> <div v-if="node.children" class="tree-select__dropdown-item-icon"></div> </div> <tree-select-dropdown v-if="node.children && node.id === selectedNode.id" :tree-data="node.children" @select="selectNode"></tree-select-dropdown> </li> </ul> </div> </transition> </div> </template> <script> export default { name: 'TreeSelect', props: { treeData: { type: Array, required: true }, value: { type: Object, required: true } }, data() { return { isDropdownVisible: false } }, computed: { selectedNode() { return this.value } }, methods: { toggleDropdown() { this.isDropdownVisible = !this.isDropdownVisible }, selectNode(node) { this.$emit('select', node) this.isDropdownVisible = false } }, components: { TreeSelectDropdown: { name: 'TreeSelectDropdown', props: { treeData: { type: Array, required: true } }, methods: { selectNode(node) { this.$emit('select', node) } } } } } </script> <style scoped> .tree-select { position: relative; } .tree-select__input { display: flex; align-items: center; justify-content: space-between; border: 1px solid #ccc; border-radius: 4px; padding: 8px; cursor: pointer; } .tree-select__input-text { flex: 1; } .tree-select__input-icon { width: 16px; height: 16px; background: url('https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/tree-icon.png'); background-position: -40px -80px; } .tree-select__dropdown { position: absolute; top: 100%; left: 0; z-index: 999; width: 100%; background: #fff; border: 1px solid #ccc; border-top: none; } .tree-select__dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 8px; cursor: pointer; } .tree-select__dropdown-item:hover { background: #f0f0f0; } .tree-select__dropdown-item-text { flex: 1; } .tree-select__dropdown-item-icon { width: 16px; height: 16px; background: url('https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/tree-icon.png'); background-position: -40px -80px; } </style> ``` 在上面的示例代码,`TreeSelect` 组件是树形下拉框的主组件。它包含一个下拉框输入框和一个下拉框菜单,当用户点击输入框时,下拉框菜单将展开或收起。下拉框菜单的每个菜单项都是一个 `TreeSelectDropdown` 子组件,它可以递归地渲染树形结构。 在 `TreeSelect` 组件,我们使用 `isDropdownVisible` 状态来控制下拉框菜单显示与隐藏。当用户点击输入框时,我们将 `isDropdownVisible` 设置为 `true`,下拉框菜单就会显示出来。当用户点击菜单项时,我们会向上传递一个 `select` 事件,同时将 `isDropdownVisible` 设置为 `false`,下拉框菜单就会隐藏起来。 在 `TreeSelectDropdown` 组件,我们使用 `v-if` 指令来判断当前节点是否有子节点,如果有,就递归地渲染出子节点的下拉框菜单。当用户点击菜单项时,我们同样会向上传递一个 `select` 事件,这样就可以让父组件更新当前选的节点了。 最后,我们还定义了一些样式规则,用来美化树形下拉框的外观。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值