基于另一列值的 jqxgrid 可编辑属性
jqxgrid editable properties based on a value on another column
参考下面给出的link中可用的代码
http://jsfiddle.net/tzHXR/
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'productname',
type: 'string'
}, {
name: 'date',
type: 'date'
}, {
name: 'quantity',
type: 'number'
}, {
name: 'price',
type: 'number'
}],
datatype: "array"
};
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 500,
theme: 'energyblue',
editable: true,
source: adapter,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}, {
text: 'Product',
datafield: 'productname',
width: 170
}, {
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
如何根据Order Date的值设置column quantity和price的column 属性??
Example:
cellbeginedit: function (row) {
var Orderdate = $("#jqxgrid1").jqxGrid('getcellvalue', row, 'date');
if (Orderdate < '1-June-2018'){
$('#jqxgrid').jqxGrid('setcolumnproperty', 'quantity', 'editable', false);
$('#jqxgrid').jqxGrid('setcolumnproperty', 'price', 'editable', false);
}
}
在这种特殊情况下,默认情况下所有列都具有 editable:true 作为默认属性。但是,正如您在给定示例中看到的那样,是否可以根据另一列的值来设置列的可编辑属性。
所以经过几次尝试,我终于想出了如何利用 'cellselect'
来做到这一点
$("#jqxgrid").on('cellselect', function (event) {
$('#jqxgrid1').jqxGrid('setcolumnproperty','quantity', 'editable', true);
$('#jqxgrid1').jqxGrid('setcolumnproperty','price', 'editable',true);
var datafield = event.args.datafield;
var rowindex = event.args.rowindex;
var date = $("#jqxgrid").jqxGrid('getcellvalue',rowindex,'date');
if (date < '1-June-2018' ){
$('#jqxgrid1').jqxGrid('setcolumnproperty','quantity', 'editable', false);
$('#jqxgrid1').jqxGrid('setcolumnproperty','price', 'editable', false);
}
我的一个有趣观察是,对于每个 'cellselect' 事件,将列 属性 重置为默认值很重要。如果没有重置,第一个 'cellselect' 事件的影响将传播到后续 'cellselect' 事件,从而产生不良结果。
通过这样做,可以动态决定可以为不同的行编辑哪一列
参考下面给出的link中可用的代码 http://jsfiddle.net/tzHXR/
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'productname',
type: 'string'
}, {
name: 'date',
type: 'date'
}, {
name: 'quantity',
type: 'number'
}, {
name: 'price',
type: 'number'
}],
datatype: "array"
};
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 500,
theme: 'energyblue',
editable: true,
source: adapter,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}, {
text: 'Product',
datafield: 'productname',
width: 170
}, {
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
如何根据Order Date的值设置column quantity和price的column 属性??
Example:
cellbeginedit: function (row) {
var Orderdate = $("#jqxgrid1").jqxGrid('getcellvalue', row, 'date');
if (Orderdate < '1-June-2018'){
$('#jqxgrid').jqxGrid('setcolumnproperty', 'quantity', 'editable', false);
$('#jqxgrid').jqxGrid('setcolumnproperty', 'price', 'editable', false);
}
}
在这种特殊情况下,默认情况下所有列都具有 editable:true 作为默认属性。但是,正如您在给定示例中看到的那样,是否可以根据另一列的值来设置列的可编辑属性。
所以经过几次尝试,我终于想出了如何利用 'cellselect'
来做到这一点$("#jqxgrid").on('cellselect', function (event) {
$('#jqxgrid1').jqxGrid('setcolumnproperty','quantity', 'editable', true);
$('#jqxgrid1').jqxGrid('setcolumnproperty','price', 'editable',true);
var datafield = event.args.datafield;
var rowindex = event.args.rowindex;
var date = $("#jqxgrid").jqxGrid('getcellvalue',rowindex,'date');
if (date < '1-June-2018' ){
$('#jqxgrid1').jqxGrid('setcolumnproperty','quantity', 'editable', false);
$('#jqxgrid1').jqxGrid('setcolumnproperty','price', 'editable', false);
}
我的一个有趣观察是,对于每个 'cellselect' 事件,将列 属性 重置为默认值很重要。如果没有重置,第一个 'cellselect' 事件的影响将传播到后续 'cellselect' 事件,从而产生不良结果。
通过这样做,可以动态决定可以为不同的行编辑哪一列