javascript - 如何在基本 js 1.X ejgrid 小部件中单击按钮时克隆一行

问题描述

我正在尝试在基本的 JS 1.X Syncfusion 中克隆 ejgrid 小部件中的一行。

我尝试了从老派低级 JS、jQuery 的各种方法，并参考了官方的 JS API 文档，但无济于事。希望那里有人以前使用过这项技术...

//grid population
$('#lstSelected').ejGrid({
            dataSource: [],
            enableRowHover: true,
            allowTextWrap: true,
            allowSorting: true,
            allowFiltering: false,
            allowSelection: false,
            allowResizing: true,
            allowScrolling: true,
            scrollSettings: { height: $(window).height() - 250, width: "100%" },
            columns: [
                { headerText: "", template: true, templateID: "#savechktmp", width: 50, textAlign: "center", type: "string" },
                { field: "BP_ID", visible: false, isPrimaryKey: true, defaultValue: 0 },
                { field: "Package_Type", headerText: "Type", type: "string", width: 100, foreignKeyField: "value", foreignKeyValue: "text", dataSource: pkgtypes },
                { field: "Package_Description", headerText: "Description", type: "string", width: 200 },
                { field: "Customer_ID", headerText: "Customer", type: "string", width: 220, foreignKeyField: "value", foreignKeyValue: "text", dataSource: customerList },
                { field: "Subdivision_ID", headerText: "Subdivision", type: "string", width: 220, foreignKeyField: "value", foreignKeyValue: "text", dataSource: subdivisionList },
                { field: "HoursWithChildren", headerText: "Hours (*)", type: "numeric", format: "{0:N0}", width: 100 },
                { field: "Floor", headerText: "Location", width: 150, template: true, templateID: "#floortmp" },
                { field: "Location", headerText: "Room", width: 150, template: true, templateID: "#locationtmp" },
                { field: "Qty", headerText: "Qty", width: 100, template: true, templateID: "#qtytmp" },
                {
                    headerText: "", textAlign: "center",
                    commands: [
                        { type: "Add", buttonOptions: { width: "80%", text: "+", click: "cloneRow" } }
                    ],
                    width: 130
                }
            ],

//this is my function attempts

function cloneRow() {
//JS attempt
        var tableDiv = document.getElementById('lstSelected');
        var tableClass = tableDiv.getElementsByClassName('e-table')[1];
        console.log(tableClass);

        tableDiv.appendChild(tableClass);
        resizeGrids();
}

//jQuery attempt
function cloneRow()  {
    var $tableBody = $('#Grid').find("tbody"),
        $trLast = $tableBody.find("tr:last"),
        $trNew = $trLast.clone();
    $trLast.after($trNew);

    var $lastRow = $("[id$=blah] tr:not('.ui-widget-header'):last");
    //grab row before the last row
    var $newRow = $lastRow.clone();
    //clone it
    $newRow.find(":text").val("");
    //clear out textbox values    
    $lastRow.after($newRow);
    //add in the new row at the end
  }

}

我想要克隆的行，具有该行的全部功能，而不是剥离版本。我在这里也有一个演示/尝试：http: //jsplayground.syncfusion.com/dexgxk03

标签： javascriptjquerysyncfusion

查询：我想要克隆的行，具有该行的全部功能，而不是剥离版本。

从共享演示中，我们会看到您在当前行下添加了克隆行。由于克隆的行在 dataSource 中没有更新，我们无法对克隆的行执行网格功能，如排序、编辑、过滤等。

我们还需要一些关于您的要求的额外细节。因此，请向我们提供以下详细信息。

请确认是否要对克隆的行执行网格操作（即排序、过滤等）
如果不是，请详细说明您的要求。
我们也想知道克隆网格行的原因。

所要求的详细信息将帮助我们尽早实现您的要求。

javascript - 如何在基本 js 1.X ejgrid 小部件中单击按钮时克隆一行

问题描述

解决方案

推荐阅读