如何创建下拉列表为一个树列表?(此文为dev控件中,服务器控件暂不知,但想方法应该都差不多吧)

 1 //前端控件代码:<dx:ASPxDropDownEdit ID="drop_treelist" runat="server" ClientInstanceName="DropDownEdit" Width="280px" NullText="选择商品分类" AllowUserInput="False" AnimationType="None">
 2                                             <DropDownWindowStyle>
 3                                                 <Border BorderWidth="0px" />
 4                                             </DropDownWindowStyle>
 5                                             <ClientSideEvents Init="UpdateSelection" DropDown="OnDropDown" />
 6                                             <DropDownWindowTemplate>
 7                                                 <div>
 8                                                     <dx:ASPxTreeList ID="TreeList" ClientInstanceName="TreeList" runat="server" Width="280px" OnCustomJSProperties="TreeList_CustomJSProperties" KeyFieldName="cateid" ParentFieldName="parentid" Theme="Mulberry"
 9                                                           OnHtmlRowPrepared="TreeList_HtmlRowPrepared">
10                                                         <Settings VerticalScrollBarMode="Auto" ScrollableHeight="200" />
11                                                         <ClientSideEvents FocusedNodeChanged="UpdateSelection" />
12                                                         <BorderBottom BorderStyle="Solid" />
13                                                         <Settings ShowColumnHeaders="false" />
14                                                         <SettingsBehavior AllowFocusedNode="true" AutoExpandAllNodes="false" FocusNodeOnLoad="false"/>
15                                                         <SettingsPager Mode="ShowAllNodes"></SettingsPager>
16                                                         <Styles>
17                                                             <Node Cursor="pointer"></Node>
18                                                             <Indent Cursor="default"></Indent>
19
20                                                         </Styles>
21
22                                                         <Columns>
23                                                             <dx:TreeListTextColumn FieldName="catename"  Caption="分类名称" VisibleIndex="1"></dx:TreeListTextColumn>
24                                                             <dx:TreeListTextColumn FieldName="LAYER" Caption="层级" Visible="false"></dx:TreeListTextColumn>
25                                                         </Columns>
26                                                     </dx:ASPxTreeList>
27                                                 </div>
28
29                                             </DropDownWindowTemplate>
30                                         </dx:ASPxDropDownEdit>

//如何给其绑定数据并获得选中的树内容放置于显示框中

private void showGoodsListTree()   //绑定数据
{
ASPxTreeList tree = drop_treelist.FindControl("TreeList") as ASPxTreeList;
DataSet ds = new DataSet();
ds = goodsmanagebll.Get_categoriesTreee();
tree.DataSource = ds.Tables[0];
tree.DataBind();
//string n = tree.FocusedNode.GetValue("LAYER").ToString();

}

//通过此事件,可将选中的树值放置显示与下拉框中,还要写js
protected void TreeList_CustomJSProperties(object sender, DevExpress.Web.ASPxTreeList.TreeListCustomJSPropertiesEventArgs e)
{
ASPxTreeList treeList = sender as ASPxTreeList;
Hashtable nameTable = new Hashtable();
//treeList.FocusedNode.ParentNode.AllowSelect = !treeList.FocusedNode.ParentNode.HasChildren;
foreach (TreeListNode node in treeList.GetVisibleNodes())
nameTable.Add(node.Key, string.Format("{0}", node["catename"]));
e.Properties["cpEmployeeNames"] = nameTable;
}

js:

<script type="text/javascript">

//star_商品分类下拉tree选择读取
function UpdateSelection() {
var employeeName = "";
var focusedNodeKey = TreeList.GetFocusedNodeKey();
ASPxCallbackPanel1.PerformCallback(focusedNodeKey);
if (focusedNodeKey != "")
employeeName = TreeList.cpEmployeeNames[focusedNodeKey];
UpdateControls(focusedNodeKey, employeeName);

}
function UpdateControls(key, text) {
DropDownEdit.SetText(text);
DropDownEdit.SetKeyValue(key);
DropDownEdit.GetText() != ""
TreeList.GetFocusedNodeKey() != ""
// DropDownEdit.HideDropDown();
}

function OnDropDown() {
TreeList.SetFocusedNodeKey(DropDownEdit.GetKeyValue());
TreeList.MakeNodeVisible(TreeList.GetFocusedNodeKey());
}
//end_商品分类下拉tree选择读取

function btnClick_save(s, e) {

ASPxCallback1_save.PerformCallback();
}

</script>

效果图:

时间: 2024-11-10 08:02:48

