工作中点滴记录

永远保持学徒心态
  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
Telerik RadComboBox RadTreeView用法

项目中用到下拉列表，且希望下来列表中数据是以层级显示（树形显示）。Telerik公司开发的控件中RadComboBox控件提供这种功能；

Telerik 控件下载地址：下载

 

页面前台需要做如下引用：

页面源码 
 1  <telerik:RadComboBox ID="RadComboBox1" OnClientDropDownClosing="OnClientDropDownClosing"
 2                         runat="server" Height="240px" Width="305px" ShowToggleImage="True" Skin="WebBlue"
 3                         horizontalalignment="Left" Style="vertical-align: middle;">
 4                         <ItemTemplate>
 5                             <telerik:RadTreeView ID="ColumnTreeView"      runat="server">
 6                             </telerik:RadTreeView>
 7                         </ItemTemplate>
 8                         <Items>
 9                             <telerik:RadComboBoxItem Text="选择左侧菜单" />
10                         </Items>
11                     </telerik:RadComboBox>

注意：需要在页面中引入如下信息：

1，

第一 
1    <asp:ScriptManager ID="ScriptManager1" runat="server">
2     </asp:ScriptManager>

2，

第二 
 1 <script language="javascript" type="text/javascript">
 2     function OnClientDropDownClosing(sender, args) {
 3         var tree = $find("<%= columnTreeView.ClientID %>");
 4         var nodes = tree.get_checkedNodes();
 5         var strArr = new Array();
 6         for (var i = 0; i < nodes.length; i++) {
 7             if (nodes[i].get_nodes().length > 0) continue;
 8             strArr.push(nodes[i].get_text());
 9         }
10         sender.set_text(strArr.join(","));
11     }
12 </script>

后台中：

需要把数据绑定到控件中：

后台代码 
 1    protected RadTreeView columnTreeView;
 2     protected void Page_Load(object sender, EventArgs e)
 3     {
 4         columnTreeView = this.RadComboBox1.Items[0].FindControl("ColumnTreeView") as RadTreeView;
 5         if (!IsPostBack)
 6         {
 7             columnTreeView.ClearCheckedNodes();
 8             ColumnTreeViewDataBind();
 9         }
10     }
11     #region 绑定RadComboBox RadTreeView
12     public void ColumnTreeViewDataBind()
13     {
14         DataTable dtParent = bll.GetAllMenu(0);
15         List<Neo.NeoSuite.PurChase.Model.NeoMenu> list = new List<Neo.NeoSuite.PurChase.Model.NeoMenu>();
16         list = GetNeoMenuList(0, list);
17         columnTreeView.DataFieldID = "MENU_ID";
18         columnTreeView.DataFieldParentID = "ParentID";
19         columnTreeView.DataValueField = "MENU_ID";
20         columnTreeView.DataTextField = "Menu_Name";
21         columnTreeView.MultipleSelect = true;
22         columnTreeView.CheckBoxes = true;
23         columnTreeView.CheckChildNodes = true;
24         columnTreeView.DataSource = list;
25         columnTreeView.DataBind();
26         columnTreeView.ExpandAllNodes();
27     }
28     #endregion
29     #region 递归操作绑定 RadComboBox RadTreeView
30     /// <summary>
31     /// 递归操作绑定 RadComboBox RadTreeView
32     /// </summary>
33     /// <param name="parentID"></param>
34     /// <param name="list"></param>
35     /// <returns></returns>
36     public List<Neo.NeoSuite.PurChase.Model.NeoMenu> GetNeoMenuList(int parentID, List<Neo.NeoSuite.PurChase.Model.NeoMenu> list)
37     {
38         DataTable dt = bll.GetAllMenu(parentID);
39         if (dt == null || dt.Rows.Count <= 0)
40         {
41             return list;
42         }
43         else
44         {
45             for (int i = 0; i < dt.Rows.Count; i++)
46             {
47                 Neo.NeoSuite.PurChase.Model.NeoMenu model = new Neo.NeoSuite.PurChase.Model.NeoMenu();
48                 model.Menu_ID = Convert.ToInt32(dt.Rows[i]["MENU_ID"].ToString());
49                 model.Menu_Name = dt.Rows[i]["Menu_Name"].ToString();
50                 model.ParentID = Convert.ToInt32(dt.Rows[i]["ParentID"].ToString());
51                 list.Add(model);
52                 GetNeoMenuList(model.Menu_ID, list);
53             }
54             return list;
55         }
56     }
57     #endregion

