【VUE】.NET实现Tree组件双向绑定数据（1）

写在前面的

   由于这个Tree 组件在使用render函数的情况下会变得相对简单一些，但是在后台处理数据的时候依然会碰到相当大的麻烦，索性，我们在后台把树结构拼好，一次性返回给前端页面，这样来的更实际一些。
   可能因为IView.js的用户还比较少，网上基本上没有对Tree组件的一些应用，所以自己就写了一套，由于我在使用的过程中，树结构只有三级，所有并没有使用递归，还算是比较简单吧。

Tree组件

• 首先，我们需要先来看一看最简单的Tree的例子。(戳这里看官方教程)

最简单的Tree

• 首先我们先看一下样式：
  

• 再看一下代码：

<template>
    <Tree :data="dataTree">Tree>
template>

//其次是脚本部分
export default {
        data () {
            return {
                dataTree: [
                    {
                        title: 'parent 1',
                        expand: true,
                        children: [
                            {
                                title: 'parent 1-1',
                                expand: true,
                                children: [
                                    {
                                        title: 'leaf 1-1-1'
                                    },
                                    {
                                        title: 'leaf 1-1-2'
                                    }
                                ]
                            },
                            {
                                title: 'parent 1-2',
                                expand: true,
                                children: [
                                    {
                                        title: 'leaf 1-2-1'
                                    },
                                    {
                                        title: 'leaf 1-2-1'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        }
    }

• 先来小结一下：在Tree组件中节点拥有几个比较重要的参数，title（可显示的节点名字）、expand（是否可以展开）、children（子节点，如果没有的话，”[]”空值即可）、selected（是否选中）

双向数据绑定

• 由于从后台向前直接传递已经拼好的数据比较复杂，这里就分开讲。

查询+显示树形结构

• 由于我们是从后台直接获取已经拼接好的数据，所以并不会在页面上进行拼接，这样做的好处就是节省了页面资源，显示加载的速度更快。话不多说，直接上代码：

HTML

<Tree :data="datatree" show-checkbox multiple>Tree>

页面样式

Script

import axios from 'axios'; 
export default {
  data () {
    return {
        //注意：树组件的接受值为[]对象集合，并不是{}单个对象
        datatree:[],
    }
  },
  methods:{
      queryDataTree(params){
        var vm = this;
        vm.datatree='';
        //功能描述，根据用户组的ID，来获取他们自己对应的页面资源
        axios.get(url+'/GetAllResource?id='+params.ID)
        .then(function(response){
        //将后台传来的数据绑定至页面
          vm.datatree=response.data;
        })
        .catch(function(error){
          alert(error);
        })
      },
  }
}

.NET后台

数据库表

• 我们的大体思路就是从表中，获取所有的数据，然后根据资源的级别，将级别低的资源拼装到级别高的资源的”children”中；我们先来看一下数据库的资源表：
  

• ParentID为0代表该资源为跟节点资源，ParentID不为零，则需要与ID列进行校对。例如，ParentID=25，则这个节点资源是ID为25的资源的子节点资源

• 再来看一下用户组与资源绑定的表，我们的目的就是从这里获取页面选择的用户组所拥有的资源：
  

• 这张表里面的ResourceID就是上一张表中的ID，GroupID就对应的用户组ID。从表中可以看出，一个用户组可以拥有多个页面资源。

代码

[HttpGet]
[Route("GetAllResource")]
public HttpResponseMessage GetAllResource(string id)
{
    /*获取完整资源树结构*/

    //1.在rightResource表中获取所有的资源
    IList list = new List();
    //GetAll是我们获取泛型封装好的方法
    list = rightResourceBO.GetAll();

    //1.1在RightGroupResource表中获取全部的与组对应的资源
    //1.1.1获取全部的组资源
    IList rightGroupResourceList = new List();
    rightGroupResourceList = rightGroupResourceBO.GetEntities();

    //1.1.2获取符合条件的组资源
    IList rightGroupResource = new List();
    foreach (var item in rightGroupResourceList)
    {
    //接收页面传来的ID值，从组资源LIST中筛选符合条件的数据
        if (item.GroupID == Convert.ToInt32(id))
        {
            rightGroupResource.Add(item);
        }
    }

    //2.将资源以树形结构显示在页面上
    //2.1需要将用户组中对应的资源进行绑定
        //这里需要说明一下，由于我们的数据表实体为自动生成的实体所以不推荐在原有的实体上进行修改，所以我们创建了一个类似VIEWMODEL的实体，继承原有的实体，并且可以在这个实体中添加自己自定义的属性。例如下面的CO_RIGHTRESOURCE_QueryParam就是继承了CO_RIGHTSOURCE
    IList resourceTree = new List();
    /********************************************/
    //这里就是B层封装好的，获取整个拼装好的Tree的方法
    //由于篇幅有限，这个方法我们下篇再讲
    resourceTree = rightGroupResourceBO.GetTreeByID(list, rightGroupResource);
    /*********************************************/

    //3.将树结构化的泛型转化为json，并传向前台
    string _stringJson = JsonConvert.SerializeObject(resourceTree);
    由于checked是C#保留字，所以在后台使用了Checked代替，在传递到前台的过程中需要替换成tree组件的关键字checked
    string stringJson = _stringJson.Replace("Checked", "checked");
    HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(stringJson, Encoding.GetEncoding("UTF-8"), "application/json") };
    return result;
    #endregion

        }

• 由于B层中拼装Tree结构没有使用递归，所以涉及到了比较繁琐的拼装过程，所以在下一篇中专门来写。

实体

public class CO_RIGHTRESOURCE_QueryParam : PersistentCO_Right_Resource
    {
    //由于节点的子节点也是一个子树，所以我们也要定义一个list来存放,名称也需要和Tree的属性字保持一致。"children"
        private IList _Children;
        private string _flag;
        //定义节点显示名称
        private string _title;
        //定义节点是否展开
        private string _expand;
        //定义节点是否被选中
        private string _selected;
        //这里需要注意的是，"checked"是C#的保留字，所以需要定义一个"Checked"来代替，由于Tree组件的属性识别区分大小写，所以最后向页面传递的时候需要替换成Tree的属性字"checked"
        private string _checked;

        public IList children
        {
            get { return _Children; }
            set { _Children = value; }
        }
        public string Flag
        {
            get { return _flag; }
            set { _flag = value; }
        }
        public string title
        {
            get { return _title; }
            set { _title = value; }
        }
        public string expand
        {
            get { return _expand; }
            set { _expand = value; }
        }
        public string selected 
        {
            get { return _selected;}
            set { _selected = value; }
        }
        public string Checked
        {
            get { return _checked; }
            set { _checked = value; }
        }
    }

总结

   好了，到这里，我们的前期准备工作就做的差不多了，接下来就是需要从数据库获取数据，然后进行节点的拼接了！我们下一篇再来~