Jq树网格未从控制器加载数据

时间:2013-04-08 06:08:45

标签: jqgrid

我正在使用jqgrid,我想从jquery显示一个调用控制器的网格,它返回我的json数据我的网格没有显示数据代码在这里

我的控制器动作就像这样

   private static List<Category> GetProducts(int parent, int childs)
        {
            string[] procat = { "Electrical", "Computer", "Furniture", "House Hold", "Automobiles" };
            var data = new List<Category>();
            for (int i = 0; i < parent; i++)
            {
                data.Add(new Category { CatId = i, CatName = procat[i % 5], Products = new List<Product>() });
                for (int j = 0; j < childs; j++)
                {
                    data[i].Products.Add(new Product
                    {
                        ProId = j,
                        ProName = "ABC",
                        desc = "A web browser built for speed, simplicity, and security",
                        desc1 = "Google Chrome",
                        desc2 = (i * j).ToString(),
                        desc3 = "Copyright 2013 Google Inc. All rights reserved.",
                        desc4 = i.ToString(),
                        desc5 = j.ToString(),

                        desc6 = "Google Chrome",
                        desc7 = (i * j).ToString(),
                        desc8 = "Copyright 2013 Google Inc. All rights reserved.",
                        desc9 = i.ToString(),
                        desc10 = j.ToString(),

                        desc11 = "Google Chrome",
                        desc12 = (i * j).ToString(),
                        desc13 = "Copyright 2013 Google Inc. All rights reserved.",
                        desc14 = i.ToString(),
                        desc15 = j.ToString(),


                        desc16 = "Google Chrome",
                        desc17 = (i * j).ToString(),
                        desc18 = "Copyright 2013 Google Inc. All rights reserved.",
                        desc19 = i.ToString(),
                        desc20 = j.ToString(),

                        desc21 = "Google Chrome",
                        desc22 = (i * j).ToString(),
                        desc23 = "Copyright 2013 Google Inc. All rights reserved.",
                        desc24 = i.ToString(),
                        desc25 = j.ToString()

                    });
                }
            }
            return data;
        }

  public JsonResult PlainObjectsView()
        {
            var res = new List<FlatProduct>();
            string[] procat = { "Electrical", "Computer", "Furniture", "House Hold", "Automobiles" };
            int i = 1;
            foreach (var item in procat)
            {
                res.Add(new FlatProduct
                {
                    CatId = i,
                    CatName = item,
                    ProName = item,

                    ProId = i,
                    level = 0,
                    parent =null,
                    Isleaf = false,
                    IsLoaded = true,
                    Isexpanded = true
                });
                i++;
            }

            var data = GetProducts(5, 5);

            foreach (var cats in data)
            {
                foreach (var prods in cats.Products)
                {
                    res.Add(new FlatProduct
                    {
                        CatId = cats.CatId + 1,
                        CatName = cats.CatName,
                        ProId = prods.ProId,
                        ProName = prods.ProName,
                        desc = prods.desc,
                        desc1 = prods.desc1,
                        desc2 = prods.desc2,
                        desc3 = prods.desc3,
                        desc4 = prods.desc4,
                        desc5 = prods.desc5,

                        desc6 = prods.desc6,
                        desc7 = prods.desc7,
                        desc8 = prods.desc8,
                        desc9 = prods.desc9,
                        desc10 = prods.desc10,

                        desc11 = prods.desc11,
                        desc12 = prods.desc12,
                        desc13 = prods.desc13,
                        desc14 = prods.desc14,
                        desc15 = prods.desc15,

                        desc16 = prods.desc16,
                        desc17 = prods.desc17,
                        desc18 = prods.desc18,
                        desc19 = prods.desc19,
                        desc20 = prods.desc20,

                        desc21 = prods.desc21,
                        desc22 = prods.desc22,
                        desc23 = prods.desc23,
                        desc24 = prods.desc24,
                        desc25 = prods.desc25,
                        level = 1,
                        parent = cats.CatId + 1,
                        Isleaf = false,
                        IsLoaded = true,
                        Isexpanded = true
                    });
                }
            }

            double pagesize = 5;

            var finalRes = new { page = 1, records = res.Count, rows = res, total = Math.Ceiling(res.Count / pagesize), id = res.Select(c=>c.CatId),  };

            return Json(finalRes, JsonRequestBehavior.AllowGet);
        }