如何创建下拉列表为一个树列表?(此文为dev控件中,服务器控件暂不知,但想方法应该都差不多吧)的相关文章

ASP.NET列表生成组件DbNetList控件下载及介绍

DbNetList是一个综合功能的列表选择组件,作为动态HTML(DHTML)实现.运用DbNetList,你可以快速为自己的web页面添加数据库驱动的列表.下拉式列表(drop-down).树型和复选框列表.DbNetList兼容最流行的各种数据库服务器,包括:SQL Server.Oracle和Informix. 具体功能: 生成列表.多列列表.下拉式列表(drop-down).树型列表.复选框列表... 提供ASP 和 ASP.NET的本地版本. 基于浏览器.无论何处均可设计和运行.无需客

一个Activity掌握Android4.0新控件 (转)

原文地址:http://blog.csdn.net/lavor_zl/article/details/51261380 谷歌在推出Android4.0的同时推出了一些新控件,Android4.0中最常用的新控件有下面5种. 1. Switch的使用 Switch顾名思义,就是开关的意思,有开和关两种状态. 当Switch处于关闭状态时: 当Switch处于打开状态时: 怎么在定义xml中定义Switch <Switch android:id="@+id/_switch" andr

Flex 列表控件中的操作

主要操作包括:显示提示,使用图标,编辑列表条目中数据. 1.使用数据提示: 当鼠标停留在条目上时,可以显示该条目的相关数据提示. 当利用滚动条时,可以显示滚动条的相关提示. 在列表控件中使用showDataTips和showScrollTips属性指明是否显示条目提示和滚动条提示. 1 <?xml version="1.0" encoding="utf-8"?> 2 <s:WindowedApplication xmlns:fx="htt

分享一个Winform里面的HTML编辑控件Zeta HTML Edit Control,汉化附源码

我们知道,Web开发上有很多HTML的编辑控件,如FCKEditor.CKEditor.kindeditor等等,很多都做的很好,而虽然Winform里面有WebBrowser控件,但是默认这个控件是不允许编辑内容的,可以显示网页而已.Winform开发里面,有些使用RichTextBox控件来编辑HTML,也有一些结合WebBrowser控件来实现内容的编辑,其中我觉得做的最好的应该是Zeta HTML Edit Control(http://www.codeproject.com/Artic

一个Activity掌握Android5.0新控件 (转)

原文地址:http://blog.csdn.net/lavor_zl/article/details/51279386 谷歌在推出Android5.0的同时推出了一些新控件,Android5.0中最常用的新控件有下面5种. 1. CardView(卡片视图) CardView顾名思义是卡片视图,它继承FrameLayout.它是一个带圆角的背景和阴影FrameLayout.CardView被包装为一种布局,并且经常在ListView和RecyclerView的Item布局中,作为容器使用. Ca

android 让一个控件按钮居于底部的几种方法

android 让一个控件按钮居于底部的几种方法1.采用linearlayout布局:android:layout_height="0dp" <!-- 这里不能设置fill_parent -->android:layout_weight="1" <!-- 这里设置layout_weight=1是最关键的,否则底部的LinearLayout无法到底部 -->2. 采用relativelayout布局:android:layout_alignPa

一个基于jquery的智能提示控件intellSeach.js

一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户使用.说白了,就是用户边输入,系统会提示相关的结果:或者,当用户点击搜索框时,就推荐一些内容,如360.百度都会提示今天的主要新闻或搜索量大的内容. jquery 已经有一个这样的插件了,叫 autocomplete, 但我觉得不好用.关于autocomplete的介绍也很多,有兴趣的朋友可以去试试

福利到~分享一个基于jquery的智能提示控件intellSeach.js

一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户使用.说白了,就是用户边输入,系统会提示相关的结果:或者,当用户点击搜索框时,就推荐一些内容,如360.百度都会提示今天的主要新闻或搜索量大的内容. jquery 已经有一个这样的插件了,叫 autocomplete, 但我觉得不好用.关于autocomplete的介绍也很多,有兴趣的朋友可以去试试

事件委托应用:在父控件中创建子控件,并接收值

传值过程使用委托方法 定义一个打开按扭,一个文本框 1 /// <summary> 2 /// 增加父控件 3 /// </summary> 4 public void AddParent(BaseControl ctl) 5 { 6 foreach (Control ct2 in this.Parent.Controls) 7 { 8 if (ct2.Name == ctl.Name) { 9 ct2.Focus(); 10 return; 11 } 12 } 13 ctl.Wi