Javascript 取消选中jqxGrid中某列的所有复选框

我使用jqxGrid构建了一张小桌子。第1列包含如下复选框：

预期结果：

<div id='travelGrid'></div>
<br>
<button id="unselect">Unselect All</button>

$( 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
 });

单击取消选中所有，需要按如下方式取消选中所有这些复选框：

单击“删除”需要获取选中行的数据

HTML:

<div id='travelGrid'></div>
<br>
<button id="unselect">Unselect All</button>

$( 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链接，因此将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，但是可以有一种方法来更新本地数据集，请遵循下面的链接

---

您能为第二个问题提供解决方案吗？@Shankar您可以使用filter方法从本地数据集中获取删除事件时选中的复选框。只需在array.filter方法中通过obj.isSelected==“true”的过滤器即可。这在网格加载时可以正常工作，但在网格加载后，如果我选择了其他不会更新的复选框（即到travelGridSource）对吗？您必须添加check属性，如我的回答中上面的示例链接所述。请指导我：如何在单击checkbox时调用函数/方法。