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

最新推荐文章于 2022-02-13 10:56:16 发布

原创最新推荐文章于 2022-02-13 10:56:16 发布 · 515 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

145 篇文章

订阅专栏

本文介绍如何在jqxGrid中禁用特定行或单元格的编辑功能。通过定义一个函数来判断是否允许进入编辑模式，并设置grid列的cellbeginedit属性指向此函数。此外，还提供了一个在线演示链接。

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: [url]http://jsfiddle.net/jqwidgets/NFVL5/1/[/url]

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