基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合

转载  更新时间:2016年08月11日 14:44:04   作者:XL、   我要评论

这篇文章主要介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合的相关者,小编推荐使用返回list集合的方法,具体原因大家可以根据本文学习下

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

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

控制器代码如下:

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;
}

视图代码如下:

<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>

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

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

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(',');
}

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

var defaultData = eval(data); 

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

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

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

相关文章

  • jQuery插件WebUploader实现文件上传

    jQuery插件WebUploader实现文件上传

    这篇文章主要为大家详细介绍了jQuery插件WebUploader实现文件上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 浅谈jQuery的offset()方法及示例分享

    浅谈jQuery的offset()方法及示例分享

    这篇文章主要介绍了浅谈jQuery的offset()方法及示例分享的相关资料,需要的朋友可以参考下
    2015-07-07
  • JQuery遍历元素的父辈和祖先的方法

    JQuery遍历元素的父辈和祖先的方法

    下面小编就为大家带来一篇JQuery遍历元素的父辈和祖先的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • jQuery日程管理插件fullcalendar使用详解

    jQuery日程管理插件fullcalendar使用详解

    这篇文章主要介绍了jQuery日程管理插件fullcalendar使用方法,整合农历节气和节日,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jQuery中next方法用法实例

    jQuery中next方法用法实例

    这篇文章主要介绍了jQuery中next方法用法,实例分析了jQuery中next方法的功能、定义及相关使用技巧,需要的朋友可以参考下
    2015-04-04
  • 使用jquery获取网页中图片高度的两种方法

    使用jquery获取网页中图片高度的两种方法

    使用jquery获取网页中图片的高度其实很简单,目前有两种不错的方法可以实现,下面为大家详细介绍下,有所疑惑的你可以参考下
    2013-09-09
  • jQuery使用animate实现ul列表项相互飘动效果示例

    jQuery使用animate实现ul列表项相互飘动效果示例

    这篇文章主要介绍了jQuery使用animate实现ul列表项相互飘动效果,结合实例形式分析了jQuery使用animate动画切换的操作技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery中:animated选择器用法实例

    jQuery中:animated选择器用法实例

    这篇文章主要介绍了jQuery中:animated选择器用法,实例分析了:animated选择器的功能、定义及匹配动画效果元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jquery+css实现下拉列表功能

    jquery+css实现下拉列表功能

    本文通过实例代码给大家介绍了jquery 与css相结合实现的下拉列表功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-09-09
  • jQuery基于正则表达式的表单验证功能示例

    jQuery基于正则表达式的表单验证功能示例

    这篇文章主要介绍了jQuery基于正则表达式的表单验证功能,包括针对字符串、邮件、网址、电话等常见正则验证操作技巧,需要的朋友可以参考下
    2017-01-01

最新评论