【VUE】.NET实现Tree组件双向绑定数据(1)
2017-12-18 11:52
1161 查看
写在前面的
Tree组件
最简单的Tree
双向数据绑定
查询显示树形结构
HTML
页面样式
Script
NET后台
数据库表
代码
实体
总结
可能因为IView.js的用户还比较少,网上基本上没有对Tree组件的一些应用,所以自己就写了一套,由于我在使用的过程中,树结构只有三级,所有并没有使用递归,还算是比较简单吧。
再看一下代码:
先来小结一下:在Tree组件中节点拥有几个比较重要的参数,title(可显示的节点名字)、expand(是否可以展开)、children(子节点,如果没有的话,”[]”空值即可)、selected(是否选中)
ParentID为0代表该资源为跟节点资源,ParentID不为零,则需要与ID列进行校对。例如,ParentID=25,则这个节点资源是ID为25的资源的子节点资源
再来看一下用户组与资源绑定的表,我们的目的就是从这里获取页面选择的用户组所拥有的资源:
这张表里面的ResourceID就是上一张表中的ID,GroupID就对应的用户组ID。从表中可以看出,一个用户组可以拥有多个页面资源。
由于B层中拼装Tree结构没有使用递归,所以涉及到了比较繁琐的拼装过程,所以在下一篇中专门来写。
Tree组件
最简单的Tree
双向数据绑定
查询显示树形结构
HTML
页面样式
Script
NET后台
数据库表
代码
实体
总结
写在前面的
由于这个Tree 组件在使用render函数的情况下会变得相对简单一些,但是在后台处理数据的时候依然会碰到相当大的麻烦,索性,我们在后台把树结构拼好,一次性返回给前端页面,这样来的更实际一些。可能因为IView.js的用户还比较少,网上基本上没有对Tree组件的一些应用,所以自己就写了一套,由于我在使用的过程中,树结构只有三级,所有并没有使用递归,还算是比较简单吧。
Tree组件
首先,我们需要先来看一看最简单的Tree的例子。(戳这里看官方教程)最简单的Tree
首先我们先看一下样式:再看一下代码:
<!--首先是html部分--> <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
<!--组件中的:data绑定由后台传来的"datatree";样式为带有checkbox勾选功能,以便方便修改用户的权限(页面功能:根据用户的权限来划分页面资源); 可以多选--> <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<CO_Right_Resource> list = new List<CO_Right_Resource>(); //GetAll是我们获取泛型封装好的方法 list = rightResourceBO.GetAll(); //1.1在RightGroupResource表中获取全部的与组对应的资源 //1.1.1获取全部的组资源 IList<CV_CO_RIGHT_GROUP_RESOURCE> rightGroupResourceList = new List<CV_CO_RIGHT_GROUP_RESOURCE>(); rightGroupResourceList = rightGroupResourceBO.GetEntities(); //1.1.2获取符合条件的组资源 IList<CV_CO_RIGHT_GROUP_RESOURCE> rightGroupResource = new List<CV_CO_RIGHT_GROUP_RESOURCE>(); 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<CO_RIGHTRESOURCE_QueryParam> resourceTree = new List<CO_RIGHTRESOURCE_QueryParam>(); /********************************************/ //这里就是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<CO_RIGHTRESOURCE_QueryParam> _Children; private string _flag; //定义节点显示名称 private string _title; //定义节点是否展开 private string _expand; //定义节点是否被选中 private string _selected; //这里需要注意的是,"checked"是C#的保留字,所以需要定义一个"Checked"来代替,由于Tree组件的属性识别区分大小写,所以最后向页面传递的时候需要替换成Tree的属性字"checked" private string _checked; public IList<CO_RIGHTRESOURCE_QueryParam> 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; } } }
总结
好了,到这里,我们的前期准备工作就做的差不多了,接下来就是需要从数据库获取数据,然后进行节点的拼接了!我们下一篇再来~相关文章推荐
- 【VUE】.NET实现Tree组件双向绑定数据(2)
- 【VUE】.NET实现Tree组件双向绑定数据(3)-资源分配
- vue父组件和子组件通过sync实现双向数据绑定
- Vue 2.0学习笔记:实现组件数据的双向绑定
- Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
- Angular:实现组件间双向数据绑定
- Vue实现双向绑定的原理以及响应式数据
- Angular 5 子组件与父组件实现数据双向绑定
- Vue实现双向数据绑定
- Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
- Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
- VUE-Table上绑定Input通过render实现双向绑定数据
- 模拟实现vue数据双向绑定
- vue父子组件传值,实现深度监听对象,双向绑定
- Vue.js实现双向数据绑定(表单自动赋值、表单自动取值)
- vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能
- VUE-Table上绑定Input通过render实现双向绑定数据的示例
- 浅谈vue中数据双向绑定的实现原理
- vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件
- Vue是怎么实现数据双向绑定的