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

时间:2019-01-22 04:48:33

标签: javascript jquery syncfusion

我正在尝试在基本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

1 个答案:

答案 0 :(得分:0)

查询:我希望克隆该行,并具有该行的全部功能,而不是剥离的版本

从共享演示中,我们将看到您将克隆的行添加到了当前行的下方。由于克隆行在数据源中未未更新,因此我们无法执行网格功能,如s 排序,编辑,过滤等。克隆的行。

我们还需要一些有关您的要求的其他详细信息。因此,请返回以下详细信息。

  1. 请确认您是否要对克隆的行执行网格操作(即排序,过滤等)
  2. 如果没有,请详细说明您的要求。
  3. 我们也想知道克隆网格行的原因。

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