【问题标题】:jqgrid treeGrid Json , how to expand all nodes when init the data?jqgrid treeGrid Json,初始化数据时如何展开所有节点?
【发布时间】:2011-11-14 14:47:25
【问题描述】:

Json 数据为:

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

参数“expanded”好像没用?

我的json数据初始化时不知道如何展开所有节点或某个指定节点?


致 Oleg:感谢您的演示,但我无法访问该页面! - -! 然后,我给你看我的javascript代码,也许你会发现一些问题:

$(function () {
        $('#list').jqGrid({
            url: 'SvcDept.ashx',
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            datatype: 'json',
            mtype: 'GET',
            treeGrid: true,
            treeGridModel: 'adjacency',
            ExpandColumn: 'Name',
            colNames: ['ID', 'Name', 'Director', 'ParentID'],
            colModel: [
            { name: 'ID', index: 'ID', hidden: true, width: 1, key: true },
            { name: 'Name', index: 'Name', width: 200, fixed: true },
            { name: 'Director', index: 'Director', width: 100 },
            { name: 'ParentID', index: 'ParentID', hidden: true, width: 1 }
            ],
            autowidth: true,
            height: 'auto'
        });
    });

和我的 SvcDept.ashx:

public class SvcDept 
{
    public void ProcessRequest(HttpContext context)
    {
        var depts = context.Application["Departments"] as List<Department>;
        var nodeid = context.Request["nodeid"];
        var n_level = context.Request["n_level"];
        Guid? deptID = nodeid != null ? new Guid(nodeid) : new Nullable<Guid>();
        int level = n_level != null ? int.Parse(n_level) + 1 : 0;
        var subDepts = depts.Where<Department>(x => x.ParentID == deptID).ToList<Department>();
        var data = new
        {
            page = 1,
            total = 1,
            records = subDepts.Count,
            rows = (from dept in subDepts
                    select new
                    {
                        cell = new[] 
                        {
                            dept.ID.ToString(),     
                            dept.Name,               
                            dept.Director ,
                            dept.ParentID != null ? dept.ParentID.ToString() : "",                                
                            level.ToString(),   //Level
                            deptID != null ? deptID.ToString() : "null",    //ParentID
                            depts.Count<Department>(x => x.ParentID == dept.ID) == 0 ? "true":"false",  //isLeaf
                            "true", //expanded
                            "false"//loaded
                        }
                    })
        };
        context.Response.ContentType = "application/json";
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        context.Response.Write(serializer.Serialize(data));
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
 public class Department
{
    public Guid ID { get; set; }
    public string Name { get; set; }
    public string Director { get; set; }
    public Guid? ParentID { get; set; }
}

【问题讨论】:

    标签: javascript jquery json jqgrid treegrid


    【解决方案1】:

    您的代码的其他部分可能存在一些问题。查看the demo 并与another one 进行比较,其中只有expanded 属性的值更改为true。该节点将被展开。如果您确实有问题,您应该在问题代码中包含您的代码。

    更新:您写道,您在访问演示时遇到了一些问题,这有点奇怪。第一个演示来自the answer。我在演示代码中修改了expanded 属性的一个值,将其更改为true,网格将加载扩展我包括完整代码"Cash" 项。下面是演示的完整 HTML 代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>https://stackoverflow.com/questions/7208412/jqgrid-checkbox-onclick-update-database</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript">
            $.jgrid.no_legacy_api = true;
            $.jgrid.useJSON = true;
        </script>
        <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/jquery.jqGrid.src.js"></script>
    
        <script type="text/javascript">
        //<![CDATA[
            $(function(){
                'use strict';
                var mydata = [
                    { id:"1", name:"Cash",   num:"100", debit:"400.00",credit:"250.00", balance:"150.00", enbl:"1",
                      level:"0", parent:"null",  isLeaf:false, expanded:true, loaded:true },
                    { id:"2", name:"Cash 1", num:"1",   debit:"300.00",credit:"200.00", balance:"100.00", enbl:"0",
                      level:"1", parent:"1", isLeaf:false, expanded:false, loaded:true },
                    { id:"3", name:"Sub Cash 1", num:"1",debit:"300.00",credit:"200.00", balance:"100.00", enbl:"1",
                      level:"2", parent:"2", isLeaf:true,  expanded:false, loaded:true },
                    { id:"4", name:"Cash 2", num:"2",debit:"100.00",credit:"50.00", balance:"50.00", enbl:"0",
                      level:"1", parent:"1", isLeaf:true,  expanded:false, loaded:true },
                    { id:"5", name:"Bank\'s", num:"200",debit:"1500.00",credit:"1000.00", balance:"500.00", enbl:"1",
                      level:"0", parent:"null",  isLeaf:false, expanded:true, loaded:true },
                    { id:"6", name:"Bank 1", num:"1",debit:"500.00",credit:"0.00", balance:"500.00", enbl:"0",
                      level:"1", parent:"5", isLeaf:true,  expanded:false, loaded:true },
                    { id:"7", name:"Bank 2", num:"2",debit:"1000.00",credit:"1000.00", balance:"0.00", enbl:"1",
                      level:"1", parent:"5", isLeaf:true,  expanded:false, loaded:true },
                    { id:"8", name:"Fixed asset", num:"300",debit:"0.00",credit:"1000.00", balance:"-1000.00", enbl:"0",
                      level:"0", parent:"null",  isLeaf:true,  expanded:false, loaded:true }
                    ],
                    getColumnIndexByName = function(grid, columnName) {
                        var cm = grid.jqGrid('getGridParam', 'colModel'), i, l;
                        for (i = 0, l = cm.length; i < l; i += 1) {
                            if (cm[i].name === columnName) {
                                return i; // return the index
                            }
                        }
                        return -1;
                    },
                    grid = $("#treegrid");
    
                grid.jqGrid({
                    datatype: "jsonstring",
                    datastr: mydata,
                    colNames:["Id","Account","Acc Num","Debit","Credit","Balance","Enabled"],
                    colModel:[
                        {name:'id', index:'id', width:1, hidden:true, key:true},
                        {name:'name', index:'name', width:180},
                        {name:'num', index:'acc_num', width:80, align:"center"},
                        {name:'debit', index:'debit', width:80, align:"right"},
                        {name:'credit', index:'credit', width:80,align:"right"},
                        {name:'balance', index:'balance', width:80,align:"right"},
                        {name:'enbl', index:'enbl', width: 60, align:'center',
                         formatter:'checkbox', editoptions:{value:'1:0'},
                         formatoptions:{disabled:false}, }
                    ],
                    height: 'auto',
                    gridview: true,
                    rowNum: 10000,
                    sortname: 'id',
                    treeGrid: true,
                    treeGridModel: 'adjacency',
                    treedatatype: "local",
                    ExpandColumn: 'name',
                    caption: "Demonstrate how to use Tree Grid for the Adjacency Set Model",
                    jsonReader: {
                        repeatitems: false,
                        root: function (obj) { return obj; },
                        page: function (obj) { return 1; },
                        total: function (obj) { return 1; },
                        records: function (obj) { return obj.length; }
                    },
                    loadComplete: function () {
                        var iCol = getColumnIndexByName ($(this), 'enbl'), rows = this.rows, i, c = rows.length;
                        for (i = 0; i < c; i += 1) {
                            $("input", rows[i].cells[iCol]).click(function (e) {
                                var id = $(e.target).closest('tr')[0].id,
                                    isChecked = $(e.target).is(':checked');
                                alert('clicked on the checkbox in the row with id=' + id +
                                      '\nNow the checkbox is ' +
                                      (isChecked? 'checked': 'not checked'));
                            });
                        }
                    }
                }); //.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch: 'cn'});;
            });
        //]]>
        </script>
    </head>
    <body>
        <table id="treegrid"><tr><td/></tr></table>
    </body>
    </html>
    

    【讨论】:

    • @skingz:首先我包含了演示的完整代码。我稍后会阅读您的代码并回答您。
    • :发现可以用“/jquery.jqGrid-3.5/js/jquery.jqGrid.src.js”展开节点
    • @skingz:对不起,我不明白你的意思。 jqGrid 3.5 没有 jquery.jqGrid.src.js。你的问题现在解决了吗?原因是什么?
    • @skingz:你试过我回答的演示吗?如果您为每个带有isLeaf:false 的节点设置expanded:true,则该节点将显示为展开状态。你能重现这个吗?您回发了哪些 JSON 数据?对应于您的代码,数据将是字符串数组,因此与您在原始问题中包含的格式不完全一致。您能否包括从服务器返回的确切 JSON 数据?
    • :sorry,我的demo代码有问题。那个Grid是通过页面点击从服务器获取Json数据的。这意味着Gird不能完全通过页面加载来加载数据。我发现参数“loaded”是初始化数据时扩展TreeGrid的关键字。在你的演示中,如果我删除jsondata中的参数“loaded”,网格也不能扩展节点。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-23
    • 2014-12-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多