Чтобы снять все флажки столбца в jqxGrid
У меня есть небольшая таблица, построенная с использованием jqxGrid. 1-й столбец содержит флажки, как показано ниже:
Ожидаемый результат:
- При нажатии кнопки «Снять все» необходимо, чтобы все эти флажки были сняты следующим образом:
- При нажатии кнопки удаления необходимо получить данные выбранных строк флажком.
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
});
Перерыл много и документацию тоже, но бесполезно. Не удалось добавить ссылку на скрипку, поэтому вставил URL-адрес скрипки в виде кода:
https://jsfiddle.net/75zrfko0/25/
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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)});
});
Я не полностью изучил API для JQXWiget, но может быть способ обновить локальный набор данных, пожалуйста, перейдите по ссылке ниже,
@Shankar, вы можете использовать метод фильтра, чтобы выбрать выбранный флажок при удалении события из вашего локального набора данных. Просто передайте фильтр obj.isSelected === "true" в методе array.filter.
Это отлично работает при загрузке сетки, но после загрузки сетки, если я выбираю другие флажки, которые не будут обновляться (например, для путешествияGridSource), верно?
вы должны добавить свойство проверки, как указано в примере ссылки выше в моем ответе.
Пожалуйста, помогите мне: как я могу вызвать функцию/метод при щелчке флажка.
@Shankar вот пример в js fiddle для выбора ячейки, вы можете обработать событие щелчка флажка здесь jsfiddle.net/jqwidgets/HB3Cb если вам нужна дополнительная помощь, пожалуйста, откройте обсуждение. Я отвечу на него, когда освобожусь.
Давайте продолжим обсуждение в чате.
Я знаю, как вызвать функцию при щелчке по ячейке, но я хочу вызвать функцию при щелчке флажка, который присутствует внутри ячейки.
Можете ли вы дать решение для 2-го вопроса?