我的jquery就像这样

   <script type="text/javascript">




        $(document).ready(function () {
            'use strict';
            $("#treegrid").jqGrid({
                url: '@Url.Content("~/TreeGrid/PlainObjectsView")',

                datatype: "json",
                mtype: "Get",
                colModel: [
                { name: "CatId",  width: 150,key:true, hidden:true},
                { name: "CatName",  width: 200 },
                { name: "desc",  width: 200 },
                { name: "desc1",  width: 300 },
                { name: "desc10",  width: 300 },
                { name: "desc11",  width: 150 },
                { name: "desc12",  width: 200 },
                { name: "desc13",  width: 300 },
                { name: "desc14",  width: 150 },
                { name: "desc15",  width: 200 },
                { name: "desc16",  width: 300 },
                { name: "desc17",  width: 150 },
                { name: "desc18",  width: 200 },
                { name: "desc19",  width: 300 },
                { name: "desc2",  width: 150 },
                { name: "desc20",  width: 150 },
                { name: "desc21",  width: 200 },
                { name: "desc22",  width: 300 },
                { name: "desc23",  width: 150 },
                { name: "desc24",  width: 200 },
                { name: "desc25",  width: 300 },
                { name: "desc3",  width: 200 },
                { name: "desc4",  width: 300 },
                { name: "desc5",  width: 150 },
                { name: "desc6",  width: 200 },
                { name: "desc7",  width: 300 },
                { name: "desc8",  width: 150 },
                { name: "desc9",  width: 200 },
                { name: "ProId",   width: 300, hidden:true },
                { name: "ProName",  width: 150 }

                ],
                treeGridModel: 'adjacency',             
                height: "auto",



                ExpandColumn: 'CatName',
              //  ExpandColClick: true,

                loadonce:true,
                treeGrid: true,
               // gridview: true,
                viewrecords: true,
                caption: "Tree Grid Example"



            });



        });

    </script>

请帮助我,我在哪里错了

1 个答案:

答案 0 :(得分:0)

首先我们应该以特定的json格式排序数据,首先添加父项,然后像这样添加它的子项

public IEnumerable<FlatProduct> TreeGridjsonData()
    {
        var res = PlainObjectsViewNew();
        int count = 1;
        var list1 = (from rs in res
                     where rs.parent == null
                     select rs).ToList<FlatProduct>();

        foreach (var item in list1)
        {
            finalList.Add(
                new FlatProduct
                {
                    Id = count,
                    CatId = item.CatId,
                    CatName = item.CatName,

                    level = 0,
                    parent = null,
                    Isleaf = false,
                    //IsLoaded = true,
                    Isexpanded = false


                });
            AddChildren(item.CatId, count);
            count += 6;
        }


        return finalList;

    }


public IEnumerable<FlatProduct> AddChildren(int parentid, int count) 
        {
            int lscount = count + 1;
            var res = PlainObjectsViewNew();

            var list1 = from rs in res
                        where rs.parent == parentid
                        select rs;

            foreach(var item in list1)
            {
                finalList.Add(new  FlatProduct
                {

                    CatName = item.CatName,
                    ProId = item.ProId,
                    ProName = item.ProName,
                    Id = lscount,
                    desc = item.desc,
                    desc1 = item.desc1,
                    desc2 = item.desc2,
                    desc3 = item.desc3,
                    desc4 = item.desc4,
                    desc5 = item.desc5,

                    desc6 = item.desc6,
                    desc7 = item.desc7,
                    desc8 = item.desc8,
                    desc9 = item.desc9,
                    desc10 = item.desc10,

                    desc11 = item.desc11,
                    desc12 = item.desc12,
                    desc13 = item.desc13,
                    desc14 = item.desc14,
                    desc15 = item.desc15,

                    desc16 = item.desc16,
                    desc17 = item.desc17,
                    desc18 = item.desc18,
                    desc19 = item.desc19,
                    desc20 = item.desc20,

                    desc21 = item.desc21,
                    desc22 = item.desc22,
                    desc23 = item.desc23,
                    desc24 = item.desc24,
                    desc25 = item.desc25,
                    level = 1,
                    parent = count,
                    Isleaf = true,
                     IsLoaded = true,
                    Isexpanded = true

                });
                lscount++;
            }


            return finalList;
        }

