如何在 MVC.NET 2 中使用 JqGrid TreeGrid？

Question

互联网上没有太多关于如何在 MVC2 中使用 Trirand JqGrid TreeGrid 选项的信息。

谁有例子？

Answer 1

我做了这个问题，因为网络上没有足够的信息，或者信息不完整，所以你可以开始工作。

在本例中，我使用的是用户角色。

首先是javascript定义：

    var CONTROLLER = '<%= Url.Content("~/") %>Home/';
    jQuery(document).ready(function () {
        $('#jqgTreeGrid').jqGrid({
            //enable TreeGrid
            treeGrid: true,
            //set TreeGrid model
            treeGridModel: 'adjacency',
            //set expand column
            ExpandColumn: 'Name',
            //url from wich data should be requested
            url: CONTROLLER + 'TreeGrid',
            //type of data
            datatype: 'json',
            //url access method type
            mtype: 'POST',
            //columns names
            colNames: ['Name', 'Id', 'Role'],
            //columns model
            colModel: [
                { name: 'Name', index: 'Name', align: 'left' },
                { name: 'Id', index: 'Id', width: 1, hidden: true, key: true },
                { name: 'Role', index: 'Role', width: 1, hidden: true },
            ],                
            //grid width
            width: 'auto',
            //grid height
            height: 'auto'
        });
 });

现在是aspx定义，以防新手不知道：

<table id="jqgTreeGrid" class="scroll" cellpadding="0" cellspacing="0"></table>

控制器定义：

[HttpPost]
public ActionResult TreeGrid(FormCollection collection)
{
    int role = -1;
    //Here we get the Roles names this user
    //In my case IsAgent, IsDealer, IsServiceWritter
    //One user can have all roles or any role
    //So the first important thing is get the
    //highest hierarchy role, in this case "IsAgent"
    //And asign to this role a code.
    //So IsAgent = 2, IsDealer = 1, IsServiceWritter = 0

    var rolesArray = (string[])Session["Roles"];
    // We search for the highest hiearchy level and 
    // end up the loop
    foreach (var s in rolesArray)
    {
        if (s ==  ROLE_NAME_AGENT)
        {
            role = (int)RolesEnum.Agent;
            break;
        }
        else
        {
            if (s == ROLE_NAME_DEALER)
            {
                role = (int)RolesEnum.Dealer;
                break;
            }
            else
            {

                if (s == ROLE_NAME_SW)
                {
                    role = (int)RolesEnum.SW;
                    break;
                }
            }
        }
    }
    var children = new List<GetTreeGridValuesResult>();
    int level = 0;
    int parentId = 0;
    // If we found out a level, we enter the if
    if (role != -1)
    {
        // A very important thing to consider is that there
        // are two keys being send from the treegrid component:
        // 1. [nodeid] that is the id of the node we are expanding
        // 2. [n_level] the root is 0, so, if we expand the first child
        // of the root element the level will be 1... also if we expand the second
        // child of the root, level is 1. And so... 
        // If [nodeid] is not found it means that we are not expanding anything,
        // so we are at root level.
        if (collection.AllKeys.Contains("nodeid"))
        {
            //In case we are expanding a level, we retrieve the level we are right now
            //In this example i'll explain the 
            //Tree with id's so you can imagine the way i'm concatenating the id's:
            // In this case we are at Agent level that have 2 dealers and each dealer 3 service writters
            // Agent: 5
            //  |_Dealer1: 5_25
            //      |_SW1: 5_25_1
            //      |_SW2: 5_25_2
            //      |_SW3: 5_25_3
            //  |_Dealer2: 5_26
            //      |_SW4: 5_26_4
            //      |_SW5: 5_26_5
            //      |_SW6: 5_26_6
            // So, if we clic over the SW6: the id will be 5_26_6, his parent will be 5_26
            // Dealer2 Id is 5_26 and his parent will be 5.
            level = int.Parse(collection["n_level"]) + 1;
            //First we split the nodeid with '_' that is our split character.
            var stringSplitted = collection["nodeid"].Split('_');
            //the parent id will be located at the last position of the splitted array.
            parentId = int.Parse(stringSplitted[stringSplitted.Length - 1]);
        }
        //Getting childrens
        var userId = new Guid(Session["UserId"].ToString());
        children = GetTreeGridValues(role, userId, parentId, level);
        //Each children have a name, an id, and a rolename (rolename is just for control)
        //So if we are are root level we send the parameters and we have in return all the children of the root.
    }

    //Preparing result
    var filesData = new
    {
        page = 1,
        total = 1,
        records = children.Count(),
        rows = (from child in children
                select new
                {
                    //table of cells values
                    cell = new[] {
                            child.name, // Correspond to the colmodel NAME in javascript
                            // The next one correspond to the colmodel ID in javascript Id
                            // If we are are the root level the [nodeid] will be empty as i explained above
                            // So the id will be clean. Following the example, just 5
                            // If we are expanding the Agent 5 so, the [nodeid] will not be empty
                            // so we take the Agent id, 5 and concatenate the child id, so 5_25
                            ( collection["nodeid"] == null ? string.Empty : collection["nodeid"] +'_') + child.id, 
                            child.Role, //Correspond to the colmodel ROLE in javascript 
                            //The next attributes are obligatory and defines the behavior of the TreeGrid 
                            //LEVEL: This is the actual level of the child so, root will be 0, that's why i'm adding
                            // one to the level above.
                            level.ToString(),
                            //PARENT ID: If we are at the root [nodeid] will be empty so the parent id is ""
                            // In case of a service writter the parent id is the nodeid, because is the node
                            // we are expanding
                            collection["nodeid"] ?? string.Empty,
                            //IS NOT EXPANDABLE: One thing that was tricky here was that I was using c# true, false
                            //and to make it work it's needed to be strings "true" or "false"
                            // The Child.Role the role name, so i know that if it's a ServiceWriter i'm the last level
                            // so it's not expandable, the optimal way is to get from the database store procedure
                            // if the leaf has children.
                            (child.Role == Enum.GetName(typeof(RolesEnum), RolesEnum.SW) ? "true": "false").ToString(),
                            //IS EXPANDED: I use that is always false,
                            "false"
                          }
                }
               ).ToArray()
    };

    //Returning json data
    return Json(filesData);

}

希望本教程对某人有所帮助:)

顺便说一句：（如果答案有用记得投票）