• 发布一款层次下拉列表控件


    在项目中经常遇到树状结构的对象比如产品分类、部门结构、地区……对于这类对象的呈现,一般都使用树控件(比如VS2005自带的TreeView控件)。但是树控件的使用和操作都比较复杂,对于一些比较简单的操作,比如单选其中的一个节点的情况则可用使用下拉列表框来代替。要在DropDownList中展示出树结构的层次,那就必须在每个节点的Text前加入一定的占位符,以实现层次的效果,比如:

    由于这种下拉列表控件在项目中经常使用,于是决定写一个通用的服务器控件出来。该控件继承自DropDownList,在使用中只需要为该控件设置用于数据绑定的DataTextField和DataValueField,以及新增的属性ChildProperty(string,对象的Child属性的名字)和DeepChar(string,在表示层次中使用的占位符,默认是“--”),设置了这4个属性后,在后台就只需要将树结构对象的Root节点作为DataSource,然后执行DataBind()即可。

    控件Code

    具体调用示例:

    1,将该控件添加到aspx页面中并设置必要的属性。

    <cc1:DropDownTreeList ID="DropDownTreeList1" runat="server" 
                    ChildProperty
    ="ChildArea" DataTextField="Name" DataValueField="Code" 
                    DeepChar
    ="--"> 

    2,在页面的后台代码中添加数据源并进行数据绑定。

    后台数据绑定

    运行后的效果就是:

    由于本人接触服务器控件开发的时间并不长,对服务器控件开发经验还不足,该控件有需要改进或有错误的地方希望大家指正。

    另外这个控件目前我发现的一个问题就是我将DataBind方法完全重写了,所以控件的DataTextFormatString失效了,由于很少使用这个属性,所以一般不影响使用。不知道有什么办法能够解决这个问题?

    【本文章出自博客园深蓝居,转载请注明作者出处,如果您觉得博主的文章对您有很大帮助,欢迎支付宝(studyzy@163.com)对博主进行打赏。】
  • 相关阅读:
    webpack入门
    react中的this.setState()
    Echarts学习之路3(在react中使用)
    Echarts学习之路2(基本配置项)
    react+mobx脚手架搭建多页面开发
    解决使用插件带来的页面弹框滚动穿透问题
    屏蔽微信内置底部前进后退按钮(很迫切的需求)
    input框输入金额处理的解决办法
    git仓库的创建以及本地代码上传
    又发现了一个git clone代码失败时的解决办法
  • 原文地址:https://www.cnblogs.com/studyzy/p/1080289.html
Copyright © 2020-2023  润新知