jqgrid treeGrid Json,如何在初始化数据时展开所有节点?

发布于 2024-12-15 17:03:43 字数 3195 浏览 2 评论 0原文

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; }
}

Json data as :

{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}

the parameter "expanded" seem no use?

I don't know how to expand all nodes or some specified node when initialise my json data?


To Oleg: thanks for your demo,but I can't visit that page! - -!
Then,I show you my javascript code,maybe you can find some problems:

$(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'
        });
    });

and My 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; }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

梦一生花开无言 2024-12-22 17:03:43

可能您的代码的其他部分存在一些问题。查看演示并与另一个 其中只有值expanded 属性更改为 true。该节点将被扩展。如果您确实遇到问题,您应该将您的代码包含在问题的代码中。

更新:您写道,访问演示时遇到一些问题,这有点奇怪。第一个演示来自答案。我在演示的代码中修改了 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>

Probably you have some problems in other part of your code. Look at the demo and compare with another one where only the value of expanded property are changed to true. The node will be expanded. If you do have problems you should include your code in the code of your question.

UPDATED: You wrote that you have some problem to access to the demos which is a little strange. The first demo is from the answer. I modified in the code of the demo just one value of expanded property are changed to true and the grid will be loaded with extended I includes the full code "Cash" item. Below you find the full HTML code of the demo:

<!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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文