如何根据行的内容动态编辑jqxGrid中的单元格

时间:2015-11-16 16:59:38

标签: javascript jquery jqxgrid jqwidget

我正在尝试使jqxGrid中的单元格可编辑,具体取决于行中另一列的值(名称为Editable)。

{ text: "Percentage", datafield: "Percentage", columntype: 'numberinput', width: 100, cellsformat: 'p2',
  editable: function (index, datafield, value, defaultvalue, column, rowdata) {
               return rowdata.Editable;
            }
 },

这不起作用。无论rowdata.Editable的值如何,单元格始终都是可编辑的。

return rowData.Editable;替换return false;也不起作用。

我将 jqWidgets 3.9.0 JQuery 1.7.1 结合使用。

任何人都可以解释为什么这不起作用以及如何让它发挥作用?

2 个答案:

答案 0 :(得分:1)

我通过以下方式让这个工作:

用localdata替换数据源中的url,localdata引用名为“data”的本地数组。

使用原始源网址填充此数组。

        var data = [{}];
        var source =
        {
            datatype: "json",
            datafields: [
                 { name: 'Id', type: 'number' },
                 { name: 'Name', type: 'string' },
                 { name: 'Percentage', type: 'string' },
                 { name: 'Editable', type: 'bool' }
            ],
            localdata: data
        }

在jqxGrid中定义列时使用cellbeginedit属性而不是editable属性:

        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#myGrid").jqxGrid(
        {
            width: 800,
            source: dataAdapter,
            editable: true,
            editmode: 'click',
            selectionmode: 'singlecell',
            columns: [
                { text: "Id", datafield: "Id", columntype: 'textbox', editable: false, hidden: true },
                { text: "Name", datafield: "Name", columntype: 'textbox', width: 400, editable: false },
                { text: "Percentage", datafield: "Percentage", columntype: 'numberinput', width: 100, cellsformat: 'p2',
                    cellbeginedit: function (row) {
                        return data[row].Editable;
                    }
                },
            ]
        });

答案 1 :(得分:1)

我正在使用cellclick来做这种控制。

$("#jqxGrid").on('cellclick', function (event) {
    var args = event.args;
    var datafield = event.args.datafield;
    var rowIndex = args.rowindex;
    var data = $('#jqxGrid').jqxGrid('getrowdata', rowIndex);
    if(datafield == 'assign'){
        if(data.assign){
            $('#jqxGrid').jqxGrid('setcolumnproperty', 'datafield', 'editable', true);
        }else{
            $('#jqxGrid').jqxGrid('setcolumnproperty', 'datafield', 'editable', false);
        }
    }
});