这样数据就绑定成功，产生如上图所示结果。绑定数据的时候最重要是把数据库构建成树形结构！

另外，可能会在不同浏览器中产生不同的样式，通常可以用IETEST进行调试，把内部样式float:left 修改为float:none;

 

 取选定后的数据：

获取信息 
 1   Dictionary<string, string> dict = new Dictionary<string, string>();    
 2 foreach (RadTreeNode tr in columnTreeView.CheckedNodes)
 3         {
 4             GetParentNode(dict, tr);
 5             if (!dict.ContainsKey(tr.Value))
 6             {
 7                 dict.Add(tr.Value, tr.ParentNode == null ? "0" : tr.ParentNode.Value);
 8             }
 9         }
10 
11 
12 
13  #region  递归获得父节点信息
14     /// <summary>
15     /// 递归获得父节点信息
16     /// </summary>
17     /// <param name="dict">键值对</param>
18     /// <param name="tr"></param>
19     /// <returns></returns>
20     public Dictionary<string, string> GetParentNode(Dictionary<string, string> dict, RadTreeNode tr)
21     {
22         if (tr.ParentNode == null)
23         {
24             return dict;
25         }
26         else
27         {
28             if (!dict.ContainsKey(tr.ParentNode.Value))
29             {
30                 dict.Add(tr.ParentNode.Value, tr.ParentNode.ParentNode == null ? "0" : tr.ParentNode.ParentNode.Value);
31             }
32             GetParentNode(dict, tr.ParentNode);
33         }
34         return dict;
35     }
36     #endregion

 --------------------------------------------------------------------------------------------------------------------------------

下面一步一步的完成上面的功能：

创建表：

表Goods 
1 CREATE TABLE [dbo].[Goods](
2     [ID] [int] IDENTITY(1,1) NOT NULL,
3     [GoodsCnName] [nvarchar](50) NULL,
4     [ParentID] [int] NULL,
5  CONSTRAINT [PK_Goods] PRIMARY KEY CLUSTERED ([ID] ASC)
6 )

往表中插入数据：

插入脚本 
 1 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (1, N'钢材', 0)
 2 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (2, N'板材', 0)
 3 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (3, N'型材', 0)
 4 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (4, N'铁矿石', 0)
 5 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (5, N'焦炭', 0)
 6 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (6, N'高线', 1)
 7 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (7, N'焊管', 1)
 8 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (8, N'螺纹钢', 1)
 9 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (9, N'盘螺', 1)
10 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (10, N'普线', 1)
11 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (11, N'圆钢', 1)
12 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (12, N'热轧板卷', 2)
13 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (13, N'冷轧板卷', 2)
14 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (14, N'中厚板', 2)
15 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (15, N'槽钢', 3)
16 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (16, N'角钢', 3)
17 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (17, N'工字钢', 3)
18 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (18, N'热轧H型钢', 3)
19 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (19, N'酸性干基 62-63', 4)
20 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (20, N'碱性干基 62-63', 4)
21 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (21, N'酸性湿基 62-63', 4)
22 INSERT [dbo].[Goods] ([ID], [GoodsCnName], [ParentID]) VALUES (22, N'碱性湿基 62-63', 4)

在工具箱中添加Telerik.Web.UI.dll  ，等待一会在工具箱出现一系列关于Telerik的控件集合；拖动RadComboBox控件到我们的页面上面，此时在页面上面产生<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>注册项；

页面源码如下：

页面源码 
1 <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="180px" Height="250px" OnClientDropDownClosing="OnClientDropDownClosing" ShowToggleImage="True" Skin="WebBlue" horizontalalignment="Left" Style="vertical-align: middle;">
2         <ItemTemplate>
3             <telerik:RadTreeView ID="ColumnTreeView1" runat="server" >
4             </telerik:RadTreeView>
5         </ItemTemplate>
6         <Items>
7             <telerik:RadComboBoxItem Text="请选择交易品信息" />
8         </Items>
9     </telerik:RadComboBox>

js方法：

