闲来也无事 2016-08-11
在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合。
这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了。
控制器代码如下:
//实例化公共静态字典表集合 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; }
PS:不再是三个方法而简化为两个方法(几乎没什么变动)。
前台代码如下:
var data='@JsonConvert.SerializeObject( ViewBag.data)'.replace(/"/g,'"'); $(function() { $('#treeview4').treeview({ color: "#428bca", data: data, onNodeSelected: function(event, data) { alert(data); } });
PS:这里用到了.NET 下开源的json格式序列号和反序列化的类库
https://www.ibm.com/developerworks/cn/web/wa-lo-json/ ,
下面介绍json序列化和反序列化的两个重要方法:
JsonConvert.SerializeObject(object value)序列化,
它有个重载方法JsonConvert.SerializeObject(object value, params JsonConverter[] converters)。
JsonConvert.DeserializeObject(string value, Type type),反序列化,
它有个重载方法JsonConvert.DeserializeObject(string value, Type type, params JsonConverter[] converters)
这两个方法可以实现基本的序列化和反序列化要求。
js中的replace的作用是将特定的符号替换为自己需要的符号。
而这里replace(/\/g,'"')的作用是把所有的 / 都替换为“(因为页面需要的是json字符串)。
这样的话 我们的页面就可以读取数据进行显示了。BZ还是感觉这种方式更好一点。