2017-01-09 43 views
0

我希望2列的复选框在以下条件成立。如何链接jqxGrid的2个不同单元格中的复选框

如果“A”上则“B”切换可以是开/关 如果“A”是关闭然后再“B”也必须是关断

这里的设定数据的一个例子的小提琴,但我不知道如何才能添加此功能。这基本上只是数据的前端验证,以防止用户意外创建“不可能的”场景。我甚至不知道从哪里开始,如上所述自定义复选框。

https://jsfiddle.net/6rc8uraf/11/

var data = [{ 
    name: "Person1", 
    A: true, 
    B: true 
}, { 
    name: "Person2", 
    A: true, 
    B: false 
}, { 
    name: "Person3", 
    A: false, 
    B: false 
}]; 

var source = { 
    localdata: data, 
    datafields: [{ 
    name: "name", 
    type: "string" 
    }, { 
    name: "A", 
    type: "bool" 
    }, { 
    name: "B", 
    type: "bool" 
    }], 
    datatype: "array" 
}; 

var adapter = new $.jqx.dataAdapter(source); 

$("#jqxgrid").jqxGrid({ 
    width: "100%", 
    source: adapter, 
    editable: true, 
    columnsresize: true, 
    sortable: true, 
    filterable: false, 
    columns: [{ 
    text: "Name", 
    datafield: "name", 
    align: 'center', 
    width: 150, 
    menu: false 
    }, { 
    text: "A", 
    datafield: "A", 
    align: 'center', 
    columntype: 'checkbox', 
    width: 150, 
    editable: true, 
    menu: false 
    }, { 
    text: "B", 
    datafield: "B", 
    align: 'center', 
    columntype: 'checkbox', 
    menu: false, 
    editable: true 
    }] 
}); 

回答

1

绑定cellendedit事件后Programmatic Editing

$('#jqxgrid').on('cellendedit', function (event) { 
    if (event.args.datafield == 'A' && event.args.value == false) { 
     $("#jqxgrid").jqxGrid('setcellvalue', event.args.rowindex, 'B', false) //set value to false 
     $("#jqxgrid").jqxGrid('setcolumnproperty', 'B', 'editable', false)//disable further editing 
    } else if (event.args.datafield == 'A' && event.args.value == true) { 
     // $("#jqxgrid").jqxGrid('setcellvalue', event.args.rowindex, 'B', true) 
     $("#jqxgrid").jqxGrid('setcolumnproperty', 'B', 'editable', true) //enable editing 
    } 
}); 
+0

感谢执行操作不知道事件的。非常感激。 – user2927848

相关问题