使用Silverlight Toolkit TreeView树形控件

本文支持两种方式的数据,一种为List集合,一种为json字符串。

在上篇给大家介绍了基于MVC5和Bootstrap的jQuery
TreeView树形控件(一)之数据支持json字符串、list集合。

最近在做的项目涉及到把json数据格式转换成list集合的需求,在网上看了一些文章,但是觉得比较凌乱,现在问题已经解决,特此写下此文章记录一下。

public static class DataHelper { /// /// js 序列化器 /// static
JavaScriptSerializer jss = new JavaScriptSerializer();
//注意:引用System.Web.Extensions.dll 类库 /// /// 将 对象 转成
json格式字符串 /// /// /// public static string Obj2Json(object obj) {
//把集合 转成 json 数组格式字符串 return jss.Serialize(obj); } }

     尽管在Silverlight
Toolkit中有相关的DEMO来演示如何使用TreeView控件,但其还是有一些功能没
被演示出来。因为在我们平时开发过程中,数据是被动态查询获取的(不是DEMO中的静态文件方式)。
因此今天就演示一下如何使用WCF来获取相应数据并使用TreeView来动态加载相应结点信息。

先来介绍一下后台返回list集合(推荐使用此方法):

这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了。

1.添加相关依赖

     首先,我们要创建一个WCF服务来获取相应的树形节点数据信息,如下:
    

控制器代码如下:

控制器代码如下:

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.6.2</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.6.2</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.codehaus.jackson/jackson-core-asl -->
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-core-asl</artifactId>
            <version>1.9.13</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.6.2</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.codehaus.jackson/jackson-mapper-asl -->
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
            <version>1.9.13</version>
        </dependency>

public class ForumInfo
{
    public int ForumID { get; set; }
    public int ParendID { get; set; }
    public string ForumName { get; set; }
}

public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>();
/// <summary>
/// TreeView视图
/// </summary>
/// <returns></returns>
public ActionResult May(string TypeCode,int parentId)
{
ViewBag.TypeCode = TypeCode;
ViewBag.ParentId = parentId;
return View();
}
[HttpPost]
public ActionResult GetTreeData(string TypeCode,int parentId)
{
List<TC_DictionaryInfo> DInfo = dbll.GetModelList("TypeCode="+TypeCode);
return Json(GetChildNodes(0,new NodeModel(){}, DInfo).nodes);
}
///<summary>
/// GetChildNodes方法,此方法使用递归
/// </summary>
/// <param name="parentId"></param>
/// <returns></returns>
public NodeModel GetChildNodes(int parentId,NodeModel childnodestr,List<TC_DictionaryInfo> DInfo)
{
List<TC_DictionaryInfo> DictionaryList = DInfo.Where(e => Convert.ToInt32(e.ParentId) == parentId).ToList();
for (int i = 0; i < DictionaryList.Count; i++)
{
NodeModel NewNode = new NodeModel();
NewNode.DicId = DictionaryList[i].DicId;
NewNode.text = DictionaryList[i].DICName;
NewNode.ParentId = DictionaryList[i].ParentId;
childnodestr.nodes.Add(NewNode);
GetChildNodes(NewNode.DicId, NewNode, DInfo);
}
return childnodestr;
}
//实例化公共静态字典表集合
public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>();
/// <summary>
/// TreeView视图
/// </summary>
/// <returns></returns>
public ActionResult May(string TypeCode)
{
ViewBag.TypeCode = TypeCode;
List<TC_DictionaryInfo> DInfo = dbll.GetModelList("TypeCode=" + TypeCode);
List<NodeModel> list = GetChildNodes(0, new NodeModel() { }, DInfo).nodes;
ViewBag.data = list;
}
///<summary>
/// GetChildNodes方法,此方法使用递归
/// </summary>
/// <param name="parentId"></param>
/// <returns></returns>
public NodeModel GetChildNodes(int parentId, NodeModel childnodestr, List<TC_DictionaryInfo> DInfo)
{
List<TC_DictionaryInfo> DictionaryList = DInfo.Where(e => Convert.ToInt32(e.ParentId) == parentId).ToList();
for (int i = 0; i < DictionaryList.Count; i++)
{
NodeModel NewNode = new NodeModel();
NewNode.DicId = DictionaryList[i].DicId;
NewNode.text = DictionaryList[i].DICName;
NewNode.ParentId = DictionaryList[i].ParentId;
childnodestr.nodes.Add(NewNode);
GetChildNodes(NewNode.DicId, NewNode, DInfo);
}
return childnodestr;
}

2.我们处理的json格式是如下所示:

[ServiceContract(Namespace = “”)]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class DateService
{
 
    [OperationContract]
    public List<ForumInfo> GetForumData()
    {
        List<ForumInfo> forumList = new List<ForumInfo>();
        forumList.Add(new ForumInfo() { ForumID = 1, ParendID = 0, ForumName = “笔记本版块”});
        forumList.Add(new ForumInfo() { ForumID = 2, ParendID = 0, ForumName = “台式机版块” });

视图代码如下:

PS:不再是三个方法而简化为两个方法(几乎没什么变动)。

{
    "info": [
        {
            "topoName": "mtd_recommend_dev_netty_n002",
            "weight": 50
        },
        {
            "topoName": "mtd_recommend_dev_netty_n001",
            "weight": 100
        }
    ]
}

        forumList.Add(new ForumInfo() { ForumID = 3, ParendID = 1, ForumName = “Dell笔记本” });
        forumList.Add(new ForumInfo() { ForumID = 4, ParendID = 1, ForumName = “IBM笔记本” });
        forumList.Add(new ForumInfo() { ForumID = 5, ParendID = 4, ForumName = “IBM-T系列” });
        forumList.Add(new ForumInfo() { ForumID = 6, ParendID = 4, ForumName = “IBM-R系列” });

<script type="text/javascript">
var typecode = @ViewBag.TypeCode;
var parentid = @ViewBag.ParentId;
$(function() {
$.ajax({
type: 'Post',
url: '/Type/GetTreeData',
data:{
TypeCode:typecode,
ParentId:parentid,
},
//data: para,
dataType: 'json',
async: false,
success: function (data) {
var defaultData = eval(data);
//var defaultData = data;
$('#treeview4').treeview({
color: "#428bca",
data: defaultData
});
},
error: function (err) {
alert('不好意思,数据忘记带上了。。。');
}
});
</scipt>

前台代码如下:

3.具体代码实现如下:

        forumList.Add(new ForumInfo() { ForumID = 7, ParendID = 2, ForumName = “联想台式机” });
        forumList.Add(new ForumInfo() { ForumID = 8, ParendID = 2, ForumName = “方正台式机” });
        forumList.Add(new ForumInfo() { ForumID = 9, ParendID = 2, ForumName = “HP台式机” });
        forumList.Add(new ForumInfo() { ForumID = 10, ParendID = 7, ForumName = “联想家悦H系列” });
        forumList.Add(new ForumInfo() { ForumID = 11, ParendID = 7, ForumName = “联想IdeaCentre系列” });

第二种方式为后台返回json字符串这种方式(此方式为后台拼接json字符串传给前台):

var data='@JsonConvert.SerializeObject( ViewBag.data)'.replace(/"/g,'"');
$(function() {
$('#treeview4').treeview({
color: "#428bca",
data: data,
onNodeSelected: function(event, data) {
alert(data);
}
});
String result=HttpRequest.sendGet(zooUrl+"gettopo",param);
        System.out.println("result--"+result);

        JSONObject obj=JSONObject.parseObject(result);//获取jsonobject对象
        System.out.println("obj---"+obj);
        JSONArray arr=obj.getJSONArray("info");//获取的结果集合转换成数组
        System.out.println("arr---"+arr);
        List list1=new ArrayList();
        for(int i=0;i<arr.size();i++){
            Map map=new HashMap();
            Map  omap=(Map) arr.get(i);
            System.out.println("omap--"+omap);
            String value1=(String) omap.get("topoName");
            System.out.println("value1--"+value1);
            Integer value2=(Integer)omap.get("weight");
            System.out.println("value2--"+value2);
            map.put("weight",value1);
            map.put("count",value2);

            list1.add(map);
        }

        return forumList;
    }
}

不建议大家采用这种方式,比较容易出错。

PS:这里用到了.NET 下开源的json格式序列号和反序列化的类库

result就是我取到的上述json值
这就是我的实现过程,可以最终得到list集合

    
从代码中可看出,ForumInfo是使用ParendID来记录父结点信息并以此来创建一个树形结构的,而方法:
GetForumData()即是演示了我们平时查询数据的过程。我们在Silverlight中添加对该服务的引用即可。

public ActionResult May(string TypeCode,int parentId)
{
ViewBag.TypeCode = TypeCode;
ViewBag.ParentId = parentId;
return View();
} 
public ActionResult GetTreeData()
{
//创建jsondata对象
StringBuilder jsonData = new StringBuilder();
//拼接json字符串 开始{
jsonData.Append("[");
//调用GetChildNodes方法,默认传参试为0(0表示根节点菜单选项)
jsonData.Append(GetChildNodes(0));
//闭合Node子类数组 ]
jsonData.Append("]");
//返回json字符串
return Json(jsonData.ToString());
}
/// <summary>
/// GetChildNodes方法,此方法使用递归
/// </summary>
/// <param name = "parentId" ></ param >
/// < returns ></ returns >
public string GetChildNodes(int parentId)
{
//为DInfo赋值(DInfo承载页面所需的值(间接将值传给页面)),查询所有的数据
List<TC_DictionaryInfo> DInfo = dbll.GetModelList("");
//创建ChiidNodeStr变量
StringBuilder ChildNodeStr = new StringBuilder();
//查询符合条件的数据(ParentId=0),DictionaryList接收数据
List<TC_DictionaryInfo> DictionaryList = DInfo.Where(e => Convert.ToInt32(e.ParentId) == parentId).ToList();
//循环DictionaryList为TreeView所需数据分层级(即子类、父类等节点分开)
for (int i = 0; i < DictionaryList.Count; i++)
{
//Nodes数组开始 {
ChildNodeStr.Append("{");
//实例化NewNode
NodeModel NewNode = new NodeModel();
//分别为字段赋值
NewNode.DicId = DictionaryList[i].DicId;
NewNode.text = DictionaryList[i].DICName;
NewNode.ParentId = DictionaryList[i].ParentId;
//将要显示的字段拼接
ChildNodeStr.Append("text:'" + NewNode.text + "',");
//超链接地址(此处设置为空链接#)
ChildNodeStr.Append("href:'#parent1',");
ChildNodeStr.Append("tags:['0']");
//拼接完毕子类分层,去掉最后多余的符号(,)
string ChildNodes = GetChildNodes(NewNode.DicId).Trim(',');
//判断父类下是否有子类,如果有子类放到Nodes里,如果没有不让他显示为数组形式“[]”
if (ChildNodes != string.Empty)
{
//拼接Json字符串格式
ChildNodeStr.Append(",");
ChildNodeStr.Append("nodes:[");
ChildNodeStr.Append(ChildNodes);
ChildNodeStr.Append("]");
}
//结尾加上}, 
ChildNodeStr.Append("},");
}
//返回Json字符串,并将,去掉
return ChildNodeStr.ToString().Trim(',');
}

可以在自己的代码中去debug调试,看看是怎么一步步处理json数据的

     我们在Silverlight中添加对Silverlight
Toolkit相关DLL引用,然后向XAML文件上拖入一个TREEVIEW
控件。并将其命名为“TreeOfLife”,最后我们再放几个TextBlock来显示树形结点被点击后显示的相应的
ForumInfo信息。最后XAML中的内容如下所示:
    

前台代码和上面基本一致,唯一的差别在于

下面介绍json序列化和反序列化的两个重要方法:

新手,对于json并不是很了解,只是需求实现了,如有错误,欢迎指正

<controls:TreeView x:Name=”TreeOfLife” Margin=”5″ Grid.Column=”0″ Grid.Row=”1″  
          SelectedItemChanged=”TreeOfLife_SelectedItemChanged” />

var defaultData = eval(data); 

JsonConvert.SerializeObject(object value)序列化,

<Border BorderBrush=”Gray” BorderThickness=”1″ Padding=”8″ Margin=”8,0,0,0″ Grid.Row=”1″ Grid.Column=”1″>
    <StackPanel x:Name=”DetailsPanel” Margin=”4″>
        <StackPanel Orientation=”Horizontal”>
            <TextBlock Text=”版块ID: ” FontWeight=”Bold”  />
            <TextBlock Text=”{Binding ForumID}” />
        </StackPanel>
        <StackPanel Orientation=”Horizontal”>
            <TextBlock Text=”版块名称: ” FontWeight=”Bold”  />
            <TextBlock Text=”{Binding ForumName}” />
        </StackPanel>
        <StackPanel Orientation=”Horizontal”>
            <TextBlock Text=”版块信息: ” FontWeight=”Bold” />
            <TextBlock x:Name=”DetailText” TextWrapping=”Wrap” Text=”{Binding ForumName}”/>
        </StackPanel>
    </StackPanel>
</Border>

因为我们后台是拼接的json字符串的缘故,我们需要将json字符串转化为json数组(网上下载的基于Bootstrap的JQuery
TreeView树形控件仅仅支持json数组),我也是费了很大的劲才找到的。使用MVC+Bootstrap开发TreeView的同学要注意!!!

它有个重载方法JsonConvert.SerializeObject(object value, params
JsonConverter[] converters)。

    
下面是相应的XAML.CS文件中的内容,主要是使用递归方式遍历数据列表并创建相关的结点信息:
     

下面接着给大家介绍基于MVC5和Bootstrap的jQuery
TreeView树形控件(二)之数据支持json字符串、list集合

JsonConvert.DeserializeObject(string value, Type type),反序列化,

public partial class Page : UserControl
{
     DateServiceClient dataServiceClient = new DateServiceClient();

以上所述是小编给大家介绍的基于MVC5和Bootstrap的jQuery
TreeView树形控件(一)之数据支持json字符串、list集合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

它有个重载方法JsonConvert.DeserializeObject(string value, Type type,
params JsonConverter[] converters)

     ObservableCollection<ForumInfo> forumList = new ObservableCollection<ForumInfo>();

您可能感兴趣的文章:

  • bootstrap treeview
    扩展addNode方法动态添加子节点的方法
  • BootStrap
    TreeView使用实例详解
  • bootstrap插件treeview实现全选父节点下所有子节点和反选功能
  • JS树形菜单组件Bootstrap
    TreeView使用方法详解
  • 浅析使用BootStrap
    TreeView插件实现灵活配置快递模板
  • Bootstrap树形菜单插件TreeView.js使用方法详解
  • 浅析BootStrap
    Treeview的简单使用
  • 基于MVC5和Bootstrap的jQuery
    TreeView树形控件(二)之数据支持json字符串、list集合
  • bootstrap-treeview自定义双击事件实现方法
  • bootstrap-Treeview实现级联勾选

这两个方法可以实现基本的序列化和反序列化要求。

     public Page()
     {
         InitializeComponent();

js中的replace的作用是将特定的符号替换为自己需要的符号。

         //此样式只添加在根结点上
         //TreeOfLife.ItemContainerStyle = this.Resources[“RedItemStyle”] as Style;
              
         dataServiceClient.GetForumDataCompleted+=new EventHandler<GetForumDataCompletedEventArgs>(dataServiceClient_GetForumDataCompleted);
         dataServiceClient.GetForumDataAsync();
     }

而这里replace(/\/g,'”‘)的作用是把所有的 /
都替换为“(因为页面需要的是json字符串)。

     void dataServiceClient_GetForumDataCompleted(object sender, GetForumDataCompletedEventArgs e)
     {
         try
         {
             forumList = e.Result;
             AddTreeNode(0, null);  
         }
         catch
         {
             throw new NotImplementedException();
         }
     }

这样的话
我们的页面就可以读取数据进行显示了。BZ还是感觉这种方式更好一点。

     private void AddTreeNode(int parentID, TreeViewItem treeViewItem)
     {
         List<ForumInfo> result = (from forumInfo in forumList
                                   where forumInfo.ParendID == parentID
                                   select forumInfo).ToList<ForumInfo>();

以上所述是小编给大家介绍的基于MVC5和Bootstrap的jQuery
TreeView树形控件(二)之数据支持json字符串、list集合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

         if (result.Count > 0)
         {
             foreach (ForumInfo foruminfo in result)
             {
                 TreeViewItem objTreeNode = new TreeViewItem();
                 objTreeNode.Header = foruminfo.ForumName;
                 objTreeNode.DataContext = foruminfo;

您可能感兴趣的文章:

  • bootstrap treeview
    扩展addNode方法动态添加子节点的方法
  • BootStrap
    TreeView使用实例详解
  • bootstrap插件treeview实现全选父节点下所有子节点和反选功能
  • JS树形菜单组件Bootstrap
    TreeView使用方法详解
  • 浅析使用BootStrap
    TreeView插件实现灵活配置快递模板
  • Bootstrap树形菜单插件TreeView.js使用方法详解
  • 浅析BootStrap
    Treeview的简单使用
  • 基于MVC5和Bootstrap的jQuery
    TreeView树形控件(一)之数据支持json字符串、list集合
  • bootstrap-treeview自定义双击事件实现方法
  • bootstrap-Treeview实现级联勾选

                 //此样式将会添加的所有叶子结点上
                 //objTreeNode.ItemContainerStyle = this.Resources[“RedItemStyle”] as Style;
 
                 //添加根节点
                 if (treeViewItem == null)
                 {
                     TreeOfLife.Items.Add(objTreeNode);
                 }
                 else
                 {                    
                     treeViewItem.Items.Add(objTreeNode);
                 }
                 AddTreeNode(foruminfo.ForumID, objTreeNode);
             }
         }
     }

     private void TreeOfLife_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
     {
         TreeViewItem item = e.NewValue as TreeViewItem;
         ForumInfo fi = item.DataContext as ForumInfo;

         DetailsPanel.DataContext = fi;
     }
}

    下面演示一下效果,如下图所示:
    
    图片 1
    
    
     
当前TreeView控件还支持样式定义,比如可以给每个树形结点前添加CheckBox和一个小图标,这里我们使用下
面样式:
   

<UserControl.Resources>
        <Style x:Key=”RedItemStyle” TargetType=”controls:TreeViewItem”>
            <Setter Property=”HeaderTemplate”>
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation=”Horizontal”>
                            <CheckBox />
                            <Image Source=”image/default.png”/>
                            <TextBlock Text=”{Binding}” Foreground=”Red” FontStyle=”Italic” />
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property=”IsExpanded” Value=”True” />
        </Style>
</UserControl.Resources>

    
    然后在cs文件中使用下面语句将该样式绑定到TreeView上:
    
   

TreeOfLife.ItemContainerStyle = this.Resources[“RedItemStyle”] as Style;

    
    下面就是应用了该样式的运行效果:
    
    图片 2
    

   
当前TreeView中定义样式模版还可以使用ItemTemplate,下面是一段样式代码:

<controls:TreeView.ItemTemplate>
    <controls:HierarchicalDataTemplate ItemsSource=”{Binding Subclasses}”
            ItemContainerStyle=”{StaticResource ExpandedItemStyle}”>
        <StackPanel>
            <TextBlock Text=”{Binding Rank}” FontSize=”8″ FontStyle=”Italic” Foreground=”Gray” Margin=”0 0 0 -5″ />
            <TextBlock Text=”{Binding Classification}” />
        </StackPanel>
    </controls:HierarchicalDataTemplate>
</controls:TreeView.ItemTemplate>

    运行该样式的效果如下图所示:
    
    图片 3
    
    
    好了,今天的内容就先到这里了。
    
   
DEMO下载,请点击这里:)
    
    
   
原文链接:

    作者: daizhj, 代震军

    Tags: silverlight,treeview,树形,控件
    
    网址:  

   

相关文章