js 
 1   <script language="javascript" type="text/javascript">
 2      function OnClientDropDownClosing(sender, args) {
 3          var tree = $find("<%= columnTreeView.ClientID %>");
 4          var nodes = tree.get_checkedNodes();
 5          if (nodes.length <= 0) {
 6              sender.set_text("请选择交易品信息");
 7              return;
 8          }
 9          var strArr = new Array();
10          for (var i = 0; i < nodes.length; i++) {
11              if (nodes[i].get_nodes().length > 0) continue;
12              strArr.push(nodes[i].get_text());
13          }
14         sender.set_text(strArr.join(","));
15     }
16 </script>

后台方法如下：

后台方法 
 1 public partial class _Default : System.Web.UI.Page
 2 {
 3     public string connectionString = "Data Source=.;Initial Catalog=DBTest;Integrated Security=True";
 4     public RadTreeView columnTreeView;
 5     protected void Page_Load(object sender, EventArgs e)
 6     {
 7         columnTreeView = (RadTreeView)this.RadComboBox1.Items[0].FindControl("ColumnTreeView1");
 8         
 9         if (!IsPostBack)
10         {
11             columnTreeView.ClearCheckedNodes();
12             BindTreeView();
13         }
14     }
15     public void BindTreeView()
16     {
17         List<Goods> list = new List<Goods>();
18         DataTable dt = GetGoods(0);
19         for (int i = 0; i < dt.Rows.Count; i++)
20         {
21             Goods good = new Goods();
22             good.ID = Convert.ToInt32(dt.Rows[i]["ID"].ToString());
23             good.GoodsCnName = dt.Rows[i]["GoodsCnName"].ToString();
24             good.ParentID = Convert.ToInt32(dt.Rows[i]["ParentID"].ToString());
25             list.Add(good);
26             DataTable dtt = GetGoods(good.ID);
27             if (dt == null || dt.Rows.Count <= 0)
28             {
29                 continue;
30             }
31             for (int j = 0; j < dtt.Rows.Count; j++)
32             {
33                 Goods goodd = new Goods();
34                 goodd.ID = Convert.ToInt32(dtt.Rows[j]["ID"].ToString());
35                 goodd.GoodsCnName = dtt.Rows[j]["GoodsCnName"].ToString();
36                 goodd.ParentID = Convert.ToInt32(dtt.Rows[j]["ParentID"].ToString());
37                 list.Add(goodd);
38             }
39         }
40         columnTreeView.DataFieldID = "ID";
41         columnTreeView.DataValueField = "ID";
42         columnTreeView.DataTextField = "GoodsCnName";
43         columnTreeView.DataFieldParentID = "ParentID";
44         columnTreeView.CheckBoxes = true;
45         columnTreeView.CheckChildNodes = true;
46         columnTreeView.MultipleSelect = true;
47         columnTreeView.DataSource = list;
48         columnTreeView.DataBind();
49      //   columnTreeView.ExpandAllNodes();
50         columnTreeView.SingleExpandPath = true;
51     }
52 
53     public DataTable GetGoods(int parentID)
54     {
55         string sql = "SELECT ID,GoodsCnName,ParentID FROM  Goods WHERE ParentID= @ParentID";
56         using (SqlConnection con = new SqlConnection(connectionString))
57         {
58             using (SqlCommand cmd = con.CreateCommand())
59             {
60                 con.Open();
61                 cmd.CommandText = sql;
62                 SqlParameter sp = new SqlParameter("@ParentID",SqlDbType.Int,4);
63                 sp.Value = parentID;
64                 cmd.Parameters.Add(sp);
65                 SqlDataAdapter da = new SqlDataAdapter(cmd);
66                 DataSet ds = new DataSet();
67                 da.Fill(ds);
68                 if (ds == null || ds.Tables.Count <= 0 || ds.Tables[0].Rows.Count <= 0)
69                 {
70                     return new DataTable();
71                 }
72                 return ds.Tables[0];
73             }   
74         }
75     }
76 }
77 public class Goods
78 {
79     private int id;
80     public int ID
81     {
82         get { return id; }
83         set { id = value; }
84     }
85 
86     private string goodsCnName;
87     public string GoodsCnName
88     {
89         get { return goodsCnName; }
90         set { goodsCnName = value; }
91     }
92 
93     private int parentID;
94     public int ParentID
95     {
96         get { return parentID; }
97         set { parentID = value; }
98     }
99 }

用的把一个泛型对象绑定到RadTreeView的DataSource中。

 

Telerik的帮助文档链接

posted on 2012-05-06 15:19  梦里故乡  阅读(8620)  评论(2)  编辑  收藏  举报