javascript - 剑道 UI 网格 : Drag and Drop Hierarchy not working

Question

我想将分层数据拖放到不同的网格中。

拖放操作正常，但该行未放入目标网格的详细信息项中。

我在这里创建了示例。 here is the sample for the same..

下面的代码展示了我是如何构建它的，但同时也遇到了一些问题。请帮我弄清楚我在这方面犯了什么错误？

function convert(array) {
    var map = {};
    for (var i = 0; i < array.length; i++) {
        var obj = array[i];
        obj.items = [];

        map[obj.DemographicId] = obj;

        var parent = obj.ParentId || '-';
        if (!map[parent]) {
            map[parent] = {
                items: []
            };
        }
        map[parent].items.push(obj);
    }

    return map['-'].items;

}

var arr = [{"Level":1,"DemographicId":13,"ParentId":null,"Name":"Bewitched General","Description":0.335336528},{"Level":2,"DemographicId":349,"ParentId":13,"Name":"Unacceptable Experience","Description":0.335336528},{"Level":1,"DemographicId":14,"ParentId":null,"Name":"Trained Trust","Description":29.17427794},{"Level":2,"DemographicId":329,"ParentId":14,"Name":"Concerned Rest","Description":0.335336528},{"Level":2,"DemographicId":331,"ParentId":14,"Name":"Tough Sleep","Description":2.012019168},{"Level":3,"DemographicId":346,"ParentId":331,"Name":"Icy Coffee","Description":0.335336528},{"Level":3,"DemographicId":347,"ParentId":331,"Name":"Big Fix","Description":0.335336528},{"Level":3,"DemographicId":348,"ParentId":331,"Name":"Total Worry","Description":0.335336528},{"Level":3,"DemographicId":431,"ParentId":331,"Name":"Fast Discipline","Description":0.335336528},{"Level":3,"DemographicId":586,"ParentId":331,"Name":"Intrepid Sister","Description":0.335336528},{"Level":2,"DemographicId":376,"ParentId":14,"Name":"Hasty Ordinary","Description":0.335336528},{"Level":2,"DemographicId":428,"ParentId":14,"Name":"Unnatural Native","Description":1.006009584},{"Level":3,"DemographicId":442,"ParentId":428,"Name":"Tan Celebration","Description":0.335336528},{"Level":3,"DemographicId":492,"ParentId":428,"Name":"Wise Repair","Description":0.335336528},{"Level":2,"DemographicId":443,"ParentId":14,"Name":"Frightening Historian","Description":3.018028753},{"Level":3,"DemographicId":328,"ParentId":443,"Name":"Improbable Stage","Description":0.335336528},{"Level":3,"DemographicId":517,"ParentId":443,"Name":"Heavenly Debt","Description":0.335336528},{"Level":3,"DemographicId":526,"ParentId":443,"Name":"That Art","Description":2.012019168},{"Level":4,"DemographicId":524,"ParentId":526,"Name":"Vivacious Competition","Description":0.670673056},{"Level":5,"DemographicId":445,"ParentId":524,"Name":"Dependable Potato","Description":0.335336528},{"Level":4,"DemographicId":525,"ParentId":526,"Name":"Watchful Tough","Description":1.006009584},{"Level":5,"DemographicId":432,"ParentId":525,"Name":"Lovable Sing","Description":0.670673056},{"Level":6,"DemographicId":435,"ParentId":432,"Name":"Vengeful Cigarette","Description":0.335336528},{"Level":2,"DemographicId":522,"ParentId":14,"Name":"Insistent Offer","Description":0.335336528},{"Level":2,"DemographicId":590,"ParentId":14,"Name":"Oddball Airline","Description":0.335336528},{"Level":2,"DemographicId":591,"ParentId":14,"Name":"Back Outcome","Description":20.79086474},{"Level":3,"DemographicId":330,"ParentId":591,"Name":"Mushy Active","Description":0.335336528},{"Level":3,"DemographicId":427,"ParentId":591,"Name":"Immaterial Safety","Description":1.341346112},{"Level":4,"DemographicId":437,"ParentId":427,"Name":"Same Restaurant","Description":0.335336528},{"Level":4,"DemographicId":438,"ParentId":427,"Name":"Imaginary Brother","Description":0.335336528},{"Level":4,"DemographicId":613,"ParentId":427,"Name":"Bubbly Hole","Description":0.335336528},{"Level":3,"DemographicId":433,"ParentId":591,"Name":"Several Weird","Description":2.682692225},{"Level":4,"DemographicId":426,"ParentId":433,"Name":"Deadly Potato","Description":0.335336528},{"Level":4,"DemographicId":436,"ParentId":433,"Name":"Ornery Race","Description":0.335336528},{"Level":4,"DemographicId":440,"ParentId":433,"Name":"Trusting Native","Description":0.335336528},{"Level":4,"DemographicId":441,"ParentId":433,"Name":"Flowery Tower","Description":0.335336528},{"Level":4,"DemographicId":479,"ParentId":433,"Name":"Downright Fall","Description":0.335336528},{"Level":4,"DemographicId":480,"ParentId":433,"Name":"Unique Career","Description":0.335336528},{"Level":4,"DemographicId":614,"ParentId":433,"Name":"Unknown Thomas","Description":0.335336528},{"Level":3,"DemographicId":592,"ParentId":591,"Name":"Judicious Analyst","Description":0.335336528},{"Level":3,"DemographicId":593,"ParentId":591,"Name":"Hard Major","Description":0.335336528},{"Level":3,"DemographicId":595,"ParentId":591,"Name":"Naughty Temporary","Description":0.335336528},{"Level":3,"DemographicId":596,"ParentId":591,"Name":"Crisp Commission","Description":0.335336528},{"Level":3,"DemographicId":597,"ParentId":591,"Name":"Valid Funny","Description":0.335336528},{"Level":3,"DemographicId":598,"ParentId":591,"Name":"Luminous Log","Description":0.335336528},{"Level":3,"DemographicId":599,"ParentId":591,"Name":"Sour Introduction","Description":0.335336528},{"Level":3,"DemographicId":600,"ParentId":591,"Name":"Elegant Player","Description":0.335336528},{"Level":3,"DemographicId":601,"ParentId":591,"Name":"Wilted Scheme","Description":1.006009584},{"Level":4,"DemographicId":444,"ParentId":601,"Name":"That Research","Description":0.335336528},{"Level":4,"DemographicId":609,"ParentId":601,"Name":"Overcooked Message","Description":0.335336528},{"Level":3,"DemographicId":602,"ParentId":591,"Name":"Good-natured Responsibility","Description":3.688701809},{"Level":4,"DemographicId":478,"ParentId":602,"Name":"Cumbersome Battle","Description":0.335336528},{"Level":4,"DemographicId":515,"ParentId":602,"Name":"Unsightly Contest","Description":2.682692225},{"Level":5,"DemographicId":439,"ParentId":515,"Name":"Mushy Explanation","Description":0.335336528},{"Level":5,"DemographicId":508,"ParentId":515,"Name":"Obvious Pride","Description":0.670673056},{"Level":6,"DemographicId":509,"ParentId":508,"Name":"Negligible Ask","Description":0.335336528},{"Level":5,"DemographicId":514,"ParentId":515,"Name":"Concerned Classic","Description":1.341346112},{"Level":6,"DemographicId":510,"ParentId":514,"Name":"Greedy Double","Description":0.335336528},{"Level":6,"DemographicId":511,"ParentId":514,"Name":"Reflecting Poem","Description":0.335336528},{"Level":6,"DemographicId":512,"ParentId":514,"Name":"Every Finish","Description":0.335336528},{"Level":4,"DemographicId":610,"ParentId":602,"Name":"Zigzag Meet","Description":0.335336528},{"Level":3,"DemographicId":603,"ParentId":591,"Name":"Esteemed Satisfaction","Description":0.335336528},{"Level":3,"DemographicId":604,"ParentId":591,"Name":"Normal Trouble","Description":1.341346112},{"Level":4,"DemographicId":485,"ParentId":604,"Name":"Hot Fish","Description":0.335336528},{"Level":4,"DemographicId":611,"ParentId":604,"Name":"Eager Perception","Description":0.335336528},{"Level":4,"DemographicId":612,"ParentId":604,"Name":"Shocking Aside","Description":0.335336528},{"Level":3,"DemographicId":605,"ParentId":591,"Name":"Terrific King","Description":0.335336528},{"Level":3,"DemographicId":606,"ParentId":591,"Name":"Humiliating Suit","Description":0.335336528},{"Level":3,"DemographicId":607,"ParentId":591,"Name":"Serious Smile","Description":0.335336528},{"Level":3,"DemographicId":608,"ParentId":591,"Name":"Memorable Ship","Description":3.353365281},{"Level":4,"DemographicId":430,"ParentId":608,"Name":"Wan Science","Description":0.335336528},{"Level":4,"DemographicId":434,"ParentId":608,"Name":"Hard Rule","Description":0.335336528},{"Level":4,"DemographicId":473,"ParentId":608,"Name":"Marvelous Radio","Description":0.335336528},{"Level":4,"DemographicId":477,"ParentId":608,"Name":"Visible Personality","Description":0.335336528},{"Level":4,"DemographicId":481,"ParentId":608,"Name":"Scrawny Shine","Description":0.335336528},{"Level":4,"DemographicId":507,"ParentId":608,"Name":"Descriptive Pride","Description":0.335336528},{"Level":4,"DemographicId":516,"ParentId":608,"Name":"Pleased Private","Description":0.335336528},{"Level":4,"DemographicId":548,"ParentId":608,"Name":"Frizzy District","Description":0.335336528},{"Level":4,"DemographicId":615,"ParentId":608,"Name":"Juicy Organization","Description":0.335336528},{"Level":3,"DemographicId":616,"ParentId":591,"Name":"Sweaty Equal","Description":0.335336528},{"Level":3,"DemographicId":621,"ParentId":591,"Name":"Sweltering Cigarette","Description":0.335336528},{"Level":3,"DemographicId":623,"ParentId":591,"Name":"Buoyant Rule","Description":0.335336528},{"Level":3,"DemographicId":625,"ParentId":591,"Name":"Whimsical Remote","Description":0.335336528},{"Level":3,"DemographicId":633,"ParentId":591,"Name":"Notable Feed","Description":0.335336528},{"Level":3,"DemographicId":635,"ParentId":591,"Name":"Puzzled Pin","Description":1.006009584},{"Level":4,"DemographicId":594,"ParentId":635,"Name":"Plump Member","Description":0.335336528},{"Level":4,"DemographicId":636,"ParentId":635,"Name":"Colorless Service","Description":0.335336528},{"Level":2,"DemographicId":618,"ParentId":14,"Name":"Extroverted Excuse","Description":0.335336528},{"Level":2,"DemographicId":622,"ParentId":14,"Name":"Definite Sector","Description":0.335336528},{"Level":2,"DemographicId":631,"ParentId":14,"Name":"Dear Blue","Description":0.335336528},{"Level":1,"DemographicId":15,"ParentId":null,"Name":"Weird Rush","Description":3.688701809},{"Level":2,"DemographicId":461,"ParentId":15,"Name":"Vigilant Mine","Description":0.335336528},{"Level":2,"DemographicId":527,"ParentId":15,"Name":"Darling Cousin","Description":2.682692225},{"Level":3,"DemographicId":504,"ParentId":527,"Name":"Courteous Knife","Description":0.335336528},{"Level":3,"DemographicId":528,"ParentId":527,"Name":"Constant Window","Description":2.012019168},{"Level":4,"DemographicId":6,"ParentId":528,"Name":"Serene Personal","Description":0.335336528},{"Level":4,"DemographicId":518,"ParentId":528,"Name":"Cooperative Marketing","Description":0.335336528},{"Level":4,"DemographicId":530,"ParentId":528,"Name":"Likely Car","Description":0.335336528},{"Level":4,"DemographicId":531,"ParentId":528,"Name":"Worst Lip","Description":0.335336528},{"Level":4,"DemographicId":550,"ParentId":528,"Name":"Quintessential Evening","Description":0.335336528},{"Level":2,"DemographicId":529,"ParentId":15,"Name":"Knowing Debt","Description":0.335336528},{"Level":2,"DemographicId":587,"ParentId":15,"Name":"Harmless Weight","Description":0.335336528},{"Level":1,"DemographicId":16,"ParentId":null,"Name":"Tidy Mouse","Description":2.012019168},{"Level":2,"DemographicId":5,"ParentId":16,"Name":"Useless Chemistry","Description":0.335336528},{"Level":2,"DemographicId":254,"ParentId":16,"Name":"Several Expert","Description":0.335336528},{"Level":2,"DemographicId":486,"ParentId":16,"Name":"Young String","Description":0.335336528},{"Level":2,"DemographicId":519,"ParentId":16,"Name":"Ideal Army","Description":1.006009584},{"Level":3,"DemographicId":520,"ParentId":519,"Name":"Tart Text","Description":0.335336528},{"Level":3,"DemographicId":521,"ParentId":519,"Name":"Tiny Church","Description":0.335336528}]
var myData = convert(arr)
var dataSource1 = new kendo.data.DataSource({
    data: myData
});

