在ajax调用后从数据库中删除数据后,如何从网格Kendo中删除行

时间:2018-02-03 16:00:30

标签: javascript jquery ajax kendo-ui kendo-grid

有人帮我弄清楚如何在成功完成ajax调用后删除我的行数据(数据从数据库中删除)? 我尝试了不同的方法获取行然后从行调用删除函数,但它不起作用。 我想找到一种方法在我的deleteDataReportRecords函数中删除行然后将其传递给ajax调用ajaxRemoveTTvUidsCall,然后如果响应成功,我从网格中删除作为参数传递给该函数的行ajaxRemoveTTvUidsCall 这是javaScript文件:

function createKendoDataReportGrid(){
    var year = $("#vehicleReportYearSelector").val();
    var country = $("#vehicleReportCountrySelector").val();
    var acodeFormatted = country + convertYearsIntoAcodeFormat(year);
    $("#vehicleReportGrid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: String.format('{0}/ajax/myData/records.ajax',
                        ASC.cfg.getContextPath()),
                    data: function () {
                        return {
                            acodes: JSON.stringify(acodeFormatted)
                        }
                    }
                }
            },
            schema: {
                parse: function(response) {
                    if (response.result !== null && response.result!== null&&
                        response.result.length!==0) {
                        if($("#isAdminUser").val() === "true"){
                            $("#deleteRecord").removeAttr('disabled');
                        }

                        return response.result;
                    }
                    else {
                        return [];
                    }
                }
            },
            pageSize: 20
        },
        groupable: false,
        sortable: true,
        autoBind: true,
        pageable: {
            pageSizes: true,
            buttonCount: 20
        },
        columns: [{
            field: "colum1",
            title: "ID",
            width: '60px',
            template: function(dataItem){
                return '<span class="colum1">' + dataItem.colum1 + '</span>';
            }

            },
            {
                field   : "",
                title   : '<input type="button"/>',
                width: '55px',
                template: function(dataItem){
                    var currentTtvUid = dataItem.ttvUid;
                    var deletedRecordId = "deleteRecord"+currentTtvUid;
                if((dataItem.fvdUidMatch !==1
                        || dataItem.cadaAcodeMatch ===0
                        || dataItem.acodeStyleIdDuplicateCount>1
                    )&& $("#isAdminUser").val() === "true"){
                    '<div id="vehicleReportGrid" style="display: none;"> </div>'
                    return '<button id="'+deletedRecordId+'" class="btn" style="display:inline-block;margin: 10px 5px 5px 5px; float:right;" onclick="deleteDataReportRecords(event,this,'+currentTtvUid+')" enabled"/>Delete</button>';
                }else{
                    return '<button id="'+deletedRecordId+'"class="btn" style="display:inline-block;margin: 10px 5px 5px 5px; float:right;" onclick="deleteDataReportRecords(event,this,'+currentTtvUid+')" disabled"/>Delete</button>';
                }
            },
                width   : "100px"
            }]
    });
}

function deleteDataReportRecords(e,variable,currentTtvUid){
    var confirmDelete = confirm("Are you sure you want to delete the selected vehicle?");
    if (confirmDelete) {
        e.stopPropagation();
        var ttvUids = [];
        ttvUids.push(currentTtvUid);
        //vehicleReportGrid.removeRow($(variable).closest("tr"));
        var row = $('#vehicleReportGrid').find('tbody tr').has('input:button:enabled');
        ajaxRemoveDataCall(row,ttvUids);
    }
}

function ajaxRemoveDataCall(row,ttvUidArray){
    $.ajax({
        type    : "POST",
        url     : String.format('{0}/ajax/delete/data/records.ajax', ASC.cfg.getContextPath()),
        dataType: 'json',
        data    : {
            "ttvuids": JSON.stringify(ttvUidArray)
        },

        success: function(response) {
            if (response!==null){
                row.remove();
            } else {
                alert("Error: unable to remove data");
            }
        },
        error  : function(e) {
            alert("Error: unable to remove data: " + e);
        }
    });
}

这是JSP文件:

   <layout:master activeNavId="home" title="page.appLinker.title">
        <jsp:attribute name="scripts">
            <script type="text/javascript">
                (function() {
                    var page = new com.src.appLinker.pages.MainPage();
                    $(document)
                    .ready(function() {
                        page.init();
                    });

                })(window.jQuery);
            </script>                
        </jsp:attribute>
        <jsp:body>
            <div id="mainContainer" class="appMarginLeft appMarginRight">
                <div>
                    <div id="tabStrip" class="tabStrip">
                        <ul>
                            <li>
                                <label id="vehicleReportLabel" style="cursor: pointer" class="labelFont">
                                    Report & Fix
                                </label>
                            </li>
                        </ul>                   
                        <div id="vehicleReportContainer"  class="tabContainer" >
                            <h3 style="display: inline-block; padding: 5px;">Vehicle Report & Fix </h3>

                            <select id="vehicleReportCountrySelector" name="vehicleReportCountrySelector"
                                    onchange="setYearsOnVehicleReportDropDown()"
                                    style="width:10%; margin-left: 10px">
                            </select>
                            <select id="vehicleReportYearSelector" name="vehicleReportYearSelector" style="width:7%; margin-left: 10px" onchange="setSelectedYearOnVehicleReportDropDown()"></select>
                            <button class="btn" id="searchVehicleReportButton" style="margin-top:-10px" onclick="createKendoDataReportGrid()">Search</button>
                            <div id="vehicleReportGrid"> </div>
                        </div>
                    </div>
                </div>
            </div>
        </jsp:body>
    </layout:master>

0 个答案:

没有答案
相关问题