Ztree usage instructions based on jquery Ajax and jquery Plug-ins

Because I've been groping for jquery Ajax before, but the actual project but use less, began to think that will not encounter a lot of problems, the results of my headache oh, big and small problems, let me have to hit the mouse problem (the idea of smashing the computer is not), so now remember something.

Problem 1: The development environment is on the VS2008, but you have to use. NET 2.0, so you have a problem, and found that Ajax unexpectedly not into the background of the method.

Test

The code is as follows

Copy Code

$ (document). Ready (function () { $.ajax ({ Type: "POST", URL: "Default.aspx/helloword", DataType: "Text", ContentType: "Application/json; Charset=utf-8 ", Beforesend:function (XMLHttpRequest) { $ (' #show '). Text ("querying"); }, Success:function (msg) { Alert (eval ("+ msg +")). D); }, Error:function (XHR, MSG, e) {alert (msg);} }); }); [System.Web.Services.WebMethod ()] public static string Helloword () { Return "Hello Word"; }

Then run to get is: see the page has a JS syntax error, after looking found Web.config file missing a piece of code, so I put this code to Web.config <system.web> node, and then run successfully.

The code is as follows	Copy Code
<add name= "Scriptmodule" type= "System.Web.Handlers.ScriptModule, System.Web.Extensions, version=3.5.0.0, Culture =neutral, publickeytoken=31bf3856ad364e35 "/>

Question 2: Back in the background is JSON-formatted data, JS receive data stored as JSON data objects.

Because I get the data in the background ilist<t> format, so need to convert to the JSON format type, so the use of a method found on the web.

The code is as follows

Copy Code

public static string Objecttojson<t> (String jsonname, ilist<t> IL) { StringBuilder Json = new StringBuilder (); Json.append ("["); if (IL. Count > 0) { for (int i = 0; i < IL. Count; i++) { T obj = activator.createinstance<t> (); Type type = obj. GetType (); propertyinfo[] PiS = type. GetProperties (); Json.append ("{"); for (int j = 0; J < PiS. Length; J + +) { Json.append ("" "+ pis[j]. Name.tostring () + "": "" + pis[j]. GetValue (Il[i], NULL) + "" "); if (J < PiS. LENGTH-1) { Json.append (","); } } Json.append ("}"); if (I < IL. COUNT-1) { Json.append (","); } } } Json.append ("]"); return json.tostring (); }

Front desk JS

The code is as follows	Copy Code
$ (document). Ready (function () { $.ajax ({ Type: "POST", URL: "Programlist.aspx/getclassdata", DataType: "JSON", ContentType: "Application/json; Charset=utf-8 ", Success:function (msg) { Alert (eval ("+ msg +")). D); }, Error:function (XHR, MSG, e) {alert (msg);} }); Initialize data (show first page) Onloadgrid (0); InitData (0, 0); });

Run and get the error: JS error is missing '], and then I use the Firebug tool to see whether to get the JSON value, see, the data has been responded to, and in line with the JSON format and there is no lack of '], so I will JS inside the Datatype:text, run after the pop-up data success. Here I really wonder, do not know is my background of the conversion method is not right, or the front desk js wrong, here send a question, trouble saw, know say, here first thank you.

Question 3: The previous JSON-formatted data was bound to Ztree, an error occurred, and then I was on the page myself var an object, assigning this value (copied from the Fire Bug), the binding was successful.

Looking at the Ztree API carefully, we found that the bound data source must be a JSON object, and I got a JSON-formatted string, so here we have to convert the resulting data to a JSON object.

The code is as follows	Copy Code
Success:function (msg) { Treedata = Jquery.parsejson (msg); var json = eval (' + TREEDATA.D + ') '); Ztreeobj = $.fn.ztree.init ($ ("#treeDemo"), setting, JSON); }

It's a complete success.

Summarize

jquery Ajax I'm not going to say there are a lot of tutorials like http://www.111cn.net/wy/js-ajax/jquery-ajax.post.htm

Here's a brief introduction to the role of jquery Ztree

Ztree is using JQuery's core code to implement a tree plug-in that accomplishes most of the most common functions.

Compatible with IE, FireFox, Chrome and other browsers
Multiple tree instances can be generated in one page at a time
Support for JSON data
Supports one-time static generation and Ajax asynchronous loading in two ways
Support for multiple event responses and feedback
Nodes that support tree move, edit, delete
Support any change of skin/personalized icon (depending on CSS)
Supports extremely flexible checkbox or radio selection features
Simple parameter configuration to realize flexible and changeable function
Ztree is a tree-shaped catalogue that we can see in many websites, this article is a combination of jquery Ajax returned data to the jquery Ztree to implement the dynamic tree-operation menu.