javascript - 如何从剑道分层网格中携带主数据和子数据？

Question

我正在尝试将主数据和子数据从剑道层次结构网格传送到服务器。

这是我的网格:

//To Define Data Source for Yearly Holiday Kendo Grid
        var YearlyHolidayDataSource = new kendo.data.DataSource({
            schema: {
                model: {
                    id: "HLDY_CODE",
                    fields: {
                        HLDY_SLNO: { editable: true },
                        HLDY_DATE: { editable: true },
                        HLDY_DAY: { editable: true },
                        HLDY_NAME: { editable: true },
                        HLDY_TYPE: { editable: true },
                        HLDY_STUS: { editable: true },
                        HLDY_DFIN_TYPE: { editable: true },
                        HLDY_REM: { editable: true }

                    }
                }
            },
            pageSize: 10

        });

        //To Define Columns for Yearly Holiday Kendo Grid
        var YearlyHolidayGrid = $("#YearlyHolidayGrid").kendoGrid({
            dataSource: YearlyHolidayDataSource,
            pageable: true,
            editable: true,
            detailInit: detailInit,
            selectable: "row",
            navigatable: true,
            filterable: true,
            sortable: true,
            height: 400,
            columns: [
                  { field: "HLDY_SLNO", title: "SL", width: "50px" },
                  { field: "HLDY_DATE", title: "Date", width: "60px" },
                  { field: "HLDY_DAY", title: "Day", width: "60px" },
                  { field: "HLDY_NAME", title: "Holiday Name", width: "200px", attributes: { "class": "HolidayName"} },
                  { field: "HLDY_TYPE", title: "Holiday Type", width: "90px" },
                  { field: "HLDY_STUS", title: "Holiday Status", width: "80px", editor: YearlyHolidayStatus },
                  { field: "HLDY_DFIN_TYPE", title: "Defined as", width: "70px", editor: YearlyHolidayDefinedAs },
                  { field: "HLDY_REM", title: "Remarks", width: "80px" },
                  { command: [{ name: "DeltedRow", text: "Delete"}], title: "Delete", width: "90px" }
            ]

        });
        var DetailsGrid;
        function detailInit(e) {
             DetailsGrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: SpecialHolidayDataSource,
                pageable: true,
                editable: true,
                selectable: "row",
                navigatable: true,
                filterable: true,
                sortable: true,
                height: 200,
                toolbar: ["create"],
                columns: [
                      { field: "HLDY_SPCL_SLNO", title: "SL", width: "50px" },
                      { field: "HLDY_DATE", title: "Date", width: "100px" },
                      { field: "DIVI_NAME", title: "Division", width: "100px", attributes: { "class": "DivisionName" } },
                      { field: "UNIT_NAME", title: "Unit", width: "100px", attributes: { "class": "UnitName" } },
                      { field: "PLANT_NAME", title: "Plant", width: "100px", attributes: { "class": "PlantName" } },
                      { field: "DEPT_NAME", title: "Department", width: "100px", attributes: { "class": "DepartmentName" } },
                      { field: "SECT_NAME", title: "Section", width: "100px", attributes: { "class": "SectionName" } },
                      { field: "ACTIVE_STATUS", title: "Active Status", width: "100px", editor: ddlActiveInactive },
                      { field: "HLDY_SPCL_REM", title: "Remarks", width: "100px" },
                      { command: [{ name: "DeltedRow", text: "Delete" }], title: "Delete", width: 100 }
                ]
            }).data("kendoGrid");
        }

这是我的两个 javascript 对象来携带值。

// Java Script object to carry the form data from UI to Server
    var Yearly_Holiday = {"HLDY_SLNO": "", "HLDY_DATE": "", "HLDY_NAME": "", "HLDY_TYPE": "", "HLDY_STUS": "", "HLDY_DFIN_TYPE": "", "HLDY_REM": "", "Special_Holiday": ""};
    var Special_Holiday = { "HLDY_SPCL_SLNO": "", "HLDY_DATE": "", "DIVI_CODE": "", "UNIT_CODE": "", "PLANT_CODE": "", "DEPT_CODE": "", "SECT_CODE": "", "HLDY_SPCL_REM": "", "ActiveStatus": "" };

这是我的保存方法代码:

  function Save() {

            if (saveStatus == 0) {
                var MasterDataSource = $("#YearlyHolidayGrid").data("kendoGrid").dataSource;
                MasterData = MasterDataSource.data(); // Get Master Grid Data

                var ChildDataSource = DetailsGrid.data("kendoGrid").dataSource;
                ChildData = ChildDataSource.data(); // Get Detail Grid Data

                Yearly_Holiday.Special_Holiday = [];

                Yearly_Holiday.CrudStatus = $("#CrudStatus").val();


                for (var i = MasterData.length - 1; i >= 0; i--) {
                    Yearly_Holiday.HLDY_DATE = MasterData[i].HLDY_DATE;
                    Special_Holiday.DIVI_CODE = ChildData[i].DIVI_CODE;
                        Yearly_Holiday.Special_Holiday.push(Special_Holiday);
                    }

                    $.ajax({
                        url: '/HRMC_HDL01/HRMF_HDL01',
                        data: JSON.stringify(Yearly_Holiday),
                        type: 'POST',
                        contentType: 'application/json;',
                        dataType: 'json',
                        success: function (response) {

                        }
                    });
            }

    };

我可以读取主要值，但不能读取详细值。

Answer 1

几个问题与查找 child grid datasource 有关

• 每个主网格行包含一个子网格
• 网格默认显示单个子网格

因此，如果您尝试查找子网格，它总是会为您提供展开的网格。最初它给你单子(monad)网格。如果您想要所有子网格，您必须手动或以编程方式全部展开。

查看此 plunker在这里，我在 <div class="childGrid"> 中渲染子网格

function detailInit(e) {
  $('<div class="childGrid"></div>').appendTo(e.detailCell).kendoGrid({
    dataSource: {
      //others code

然后循环获取所有子网格datasource

$(".childGrid").each(function(index, element){
  console.log($(element).data("kendoGrid").dataSource.data());
});