$(document).ready(function () {
    var originalGrid = $("#originalGrid").kendoGrid({
        dataSource: dataSource1,
        sortable: false,
        pageable: false,
        detailInit: detailInit1,
        dataBound: function () {
            //this.expandRow(this.tbody.find("tr.k-master-row").last());
        },
        columns: [
            {
                field: "Name",
                title: "Name",
                width: "80px"
            },
            {
                field: "Description",
                title: "Amount",
                width: "30px",
                aggregates: ["sum"],
                groupFooterTemplate: "Sum: #= sum # "
            }
        ]
    });
});

function detailInit1(e) {

    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            data: e.data.items  //data is the current position item, items is its child items
        },
        scrollable: false,
        sortable: false,
        pageable: false,
        detailInit: detailInit1,
        columns: [
            {
                field: "Name",
                title: "Name",
                width: "80px"
            },
            {
                field: "Description",
                title: "Amount",
                width: "30px",
                aggregates: ["sum"],
                groupFooterTemplate: "Sum: #= sum # "
            }
        ]
    });
}

$(document).ready(function () {

    var dataSource2 = new kendo.data.DataSource({
        data: []
    });

    var grid2 = $("#grid2").kendoGrid({
        dataSource: dataSource2,
        width: 400,
        sortable: false,
        pageable: false,
        detailInit: detailInit11,
        schema: {
            model: {
                id: "DemographicId"
            }
        },
        columns: [
            {
                field: "Name",
                title: "Name",
                width: "40px"
            },
            {
                field: "Description",
                title: "Amount",
                width: "110px",
                aggregates: ["sum"],
                groupFooterTemplate: "Sum: #= sum # "
            }
        ]
    });

    function detailInit11(e) {
        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: {
                data: e.data.items
            },
            scrollable: false,
            sortable: false,
            pageable: false,
            detailInit: detailInit11,
            columns: [
                {
                    field: "Name",
                    title: "Name",
                    width: "110px"
                },
                {
                    field: "Description",
                    title: "Amount",
                    width: "110px",
                    aggregates: ["sum"],
                    groupFooterTemplate: "Sum: #= sum # "
                }
            ]
        });
    }

    $(originalGrid).kendoDraggable({
        filter: "tr",
        hint: function (e) {
            var item = $('<div class="k-grid k-widget" style="background-color: DarkOrange; color: black;"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
            return item;
        },
        group: "gridGroup1",
    });


    var currentDataItem = null;
    function getItemByUid(uid, currentUid, data) {
        for (let index = 0; index < data.length; index++) {
            const element = data[index];
            if (element.uid == currentUid) {
                currentDataItem = element;
                return false;
            } else {
                if (element.items) {
                    getItemByUid(element.uid, currentUid, element.items);
                }
            }
        }

    }
    grid2.kendoDropTarget({
        drop: function (e) {
            var uid = e.draggable.currentTarget.data("uid");
            var dataItem = getItemByUid(uid, uid, dataSource1.data());
            dataSource2.add(currentDataItem);
        },
        group: "gridGroup1",
    });
});
        

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Kendo UI Snippet</title>

        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css"/>

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
    </head>
    <body>
      
    <div>
            <div style="width:50%;float:left" class="dragGrid">
                <div id="originalGrid"></div>
            </div>
            <div style="width:50%;float:right" >
                <div id="grid2"></div>
            </div>
        </div>
        

    </body>
    </html>

Answer 1

您还需要处理细节网格的放置目标。使用 - 几乎相同的 kendoDropTarget 代码到您的详细信息网格:

gridDetail.kendoDropTarget({
    drop: function (e) {
        var uid = e.draggable.currentTarget.data("uid");
        var dataItem = getItemByUid(uid, uid, dataSource1.data());

        $(e.dropTarget).data("kendoGrid").dataSource.add(currentDataItem);
    },
    group: "gridGroup1",
});

Demo