jqwidgets,jqxGrid禁止某个单元格不能编辑

If you want to disable the editing of some rows or cells in jqxGrid, you can create a function with two parameters – row’s index and datafield. It this post, we will use only the row’s index.

Here’s the function’s definition:

var beginedit = function(row, datafield) {
    if ((row == 1) || (row == 3) || (row == 5)) {
        return false;
    };
};

Each Grid column has a callback function which is invoked when a cell enters into edit mode. The function’s name is: cellbeginedit. To disable the editing, we will set the cellbeginedit of all grid columns to point to the beginedit function. The resulting behavior will be disabled editing of the second, fourth and sixth rows.

In case you want to disable the editing of a specific cell, you will have to use the column’s datafield, too.

For Example:

var beginedit = function(row, datafield) {
    if (row == 1 && datafield == 'firstname') {
        return false;
    };
};

The above code will disable the editing of the second cell in a column with datafield equal to ‘firstname’.

Online Demo: http://jsfiddle.net/jqwidgets/NFVL5/1/

// prepare the data
var data = generatedata(10);
var source = {
    localdata: data,
    datatype: "array",
    updaterow: function(rowid, rowdata) {
        // synchronize with the server - send update command
    }
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
// cancels the editing of desired rows
var beginedit = function(row, datafield, columntype) {
    if ((row == 1) || (row == 3) || (row == 5)) {
        return false;
    };
};

// renders the cells of the non editable rows
var cellsrenderer = function(row, columnfield, value, defaulthtml, columnproperties) {
    if ((row == 1) || (row == 3) || (row == 5)) {
        var formattedValue = value;
        if (columnproperties.cellsformat == "yyyy-MM-dd" || columnproperties.columntype == 'datetimeinput') {
            formattedValue = $.jqx.dataFormat.formatdate(formattedValue, columnproperties.cellsformat);
        }
        else if (columnproperties.cellsformat != "") {
            formattedValue = $.jqx.dataFormat.formatnumber(formattedValue, columnproperties.cellsformat);
        }
        return '<div style="height: 100%; background-color: #BBBBBB;"><span style="float: ' + columnproperties.cellsalign + '; position: relative; margin: 4px;">' + formattedValue + '</span></div>';
    };
};

$("#jqxgrid").jqxGrid({
    autoheight: true,
    source: dataAdapter,
    editable: true,
    selectionmode: 'singlecell',
    columns: [
        {
        text: 'First Name',
        datafield: 'firstname',
        width: 90,
        cellbeginedit: beginedit,
        cellsrenderer: cellsrenderer},
    {
        text: 'Last Name',
        datafield: 'lastname',
        width: 90,
        cellbeginedit: beginedit,
        cellsrenderer: cellsrenderer},
    {
        text: 'Product',
        datafield: 'productname',
        width: 177,
        cellbeginedit: beginedit,
        cellsrenderer: cellsrenderer},
    {
        text: 'Ship Date',
        datafield: 'date',
        width: 90,
        cellsalign: 'right',
        cellsformat: 'yyyy-MM-dd',
        cellbeginedit: beginedit,
        cellsrenderer: cellsrenderer,
        },
    {
        text: 'Quantity',
        datafield: 'quantity',
        cellsalign: 'right',
        cellbeginedit: beginedit,
        cellsrenderer: cellsrenderer,
        },
    {
        text: 'Price',
        datafield: 'price',
        width: 65,
        cellsalign: 'right',
        cellsformat: 'c2',
        cellbeginedit: beginedit,
        cellsrenderer: cellsrenderer}]
});​