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

Posted 2023-05-08

【中文标题】取消选中 jqxGrid 中列的所有复选框

【英文标题】：To uncheck all checkboxes of an column in jqxGrid

【发布时间】：2021-04-02 16:20:24

【问题描述】：

我有一个使用 jqxGrid 构建的小表格。第一列包含如下复选框：

预期结果：

点击Uncheck All，需要像这样取消选中所有这些复选框：

点击remove需要获取复选框选中行的数据。

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 链接，因此将 fiddle URL 粘贴为代码：

 https://jsfiddle.net/75zrfko0/25/

【参考方案1】：

首先，由于数据集的本地范围，您必须在 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，但是可以通过以下链接更新本地数据集，

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/checkboxcolumn.htm

【讨论】：

第二个问题你能给出答案吗？

@Shankar 您可以使用过滤器方法从本地数据集中获取删除事件时选中的复选框。只需在 array.filter 方法中传递 obj.isSelected === "true" 的过滤器。

这在网格加载时可以正常工作，但在网格加载之后，如果我选择其他不会更新的复选框（即 travelGridSource），对吗？

您必须添加检查属性，如我的回答中上面的示例链接中所述。

请指导我：如何在单击复选框时调用函数/方法。