很长时间没用 jQuery 了， 今天用这个 jqGrid 插件， 真不顺手， 不知道哪里出了问题， 总是只能收缩2级， 第3级就不行了。

还是自己写收缩展开代码吧：

    function setTr(itemId) {
        setTrToggle($("#gridList span[AreaId = '" + itemId + "']").parents("tr"));
        var $trs = $("#gridList span[ParentId = '" + itemId + "']").parents("tr");
        if ($trs.length == 0)
            return;

        $trs.toggle().each(function () {
            setTrToggle(this);
            setTr($(this).find("span[AreaId]").attr("AreaId"));
        });
    }

    function setTrToggle(theTr) {
        var $div = $(theTr).find("div.treeclick");
        if ($div.length > 0) {
            if ($div.hasClass("glyphicon-triangle-bottom")) {
                $div.attr("class", "glyphicon glyphicon-triangle-right tree-plus treeclick");
            }
            else if ($div.hasClass("glyphicon-triangle-right")) {
                $div.attr("class", "glyphicon glyphicon-triangle-bottom tree-minus treeclick");
            }
        }
    }

    function gridList() {
        var $gridList = $("#gridList");
        $gridList.dataGrid({
            treeGrid: true,
            treeGridModel: 'adjacency',
            url: "/Area/GetGridJson",
            ExpandColumn: "Code",
            height: $(window).height() - 128,
            onSelectRow: function (rowid) {
            },
            colModel: [
                {
                    label: '主键', name: 'AreaId', hidden: true
                },
                {
                    label: 'ParentId', name: 'ParentId', width: 80, hidden: true, align: 'left', formatter: function (cellvalue, options, rowObject) {
                        return '<span ParentId="' + cellvalue + '" AreaId="' + rowObject.AreaId + '" >' + cellvalue + '</span>';
                    }
                },
                {
                    label: '名称', name: 'Name', width: 150, align: 'left',
                    formatter: function (cellvalue, options, rowObject) {
                        return '<a href="javascript:void(0)" onclick="setTr(' + rowObject.AreaId + ')">' + cellvalue + '</a>';
                    }
                },
                { label: '编码', name: 'Code', width: 80, align: 'left' },
                { label: 'Real编码', name: 'Realcode', width: 80, align: 'left' },
                { label: '深度', name: 'Depth', width: 80, align: 'left' },
                { label: '排序', name: 'OrderBy', width: 80, align: 'left' },
                {
                    label: "可用状态", name: "Release", width: 60, align: "left",
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == 1) {
                            return '<span class=\"label label-success\">正常</span>';
                        } else if (cellvalue == 0) {
                            return '<span class=\"label label-default\">禁用</span>';
                        }
                    }
                },
                { label: '添加用户', name: 'InsertUserName', width: 80, align: 'left' },
                {
                    label: '添加时间', name: 'InsertTime', width: 80, align: 'left',
                    formatter: "date", formatoptions: { srcformat: 'Y-m-d', newformat: 'Y-m-d' }
                },
                { label: '修改用户', name: 'UpdateUserName', width: 80, align: 'left' },
                {
                    label: '修改时间', name: 'UpdateTime', width: 80, align: 'left',
                    formatter: "date", formatoptions: { srcformat: 'Y-m-d', newformat: 'Y-m-d' }
                }
            ]
        });