基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
本文支持两种方式的数据,一种为List集合,一种为json字符串。
先来介绍一下后台返回list集合(推荐使用此方法):
控制器代码如下:
publicstaticList<TC_DictionaryInfo>DInfo=newList<TC_DictionaryInfo>();
///<summary>
///TreeView视图
///</summary>
///<returns></returns>
publicActionResultMay(stringTypeCode,intparentId)
{
ViewBag.TypeCode=TypeCode;
ViewBag.ParentId=parentId;
returnView();
}
[HttpPost]
publicActionResultGetTreeData(stringTypeCode,intparentId)
{
List<TC_DictionaryInfo>DInfo=dbll.GetModelList("TypeCode="+TypeCode);
returnJson(GetChildNodes(0,newNodeModel(){},DInfo).nodes);
}
///<summary>
///GetChildNodes方法,此方法使用递归
///</summary>
///<paramname="parentId"></param>
///<returns></returns>
publicNodeModelGetChildNodes(intparentId,NodeModelchildnodestr,List<TC_DictionaryInfo>DInfo)
{
List<TC_DictionaryInfo>DictionaryList=DInfo.Where(e=>Convert.ToInt32(e.ParentId)==parentId).ToList();
for(inti=0;i<DictionaryList.Count;i++)
{
NodeModelNewNode=newNodeModel();
NewNode.DicId=DictionaryList[i].DicId;
NewNode.text=DictionaryList[i].DICName;
NewNode.ParentId=DictionaryList[i].ParentId;
childnodestr.nodes.Add(NewNode);
GetChildNodes(NewNode.DicId,NewNode,DInfo);
}
returnchildnodestr;
}
视图代码如下:
<scripttype="text/javascript">
vartypecode=@ViewBag.TypeCode;
varparentid=@ViewBag.ParentId;
$(function(){
$.ajax({
type:'Post',
url:'/Type/GetTreeData',
data:{
TypeCode:typecode,
ParentId:parentid,
},
//data:para,
dataType:'json',
async:false,
success:function(data){
vardefaultData=eval(data);
//vardefaultData=data;
$('#treeview4').treeview({
color:"#428bca",
data:defaultData
});
},
error:function(err){
alert('不好意思,数据忘记带上了。。。');
}
});
</scipt>
第二种方式为后台返回json字符串这种方式(此方式为后台拼接json字符串传给前台):
不建议大家采用这种方式,比较容易出错。
publicActionResultMay(stringTypeCode,intparentId)
{
ViewBag.TypeCode=TypeCode;
ViewBag.ParentId=parentId;
returnView();
}
publicActionResultGetTreeData()
{
//创建jsondata对象
StringBuilderjsonData=newStringBuilder();
//拼接json字符串开始{
jsonData.Append("[");
//调用GetChildNodes方法,默认传参试为0(0表示根节点菜单选项)
jsonData.Append(GetChildNodes(0));
//闭合Node子类数组]
jsonData.Append("]");
//返回json字符串
returnJson(jsonData.ToString());
}
///<summary>
///GetChildNodes方法,此方法使用递归
///</summary>
///<paramname="parentId"></param>
///<returns></returns>
publicstringGetChildNodes(intparentId)
{
//为DInfo赋值(DInfo承载页面所需的值(间接将值传给页面)),查询所有的数据
List<TC_DictionaryInfo>DInfo=dbll.GetModelList("");
//创建ChiidNodeStr变量
StringBuilderChildNodeStr=newStringBuilder();
//查询符合条件的数据(ParentId=0),DictionaryList接收数据
List<TC_DictionaryInfo>DictionaryList=DInfo.Where(e=>Convert.ToInt32(e.ParentId)==parentId).ToList();
//循环DictionaryList为TreeView所需数据分层级(即子类、父类等节点分开)
for(inti=0;i<DictionaryList.Count;i++)
{
//Nodes数组开始{
ChildNodeStr.Append("{");
//实例化NewNode
NodeModelNewNode=newNodeModel();
//分别为字段赋值
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']");
//拼接完毕子类分层,去掉最后多余的符号(,)
stringChildNodes=GetChildNodes(NewNode.DicId).Trim(',');
//判断父类下是否有子类,如果有子类放到Nodes里,如果没有不让他显示为数组形式“[]”
if(ChildNodes!=string.Empty)
{
//拼接Json字符串格式
ChildNodeStr.Append(",");
ChildNodeStr.Append("nodes:[");
ChildNodeStr.Append(ChildNodes);
ChildNodeStr.Append("]");
}
//结尾加上},
ChildNodeStr.Append("},");
}
//返回Json字符串,并将,去掉
returnChildNodeStr.ToString().Trim(',');
}
前台代码和上面基本一致,唯一的差别在于
vardefaultData=eval(data);
因为我们后台是拼接的json字符串的缘故,我们需要将json字符串转化为json数组(网上下载的基于Bootstrap的JQueryTreeView树形控件仅仅支持json数组),我也是费了很大的劲才找到的。使用MVC+Bootstrap开发TreeView的同学要注意!!!
下面接着给大家介绍基于MVC5和Bootstrap的jQueryTreeView树形控件(二)之数据支持json字符串、list集合
以上所述是小编给大家介绍的基于MVC5和Bootstrap的jQueryTreeView树形控件(一)之数据支持json字符串、list集合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!