Question

我是淘汰赛和MVC的新手。我想添加一个链接按钮（删除），它将删除我的挖空网格中显示的记录。我真的不知道如何实现这一目标。我有以下代码使用KO网格显示记录。现在我想在网格中添加一个链接按钮来删除记录

控制器：

public JsonResult GetResult()
    {
        GetResultRequest req = new GetResultRequest() { AcctID=57345, PartyType=2 };
        var getResultInfo = WSHelper.WsService.GetResults(req);
        return Json(getResultInfo.Signers, JsonRequestBehavior.AllowGet);
    }

查看：

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/SafeHarborBundle")
<script src="~/Scripts/koGrid-2.1.1.js"></script>
<script type="text/javascript">
var dataViewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));

<div id="gridSigner">
<div id="grids123" style="height: 700px; width: 650px;"
    data-bind="koGrid: {
data: gridItems, columnDefs: [{ field: 'AcctID', displayName: 'AcctID', width: '150' },
{ field: 'FName', displayName: 'First Name', width: '150' },
{ field: 'LName', displayName: 'Last Name', width: '150' },
{ field: 'AliasFName', displayName: 'Alias First Name', width: '150' },
{ field: 'SSN', displayName: 'AcctID', width: '150' }],
autogenerateColumns: false,
isMultiSelect: false,
showFilter: true,
showColumnMenu: true,
enablePaging: false,
displaySelectionCheckbox: false,
enableColumnResize: false,
multiSelect: false

}“＆GT;

JQUERY FILE：

$(document).ready(function () {
loadApplication(dataViewModel);

ko.applyBindings(Gridviews, document.getElementById('gridSigner'));
});

function loadApplication(initialData) {

self = this;
self.ViewModel = initialData;
self.BranchOptions = ko.observableArray([]);
self.AcctTypeOptions = ko.observableArray([]);
self.OriginationOptions = ko.observableArray([]);    
self.Message = ko.observable();
SearchSignerData();
ko.applyBindings(self, document.getElementById('main-search'));

}

SearchSignerData = function () {

$.ajax({
    type: "Get",
    url: "/SafeHarborApp/GetResult",
    contentType: 'application/json',
    async: true,
    cache: false,
    beforeSend: function () {
    },
    success: function (result) {
        alert(result[0].AcctID.toString());
        if (result.length != 0) {
            $.each(result, function (i, item) {
                Gridviews.gridItems.push(item);
            });

        }
        else {

            Gridviews.gridItems.removeAll();
            alert("No Records found");
        }
    },
    complete: function () {

    },
    error: function (xhr, textStatus, errorThrown) {
        //alert(jqXHR.responseText);
        var title = xhr.responseText.split("<title>")[1].split("</title>")[0];
        alert(title);
        // Handle error.
    }
});
}

以上代码在KO网格中显示记录时效果很好。但是，我现在不知道如何在显示的KO网格中添加删除按钮。我试着搜索它但是找不到任何有用的东西可以得到我的结果。请帮忙......

Answer 1

在ko grid中使用CellTemplate。请参阅下面的代码

    <script type="text/javascript">
    self.NoOfAccountColumn = '<a data-bind="value: $parent.entity"     onclick="Popup(this.value)">No Of Account</a>';
    self.Delete = '<a data-bind="value: $parent.entity"     onclick="deleteRow(this.value)">Delete</a>';
    function Popup(rowItem) {
        alert(rowItem.AffinityNum + ' ' + rowItem.ClientName + ' : NoOfAccount Clicked');
    }
    function deleteRow(rowItem) {
        alert(rowItem.AffinityNum + ' ' + rowItem.ClientName + ' : Delete Clicked');
    }
    function isDoubleClick(oldValue, currentValue) {
        var responseTime = 400;
        if ((currentValue - oldValue) <= responseTime) {
            self.clickTime = currentValue;
            return true;
        }
        self.clickTime = currentValue;
        return false;
    };
    </script>
    <script src="~/Scripts/Packages/koGrid-2.1.1.js"></script>
    <div id="disp">
    <div id="grid" style="height: 200px; width: 600px"
        data-bind="koGrid: {
    data: BranchOptions,
    afterSelectionChange: function (rowItem, event) {
        if (event.type == 'click' && isDoubleClick(self.clickTime, event.timeStamp)) {
            alert(rowItem.entity.ClientName + ' : Row DoubleClick');
        }
    },
    columnDefs: [{ field: 'ClientName', displayName: 'Client Name', width: '*', },
                 { field: 'AffinityNum', displayName: 'Affinity Num', width: '*', cellTemplate: NoOfAccountColumn },
                 { field: 'AffinityID', displayName: 'Affinity ID', width: '*',     cellTemplate: Delete }],
    autogenerateColumns: false,
    isMultiSelect: false,
    showFilter: true,
    showColumnMenu: true,
    enablePaging: false,
    displaySelectionCheckbox: false,
    enableColumnResize: true,
    multiSelect: false
}">
    </div>
</div>

如何使用MVC在挖空网格中添加链接按钮

1 个答案: