更改按钮单击时的 JQGrid 单元格值答案

【问题标题】：Change JQGrid Cell value on Button Click更改按钮单击时的 JQGrid 单元格值
【发布时间】：2013-12-23 11:03:26
【问题描述】：

我在 asp.net 网络表单中使用 jqgrid。我有一个名为 Actions 的列，其中我有按钮 Add 我希望当我单击添加按钮时，应该更改单元格值。就像我在这个单元格中有按钮一样，当我单击添加按钮时，它应该随文本而变化。请指导我。下面给出了我正在使用的代码。

<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);
}

【问题讨论】：

看看这个 SO stackoverflow.com/questions/12674663/…
我已经尝试过了，但它不起作用..
为什么不起作用？发生了什么与您的预期结果不同的事情？你收到错误了吗？
我想隐藏我的按钮并在按钮位置显示文本。
使用 Fiddle (jsfiddle.net) 发布您的问题以便更好地理解。

标签： javascript jquery html asp.net jqgrid

【解决方案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);
            }

【讨论】：