jquery TreeView Tree Control (i) based on MVC5 and bootstrap data supports JSON strings, list collections _jquery

Source: Internet
Author: User
Tags string format

This article supports two types of data, one for the list collection and one for the JSON string.

Let's introduce the background back to the list collection (this method is recommended):

The controller code is as follows:

public static list<tc_dictionaryinfo> Dinfo = new list<tc_dictionaryinfo> (); <summary>///treeview View///</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 method, this method uses recursion///</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; }

The view code is as follows:

<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 (' Sorry, the data forgot to bring ... ');
}
});
</scipt>

The second way is to return a JSON string in the background (this way to the foreground for background concatenation of JSON strings):

Do not recommend this approach, more prone to error.

Public ActionResult May (string Typecode,int parentid) {viewbag.typecode = TypeCode;
Viewbag.parentid = ParentID;
return View (); Public ActionResult Gettreedata () {///Create Jsondata object StringBuilder jsondata = new StringBuilder ();//stitching JSON string Start {Jsonda Ta.
Append ("[");
Call the Getchildnodes method, and the default pass is 0 (0 for the root node menu option) jsondata.append (getchildnodes (0));
Closed node Subclass array] Jsondata.append ("]");
Returns the JSON string return JSON (Jsondata.tostring ()); ///<summary>///Getchildnodes method, this method uses recursion///</summary>///<param name = "ParentID" ></param
; < returns ></returns > public string getchildnodes (int parentid) {//Is assigned to Dinfo (Dinfo the value required to host the page (indirectly to the page)), check Consult all the data list<tc_dictionaryinfo> Dinfo = Dbll.
Getmodellist ("");
Create CHIIDNODESTR variable StringBuilder childnodestr = new StringBuilder (); Query for eligible data (PARENTID=0), dictionarylist receive data list<tc_dictionaryinfo> dictionarylist = Dinfo.where (e => Convert.ToInt32 (e.parentid) = = ParentID).
ToList (); Loop dictionarylist The data required for the TreeViewHierarchy level (that is, subclass, parent class, etc.) for (int i = 0; i < Dictionarylist.count; i++) {//nodes array start {childnodestr.append ("{");
Instantiate NewNode Nodemodel NewNode = new Nodemodel (); Assign values to fields Newnode.dicid = Dictionarylist[i] respectively.
Dicid; Newnode.text = Dictionarylist[i].
Dicname; Newnode.parentid = Dictionarylist[i].
ParentID;
The field to be displayed is spliced childnodestr.append ("text:" + Newnode.text + "',");
Hyperlink address (here set to null link #) Childnodestr.append ("href: ' #parent1 ',");
Childnodestr.append ("tags:[' 0 ']"); Concatenation completes the subclass hierarchy, removing the last redundant symbol (,) string childnodes = Getchildnodes (newnode.dicid).
Trim (', '); Determine if there is a subclass under the parent class, if a subclass is placed in the nodes, and if not, he is not allowed to display the array form "[]" if (childnodes!= string.
Empty) {//stitching JSON string format childnodestr.append (",");
Childnodestr.append ("nodes:[");
Childnodestr.append (childnodes);
Childnodestr.append ("]");
}//End plus}, Childnodestr.append ("},"); //Returns the JSON string, and removes the return childnodestr.tostring ().
Trim (', '); }

The front code is basically consistent with the above, and the only difference is

 
 

Because we're backing up the JSON string in the background, we need to convert the JSON string into a JSON array (the bootstrap jquery TreeView tree Control on the web only supports the JSON array), and it took a lot of effort to find it. Students who use Mvc+bootstrap to develop the TreeView should pay attention to!!!

Next we'll introduce the jquery TreeView tree control based on MVC5 and Bootstrap (ii) data support JSON strings, list collections

The above is a small set to introduce the jquery TreeView tree control based on MVC5 and Bootstrap (i) data support JSON string, list collection, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.