Question

我是Kendo UI Grid的新手。我需要实现如下方案：

首先会有一个包含以下基本信息的主网格：

   | Agent Name | No. Of Products Sold
-------------------------------------------
1. |  John      |         50
2. |  Dave      |         30

如果我们点击John，则会打开一个包含50行（每个产品每行）的新表，其中包含多个包含产品详细信息的列。如果我们点击约翰，产品表应该崩溃。

Answer 1

我只修改了一个剑道示例来执行你想要的demo。但我强烈建议你看一下你可能感兴趣的细节模板演示。

主要部分是：

Html：每个网格有两个div，细节网格隐藏

<!-- main grid -->
<div id="grid"></div>

<!-- details grid hidden-->
<div id="grid2" style="display:none"></div>

js：3个数据源，

<script>
    var selected="";
    var lastSelected="-";

    //agents          
    var agents= [{
        AgentId : 1,
        AgentName : "John",
        Products: 50
        }, {
        AgentId : 2,
        AgentName : "Dave",
        Products: 30
   }]

   //details for agent JOHN           
   var detailsJohn = [{
       colA : "colA info ",
       colB : "colB asdas",
       colC : "colC asdas"
       }, {
       colA : "colB info ",
       colB : "colB asdas",
       colC : "colC asdas"
   }]

   //details for agent DAVE   
   var detailsDave = [{
       colA : "colA info john ",
       colB : "colB asdas john",
       colC : "colC asdas"
       }, {
       colA : "colB info deve",
       colB : "colB asdas dave",
       colC : "colC asdas"
   }]

   // event handler for row selection          
   function onChange(e) {
       selected = $.map(this.select(), function(item) {
           return $(item).text();
       });

       // set the details grid datasource       
       if(selected[0] == "John50"){
          $("#grid2").data("kendoGrid").dataSource.data(detailsJohn)
       }else{
          $("#grid2").data("kendoGrid").dataSource.data(detailsDave)
       }

       if(lastSelected == selected[0]){
          $("#grid2").hide()
       }else{
          $("#grid2").show()
       }    
       lastSelected = selected[0]
   }

   $(document).ready(function() {
         $("#grid").kendoGrid({
             dataSource: {
                  data: products,
                  schema: {
                      model: {
                        fields: {
                             AgentId: { type: "number" },
                             AgentName: { type: "string" },
                             Products: { type: "number" }
                           }
                        }
                      },
                  pageSize: 20
               },
              height: 150,
              change: onChange,
              selectable: true,
              scrollable: true,
              sortable: true,
              filterable: true,
              pageable: {
                  input: true,
                  numeric: false
              },
              columns: [
                 "AgentName","Products"                            
                 ]
              });

                  $("#grid2").kendoGrid({
                        dataSource: {
                            data: detailsJohn,
                            schema: {
                                model: {
                                    fields: {
                                        colA: { type: "string" },
                                        colB: { type: "string" },
                                        colC: { type: "String" }
                                    }
                                }
                            },
                            pageSize: 20
                        },
                        height: 150,
                       // change: onChange,
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                            "colA","colB","colC"                            
                        ]
                    });

                });
            </script>

Kendo Grid - 单击列打开另一个表，其中包含所选行的详细信息

1 个答案: