按钮单击更改JQGrid单元格值

时间:2013-12-23 11:03:26

标签: javascript jquery html asp.net jqgrid

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

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

1 个答案:

答案 0 :(得分:0)

我处理这个问题并发现下面的解决方案是我的解决方案的问题。

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