取消选中 jqxGrid 中列的所有复选框
To uncheck all checkboxes of an column in jqxGrid
我使用 jqxGrid 构建了小型 table。第一列包含如下复选框:
预期结果:
- 点击 全部取消选中 ,需要像这样取消选中所有这些复选框:
- 点击删除需要获取复选框选中行的数据。
HTML:
<div id='travelGrid'></div>
<br>
<button id="unselect">Unselect All</button>
删除
JS:
$( document ).ready(function() {
var travelGridSource = {
localdata: [],
datafields: [
{ name: 'isSelected', type: 'bool' },
{ name: 'Zipcode', type: 'number' },
{ name: 'TravelFee', type: 'number' }
],
datatype: "array"
}
var travelFees = [
{ "isSelected": "true", "Zipcode": "001", "TravelFee": "25"},
{ "isSelected": "true", "Zipcode": "002", "TravelFee": "75"},
{ "isSelected": "false", "Zipcode": "003", "TravelFee": "75"},
{ "isSelected": "true", "Zipcode": "004", "TravelFee": "75" },
{ "isSelected": "false", "Zipcode": "004", "TravelFee": "75" }
];
travelGridSource.localdata = travelFees;
$("#travelGrid").jqxGrid({
width: '100%',
height: '20%',
rowsheight: 29,
columnsheight: 29,
source: new $.jqx.dataAdapter(travelGridSource),
sortable: true,
columnsresize: true,
columnsmenu: false,
showsortcolumnbackground: false,
enablehover: false,
selectionmode: 'none',
scrollmode: 'logical',
theme: 'light',
rowdetails: true,
editable: true,
showrowdetailscolumn: false,
columns: [
{ text: '', datafield: 'isSelected', width: '7%', align: 'center', columntype: 'checkbox', cellsalign: 'center', 'editable': true },
{ text: 'Zip', datafield: 'Zipcode', width: '15%', align: 'center', cellsalign: 'center', 'editable': false },
{ text: 'Travel Fee', datafield: 'TravelFee', width: '20%', align: 'center', cellsalign: 'center', cellsformat: 'c2'}
]
});
});
$('#unselect').click(function(){
// Do something here
});
$('#remove').click(function(){
// Do something here
});
浏览了很多和文档,但没有用。无法附加 fiddle link,所以粘贴 fiddle URL作为代码:
https://jsfiddle.net/75zrfko0/25/
首先,由于数据集的本地范围,您必须在 jQuery 文档的范围内处理取消选择的点击事件。
$(document).ready(function(){
//unselect onclick event listener
})
然后单击该按钮,您必须更新要从中添加复选框标志的本地数据集,最后必须更新您获取的 jqxGrid 中的源。
$('#unselect').click(function(){
// Do something here
travelFees = travelFees.map((obj) => {
obj.isSelected = "false";
return {...obj};
})
travelGridSource.localdata = travelFees;
$("#travelGrid").jqxGrid({source: new $.jqx.dataAdapter(travelGridSource)});
});
我还没有完全完成 JQXWiget 的 API 但是可以有一种更新本地数据集的方法请按照下面的 link,
我使用 jqxGrid 构建了小型 table。第一列包含如下复选框:
预期结果:
- 点击 全部取消选中 ,需要像这样取消选中所有这些复选框:
- 点击删除需要获取复选框选中行的数据。
HTML:
<div id='travelGrid'></div>
<br>
<button id="unselect">Unselect All</button>
删除
JS:
$( document ).ready(function() {
var travelGridSource = {
localdata: [],
datafields: [
{ name: 'isSelected', type: 'bool' },
{ name: 'Zipcode', type: 'number' },
{ name: 'TravelFee', type: 'number' }
],
datatype: "array"
}
var travelFees = [
{ "isSelected": "true", "Zipcode": "001", "TravelFee": "25"},
{ "isSelected": "true", "Zipcode": "002", "TravelFee": "75"},
{ "isSelected": "false", "Zipcode": "003", "TravelFee": "75"},
{ "isSelected": "true", "Zipcode": "004", "TravelFee": "75" },
{ "isSelected": "false", "Zipcode": "004", "TravelFee": "75" }
];
travelGridSource.localdata = travelFees;
$("#travelGrid").jqxGrid({
width: '100%',
height: '20%',
rowsheight: 29,
columnsheight: 29,
source: new $.jqx.dataAdapter(travelGridSource),
sortable: true,
columnsresize: true,
columnsmenu: false,
showsortcolumnbackground: false,
enablehover: false,
selectionmode: 'none',
scrollmode: 'logical',
theme: 'light',
rowdetails: true,
editable: true,
showrowdetailscolumn: false,
columns: [
{ text: '', datafield: 'isSelected', width: '7%', align: 'center', columntype: 'checkbox', cellsalign: 'center', 'editable': true },
{ text: 'Zip', datafield: 'Zipcode', width: '15%', align: 'center', cellsalign: 'center', 'editable': false },
{ text: 'Travel Fee', datafield: 'TravelFee', width: '20%', align: 'center', cellsalign: 'center', cellsformat: 'c2'}
]
});
});
$('#unselect').click(function(){
// Do something here
});
$('#remove').click(function(){
// Do something here
});
浏览了很多和文档,但没有用。无法附加 fiddle link,所以粘贴 fiddle URL作为代码:
https://jsfiddle.net/75zrfko0/25/
首先,由于数据集的本地范围,您必须在 jQuery 文档的范围内处理取消选择的点击事件。
$(document).ready(function(){
//unselect onclick event listener
})
然后单击该按钮,您必须更新要从中添加复选框标志的本地数据集,最后必须更新您获取的 jqxGrid 中的源。
$('#unselect').click(function(){
// Do something here
travelFees = travelFees.map((obj) => {
obj.isSelected = "false";
return {...obj};
})
travelGridSource.localdata = travelFees;
$("#travelGrid").jqxGrid({source: new $.jqx.dataAdapter(travelGridSource)});
});
我还没有完全完成 JQXWiget 的 API 但是可以有一种更新本地数据集的方法请按照下面的 link,