JQGrid动态行可编辑

Question

I have created a JqGrid with my custom data and using formatters.

where if i click on some text(ex: "D") i have to change the text some other text (ex: "R"). as well as the background colors.

scenario is like this :

• user clicks the A, cell changes to a C
• user clicks the D, cell changes to an R
• user clicks the R, cell changes to a D
• user clicks the C, cell changes to an A

JS CODE :

    function SalesOptimizationGridData() {
    var mydata =[ { size: "S1", op: "170", OPStatus: "X", s1: "-170", S1Status: "C", s2: "170", S2Status: "D", s3: "170", S3Status: "A", s4: "170", S4Status: "C", s5: "170", S5Status: "C" },
{ size: "S2", op: "-170", OPStatus: "D", s1: "-170", S1Status: "C", s2: "-170", S2Status: "X", s3: "-170", S3Status: "D", s4: "-170", S4Status: "C", s5: "-170", S5Status: "D" },
{ size: "S3", op: "370", OPStatus: "X", s1: "370", S1Status: "C", s2: "-370", S2Status: "A", s3: "-370", S3Status: "C", s4: "370", S4Status: "C", s5: "-370", S5Status: "A" },
{ size: "S4", op: "-270", OPStatus: "D", s1: "-170", S1Status: "D", s2: "-170", S2Status: "R", s3: "170", S3Status: "C", s4: "170", S4Status: "A", s5: "170", S5Status: "R" },
{ size: "S5", op: "-340", OPStatus: "X", s1: "170", S1Status: "R", s2: "270", S2Status: "A", s3: "-170", S3Status: "D", s4: "340", S4Status: "D", s5: "-170", S5Status: "A" },
{ size: "S6", op: "-140", OPStatus: "A", s1: "-270", S1Status: "R", s2: "170", S2Status: "A", s3: "170", S3Status: "C", s4: "170", S4Status: "R", s5: "170", S5Status: "C" },
{ size: "S7", op: "-140", OPStatus: "C", s1: "-170", S1Status: "D", s2: "170", S2Status: "D", s3: "-170", S3Status: "R", s4: "240", S4Status: "X", s5: "170", S5Status: "C" },
{ size: "S8", op: "0", OPStatus: "X", s1: "-0", S1Status: " ", s2: "0", S2Status: "D", s3: "0", s4: "0", S3Status: "C", S4Status: "A", s5: "0", S5Status: "X" },
{ size: "S9", op: "170", OPStatus: "R", s1: "170", S1Status: "X", s2: "170", S2Status: "D", s3: "170", S3Status: "A", S4Status: "C", s4: "170", s5: "-170", S5Status: "D" },


    ];
    return mydata;
} 
function AssortmentDetailsGrid() {
    $("#ao-salesoptimization-grid").jqGrid({
        data: SalesOptimizationGridData(),
        datatype: "local",
        autowidth: false,
        //shrinkToFit: true,
        rowNum: 15,
        rowList: [15, 30, 45],
        colNames: ['SIZE', 'OP', 'S1', 'S2',  'S3',  'S4', 'S5'],
        colModel: [
            {
              name: 'size', index: 'id', sortable: true, sorttype: 'int', resizable: true},
            { name: 'op', index: 'op', sortable: true, sorttype: 'int', resizable: true, formatter: opformatter },
            { name: 's1', index: 's1', sortable: true, sorttype: 'int', resizable: true, formatter: s1formatter },
            { name: 's2', index: 's2', sortable: true, sorttype: 'string', resizable: true, formatter: s2formatter },
            { name: 's3', index: 's3', sortable: true, sorttype: 'string', resizable: true, formatter: s3formatter },
            { name: 's4', index: 's4', sortable: true, sorttype: 'int', resizable: true, formatter: s4formatter },
            { name: 's5', index: 's5', formatter: s5formatter }
        ],
        sortname: 'id',
        sortorder: 'desc',
        loadOnce: true,
        gridview: true,
        loadComplete: function () {
            if ($("#ao-salesoptimization-grid-container").width() !== 0)
                $('#ao-assortmentdetails-grid').setGridWidth($("#ao-salesoptimization-grid-container").width());
            InitjQueryScroll();
            $("#gview_ao-salesoptimization-grid").find('.ui-jqgrid-bdiv').mCustomScrollbar({ theme: "rounded" });


            if ($(".ao-op-grid-formatter:first-child > p").text() === "D") {
                $(".ao-op-grid-formatter").addClass("statusD");
            }
        }


    });
    function opformatter(cellvalue, options, rowObject) {
        return '<div class="ao-op-grid-formatter"><p>' + rowObject.OPStatus + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
        //return cellvalue;
    }

    function s1formatter(cellvalue, options, rowObject) {
        return '<div class="ao-op-grid-formatter"><p>' + rowObject.S1Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
        //return cellvalue;
    }

    function s2formatter(cellvalue, options, rowObject) {
        return '<div class="ao-op-grid-formatter"><p>' + rowObject.S2Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
        //return cellvalue;
    }
    function s3formatter(cellvalue, options, rowObject) {
        return '<div class="ao-op-grid-formatter"><p>' + rowObject.S3Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
        //return cellvalue;
    }
    function s4formatter(cellvalue, options, rowObject) {
        return '<div class="ao-op-grid-formatter"><p>' + rowObject.S4Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
        //return cellvalue;
    }
    function s5formatter(cellvalue, options, rowObject) {
        return '<div class="ao-op-grid-formatter"><p>' + rowObject.S5Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
        //return cellvalue;
    }


}

