單擊按鈕更改JQGrid單元格值

Question

我在asp.net網絡表單中使用jqgrid。 我有一列名為“操作”的列，其中有“添加”按鈕。我希望當我單擊“添加”按鈕時，應更改單元格值。 就像我在該單元格中有按鈕一樣，當我單擊添加按鈕時，它應該隨文本而變化。 請指導我。 下面給出了我正在使用的代碼。

<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>

jQuery("#jQGridDemo").jqGrid({
        url: 'HttpHandlers/CustomersList.ashx',
        datatype: "json",
        colNames: ['Opted-In', 'Name', 'Email', 'Filter Matches', 'Customer Id','Actions'],
        colModel: [
                    { name: 'OptedIn', index: 'OptedIn', width: 40,align:'center', stype: 'text', formatter: OptedInValue },
                    { name: 'CustomerName', index: 'CustomerName', width: 90, stype: 'text', sortable: true },
                    { name: 'CustomerEmail', index: 'CustomerEmail', width: 110, stype: 'text', sortable: true },
                    { name: 'FilterLetter', index: 'FilterLetter', width: 60 },
                    { name: 'CustomerId', index: 'CustomerId', width: 60, hidden: true },
                    { name: 'Actions', index: 'Actions',editable:true, width: 60,align:'center',formatter: ButtonValue }
                    ],
        width: 600,
        height:300,
        rowNum: 30,
        mtype: 'GET',
       loadonce: true,
        rowList: [30, 60, 90],
        pager: '#jQGridDemoPager',
        sortname: 'OptedIn',
        viewrecords: true,
        sortorder: 'asc',
        caption: "Customer List"

    });
function ButtonValue(cellvalue, options, rowObject) {
    var filterLetter = rowObject.FilterLetter;
    var link = '';
    if (filterLetter == " A") {
        link = '<button type="button" onclick=addGridCustomer(' + rowObject.CustomerId +')>Add</button>';
    } else {
        link = '<div id="rowelder"><button type="button" onclick=removeGridCustomer(' + rowObject.CustomerId + ',' + options.rowId +')>Remove</button></div>';
    }

    return link;
}
function OptedInValue(cellvalue, options, rowObject) {
    var optedIn = rowObject.OptedIn;
    var link = '';
    if (optedIn == true) {
    link = '<img  title="View ' + rowObject.CustomerName + ' ' + '"  src="/images/icn_alert_success.png" />';
}
else if (optedIn == false) {
    link = '<img  title="View ' + rowObject.CustomerName + ' ' + '"  src="/images/icn_alert_error.png" />';
    }
    return link;
};

function removeGridCustomer(id,rowId) {
    debugger
    var rowData = $('#jQGridDemo').jqGrid('getRowData', rowId);
    rowData.Actions = '12321';
    $('#jQGridDemo').jqGrid('setRowData', rowId, rowData);
    $('#<% = hdCustomer.ClientID %>').val($('#<% = hdCustomer.ClientID %>').val() + id + ',');

    UpdateFiltersForCusRemove(id);
}

Answer 1

我正在研究此問題，發現下面的解決方案是我的解決方案。

function ButtonValue(cellvalue, options, rowObject) {
                var filterLetter = rowObject.FilterLetter;
                var Id = qs("id");
                var link = '';
                if (Id != 0) {
                    link = '<div id="addbutton"><button type="button" onclick=addGridCustomer(' + rowObject.CustomerId + ',' + options.rowId + ')>Add</button></div>';
                }
                else {
                    link = '<div id="removecustomer"><button type="button" onclick=removeGridCustomer(' + rowObject.CustomerId + ',' + options.rowId + ')>Remove</button></div>';
                }

                return link;
            }
            function OptedInValue(cellvalue, options, rowObject) {
                var optedIn = rowObject.OptedIn;
                var link = '';
                if (optedIn == true) {
                    link = '<img  title="View ' + rowObject.CustomerName + ' ' + '"  src="/images/icn_alert_success.png" />';
                }
                else if (optedIn == false) {
                    link = '<img  title="View ' + rowObject.CustomerName + ' ' + '"  src="/images/icn_alert_error.png" />';
                }
                return link;
            };

            function removeGridCustomer(id, rowId) {
                debugger

                $("#jQGridDemo tr").eq(rowId).children().eq(5).find('div button').hide();
                $("#jQGridDemo tr").eq(rowId).children().eq(5).find('div').append('to be removed ..');
                $('#<% = hdCustomer.ClientID %>').val($('#<% = hdCustomer.ClientID %>').val() + id + ',');

                //Update Filters in case of removal
                UpdateFiltersForCusRemove(id);


            }
            function addGridCustomer(id, rowId) {

                $('#<% = hdCustomer.ClientID %>').val($('#<% = hdCustomer.ClientID %>').val() + id + ',');

                $("#jQGridDemo tr").eq(rowId).children().eq(5).find('div button').hide();
                $("#jQGridDemo tr").eq(rowId).children().eq(5).find('div').append('to be added ..');

                //Update Filters in case of removal
                UpdateFiltersForCusAdd(id);


            }
            function UpdateFiltersForCusAdd(a) {
                var filterLtr = $("#lblF" + a).text().trim();
                var count = 0;
                count = parseInt($("#filterL" + filterLtr).text().trim()) - 1
                $("#filterL" + filterLtr).text(count);

                TotalCustomers(+1);
            }