jqgrid treeGrid Json, как развернуть все узлы при инициализации данных? - PullRequest
Новая
       12

jqgrid treeGrid Json, как развернуть все узлы при инициализации данных?

0 голосов
/ 14 ноября 2011

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}

параметр "расширен" кажется бесполезным?

Я не знаю, как развернуть все узлы или какой-либо указанный узел при инициализации моих данных json?

Олегу: спасибо за демо, но я не могу зайти на эту страницу! - -! Затем я покажу вам свой код 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'
        });
    });

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

1 Ответ

1 голос
/ 14 ноября 2011

Возможно, у вас есть проблемы с другой частью вашего кода. Посмотрите на демо и сравните с еще одним , где только значение свойства 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>/4449900/jqgrid-flazhok-pri-obnovlenii-bazy-dannyh</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>
...