JQuery EasyUI TreeGrid tutorial in ASP. NET MVC

 

1. Program requirements:

JQuery EasyUI Plugin: http://www.jeasyui.com/download/index.php

1. Details:

Reference some code:

<Link rel = "stylesheet" type = "text/css" href = "../themes/default/easyui.css">

<Link rel = "stylesheet" type = "text/css" href = "../themes/icon.css">

<Link rel = "stylesheet" type = "text/css" href = "demo.css">

<Script type = "text/javascript" src = "../jquery-1.6.min.js"> </script>

<Script type = "text/javascript" src = ".../jquery. easyui. min. js"> </script>

Front-end page:

<Table id = "grid" toolbar = "# toolbar" class = "easyui-treegrid" style = "width: 700px; height: 300px "url ="/Area/List "idField =" Identifier "treeField =" Area_Name "fitColumns =" true "pagination =" true ">

<Thead>

<Tr>

<Th field = "Area_Name" rowspan = "2" width = "150" editor = "text"> region </th>

</Tr>

</Thead>

</Table>

Controller code of ASP. net mvc:

Public JsonResult List (string page, string rows)

{

List <Area> areas = new BusinessLogic (). Select <Area> ();

List <Object> result = new List <object> ();

Foreach (Area a in areas)

{

If (a. _ parentId. Equals (0 ))

{

Result. Add (new {Identifier = a. Identifier, Area_Name = a. Area_Name });

}

Else

{

Result. Add (new {Identifier = a. Identifier, Area_Name = a. Area_Name, _ parentId = a. _ parentId });

}

}

Dictionary <string, object> json = new Dictionary <string, object> ();

Json. Add ("total", areas. Count );

Json. Add ("rows", result );

 

Return Json (json );

}

Note that the controller Action returns the Json data format as follows:

{"Total": 3, "rows": [{"Identifier": 1, "Area_Name": "Tangshan City" },{ "Identifier": 11, "Area_Name ": "lubei district", "_ parentId": 1 },{ "Identifier": 2, "Area_Name": "Hebei Province"}]}

If ASP. the Json data obtained by the Json Conversion Function of net mvc does not have the total value, and the tree structure is not displayed. Because TreeGrid requires the total value, the Json (areas) result is as follows:

[{"Identifier": 1, "Area_Name": "Tangshan City" },{ "Identifier": 11, "Area_Name": "lubei district", "_ parentId": 1 }, {"Identifier": 2, "Area_Name": "Hebei Province"}]

This is because of the problem of the data format. After a long time, I failed to solve the problem. Later, I checked the treegrid example to unify the data format.

Note: You must declare the url attribute value in the html Tag of treegrid. Setting the url in $ (function () {}) will not display data, it may be because the treegrid initialization rules can only be resolved on the loading page.

Original address: http://www.mikel.cn/