[Original] Using jqGrid TreeGrid in ASP. net mvc 3

Reprinted, please indicate the author and the source. Thank you.

I recently learned ASP. net mvc 3. Today I want to try jqGrid's TreeGrid mode. I thought it would be nice to follow the Demo in a short time, but it wasn't expected to be done until evening. So I sent out the solution for the reference of my new contact with jqGrid.

Requirements:

Displays data in a tree structure, such as the Department list.

@ Section head {<script type = "text/javascript" >$ (function () {$ ('# treegri '). jqGrid ({treeGrid: true, treeGridModel: 'adjacency ', ExpandColumn: 'depptname', url:'/Department/Query/', ype: 'json', mtype: 'get', colNames: ['id', 'department name', 'parentid', 'authorization', 'authorization', 'description', 'visibilityvalue'], colModel: [{name: 'id', index: 'id', hidden: true, width: 1, key: true}, {name: 'deptname', index: 'depptname', width: 180}, {name: 'parentid', index: 'parentid', hidden: true, width: 1}, {name: 'ctor ctor ', index: 'ctor ctor ', width: 200, align: 'left'}, {name: 'putyid', index: 'putyid', width: 200}, {name: 'summary ', index: 'summary ', width: 200}, {name: 'visibilityvalue', index: 'visibilityvalue', hidden: true, width: 1}], pager: '# ptreegri', height: 'auto'}) ;}) </script>}

In addition, I use the Razor view engine, so this part defines the Sectiion of javascript in the view. In my personal sense, apart from being unable to "What you see is what you get", this engine is better than the traditional ASPX, but what's better? I can't tell you what it feels like (don't hit me :))

Today, 1/3 of the time was spent on a small mistake. In the above Code, datatype was written into dataType by me, and it took n hours to find out a word...

With jqGrid TreeGrid, the above Code is sufficient and redundant settings are available. For example, pager is not required.

Why is the mtype used by many examples on the Internet when using jqGrid is "POST "?, Shouldn't it be "GET" from the RESTful perspective? Does it take pleasure to use MVC against the RESTful principle?

It is very important to put grid. treegrid. js references to the page. I always thought there was the jquery. jqGrid. min. js is enough, and the result is still adding grid. treegrid. js before you can click a row to enter the Controller.

The rest is the content in the Controller.

        public ActionResult Query(Guid? nodeid, int? n_level)        {            Guid? deptID = nodeid;            int level = n_level != null ? (int)n_level + 1 : 0;            JsonResult json = new JsonResult();            json.JsonRequestBehavior = JsonRequestBehavior.AllowGet;            var deptMng = new DeptManager();            var depts = deptMng.GetChild(deptID, true);            json.Data = new            {                page = 1,                total = 1,                records = depts.Count,                rows = (from dept in depts                        select new                        {                            cell = new[] {                                    dept.ID.ToString(),                                    dept.DeptName,                                    dept.ParentID != null ? dept.ParentID.ToString() : "",                                    dept.DirectorID != null ? dept.DirectorID.ToString() : "",                                    dept.Deputy != null ? dept.Deputy.ToString() : "",                                    dept.Summary != null ? dept.Summary : "",                                    dept.VisibilityValue.ToString(),                                    level.ToString(),                                    deptID != null ? deptID.ToString() : string.Empty,                                    deptMng.GetChild(dept.ID,true).Count == 0 ? "true":"false",                                    "false"                                }                        })            };            return json;        }

To tell the truth, I often like the phrase "agreement is better than configuration". Many times, the burden on my back is always added by myself. Therefore, if you want to use jqGrid's TreeGrid, you can use this parameter list.

When the view is loaded for the first time, nodeid and n_level are empty. Because you have not clicked any node in the tree, the default value is null.

If n_level is null, level is 0. Otherwise, level = n_level + 1. Why.

The deptMng. GetChild method is used to obtain the next level sub-department of the specified department ID, excluding the next level.

OK. The key point is the json. in the anonymous object stored in Data, the first three members are relatively simple. In all the examples that can be found, page and total are both 1, so I didn't think much about them, the name hall is all in the rows object:

First, prepare the data you need in colNames and colModel. In this example, I used seven fields (I really don't understand what a test program is doing with so many fields ), starting from the eighth day:

Level. toString () indicates that the current row of data is in the level layer, which is why I used n_level + 1 before. If n_level is empty, layer 0th will be displayed, if it is not empty, it indicates that the current level is n_level, And the next level to be displayed is n_level + 1.

The ninth field is suspected to store the parent department ID. Why is it suspected? I haven't gotten into details for time reasons... (updated on January 11,: it is certain that this field stores the parent department ID, and it is important that if the parent ID of a node is empty, you must use null or "null" instead of "". Why? Unless you do not want to use the sorting function)

The first field indicates whether the Department contains sub-departments. Remember: "true" indicates that there is no sub-department. "false" indicates that there is a sub-department. It seems that the sub-department does not exist.

11th fields. Just give false. The reason is unknown... (2011.9.11 updated: the meaning of this field is: show whether data is expanded, true is expanded, false is collapsed)

The result is displayed.

When I first started using jqGrid, many things have not yet been figured out, and I can only draw images from the gourd tree. I laughed at it :)

2011.9.11 update -----------------------

Here is an example of sorting. Here is a solution to the sorting problem. The two addresses are talking about the same thing.

This is an example of the complete format of TreeGrid:

{id: "1", name: "Cash",        num: "100", debit: "400.00",  credit: "250.00",  balance: "150.00",   enbl: "1", level: "0", parent: "null", isLeaf: false, expanded: false, loaded: true}

Before the level attribute, it is business-related data, and later it is the data required by jqgrid's TreeGrid. Basically, it can be seen from the attribute name.

I have been wondering where the official documentation is...

// At the request of the audience, make a simple example.

Click here to download