Working JSFIDDLE is here

Kindy help me if you have any idea!! thanks in advance!

Answer 1

First of all, I'd recommend you to simplify colModel and to use one formatter for all columns:

colModel: [
    { name: 'size', key: true }, // ??? sorttype: 'int' - see non int values "S8", "S1", ...
    { name: 'op', sorttype: 'int', formatter: statusFormatter },
    { name: 's1', sorttype: 'int', formatter: statusFormatter },
    { name: 's2', formatter: statusFormatter },
    { name: 's3', formatter: statusFormatter },
    { name: 's4', sorttype: 'int', formatter: statusFormatter },
    { name: 's5', formatter: statusFormatter }
]

where statusFormatter could be defined like

function statusFormatter(cellvalue, options, rowObject) {
    var status = rowObject[options.colModel.name.toUpperCase() + "Status"] || " ";
    return '<div class="ao-op-grid-formatter' + (status === "D" ? ' statusD"' : '"') +
         '><p>' + status +
        '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
}

The statement $(".ao-op-grid-formatter").addClass("statusD"); can be removed from loadComplete .

To change the status of the data and the corresponding content in the grid you can use beforeSelectRow callback. The corresponding code could be about the following

beforeSelectRow: function (rowid, e) {
    var $self = $(this), cmName, status,
        item = $self.jqGrid("getLocalRow", rowid),
        $td = $(e.target).closest("tr.jqgrow>td"),
        iCol = $td.length > 0 ? $td[0].cellIndex : -1,
        p = $self.jqGrid("getGridParam");
    if ($(e.target).is(".ao-op-grid-formatter>p") && iCol>0 && p.colModel[iCol]!=null) {
        cmName = p.colModel[iCol].name;
        status = item[cmName.toUpperCase() + "Status"];
        switch (status) {
            case "A":
                status = "C";
                break;
            case "D":
                status = "R";
                break;
            case "R":
                status = "D";
                break;
            case "C":
                status = "A";
                break;
            default:
                //status = " ";
                break;
        }
        item[cmName.toUpperCase() + "Status"] = status;
        $(e.target).text(status);
        if (status === "D") {
            $(e.target).parent().addClass("statusD");
        } else {
            $(e.target).parent().removeClass("statusD");
        }
    }
},

See http://jsfiddle.net/OlegKi/bngscfmv/4/