之后将此列表转换为此

的json格式
 public JsonResult GetPlainobject()
        {

            var rows = (PlainObjectsViewNew()
                .Select(c => new
                {
                     id=c.Id,
                    cell =new []

                                         {
                                            c.Id.ToString(),
                                            c.CatName, 


                                            c.desc,
                                            c.desc1,
                                            c.desc10,
                                            c.desc11,
                                            c.desc12,
                                            c.desc13,
                                            c.desc14,
                                            c.desc15,
                                            c.desc16,
                                            c.desc17,
                                            c.desc18,
                                            c.desc19,
                                            c.desc2,
                                            c.desc20,
                                            c.desc21,
                                            c.desc22,
                                            c.desc23,
                                            c.desc24,
                                            c.desc25,
                                            c.desc3,
                                            c.desc4,
                                            c.desc5,
                                            c.desc6,
                                            c.desc7,
                                            c.desc8,
                                            c.desc9,
                                            c.ProId.ToString(),
                                            c.ProName,
                                            c.level.ToString(),
                                            c.parent.ToString(),
                                            c.Isexpanded.ToString(),
                                            c.IsLoaded.ToString(),
                                            c.Isleaf.ToString(),




                                            }






                })).ToArray();


            return Json(new
            {
                page = 1,
                records = rows.Length,
                rows


            }, JsonRequestBehavior.AllowGet);


        }

之后javascript函数发生了一些变化

$(document).ready(function () {


    $("#treegrid").jqGrid({
        url: '@Url.Content("~/TreeGrid/GetPlainobjectOrderdData")',

        datatype: "json",
        mtype: "Get",
        colModel: [
        { name: "CatId",  width: 150,key:true, hidden:true},
        { name: "CatName",  width: 200 },
        { name: "desc",  width: 200 },
        { name: "desc1",  width: 300 },
        { name: "desc10",  width: 300 },
        { name: "desc11",  width: 150 },
        { name: "desc12",  width: 200 },
        { name: "desc13",  width: 300 },
        { name: "desc14",  width: 150 },
        { name: "desc15",  width: 200 },
        { name: "desc16",  width: 300 },
        { name: "desc17",  width: 150 },
        { name: "desc18",  width: 200 },
        { name: "desc19",  width: 300 },
        { name: "desc2",  width: 150 },
        { name: "desc20",  width: 150 },
        { name: "desc21",  width: 200 },
        { name: "desc22",  width: 300 },
        { name: "desc23",  width: 150 },
        { name: "desc24",  width: 200 },
        { name: "desc25",  width: 300 },
        { name: "desc3",  width: 200 },
        { name: "desc4",  width: 300 },
        { name: "desc5",  width: 150 },
        { name: "desc6",  width: 200 },
        { name: "desc7",  width: 300 },
        { name: "desc8",  width: 150 },
        { name: "desc9",  width: 200 },
        { name: "ProId",   width: 300, hidden:true },
        { name: "ProName",  width: 150 }

        ],
       // gridComplete: doGridComplete,
        onInitGrid: doOnInitGrid,
        loadComplete: doloadComplete,

        treeGridModel: 'adjacency',             
        height: "auto",
        ExpandColumn: 'CatName',
        //gridview: true,
        loadonce:false,
        treeGrid: true,
        treedatatype:'jsonstring',
        viewrecords: true,
        treeIcons: { leaf: 'ui-icon-document-b' },
        caption: "Tree Grid Example"



    });



});

这已经完成了