我有一个Google可视化表，其中包含许多过滤器。第一列包含一个复选框，然后在提交表单时，通过PHP使用选中的值在数据库中更新选中的行。这很好。
我遇到的问题是当用户勾选某些复选框然后在表格上应用过滤器时 - 先前选中的复选框将取消勾选。防止这种行为的最佳方法是什么？
JSfiddle：http://jsfiddle.net/JazParkyn/amwfpvsu/
<div id="dashboard">
<p>Click column names to sort data and/or choose data filter options:</p>
<div id="picker_location" class="tablefilter"></div>
<div id="picker_postcode" class="tablefilter"></div>
<div id="picker_sector" class="tablefilter"></div>
<br />
<br />
<label class="checkbox">
<input type="checkbox" id="selectall" />Select/Deselect All</label>
<br />
<br />
<div id="table_contacts"></div>
</div>
google.load('visualization', '1.1', {
packages: ['corechart', 'table', 'controls']
});
function drawVisualization() {
var data_company_table = new google.visualization.DataTable();
data_company_table.addColumn('string', 'Subscribed?');
data_company_table.addColumn('string', 'Contact');
data_company_table.addColumn('string', 'Position');
data_company_table.addColumn('string', 'Company');
data_company_table.addColumn('string', 'Location');
data_company_table.addColumn('string', 'Postcode');
data_company_table.addColumn('string', 'Sector');
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[162]' value='1' />", "Mr Glen Eastwood", "Operations Director", "Birtwistles Butchers", "Manchester", "M44 5FS", "Butchers"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[7]' value='1' />", "Mr Tony Arrowsmith", "Trading Manager", "A F Blakemore Fresh Food Ltd", "Wolverhampton", "WV10 7QZ", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[8]' value='1' />", "Mr Joe Booker", "Operations Manager", "A F Blakemore Fresh Food Ltd", "Wolverhampton", "WV10 7QZ", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[9]' value='1' />", "Ms Brigid Davidson", "Trading Director", "A F Blakemore Fresh Food Ltd", "Wolverhampton", "WV10 7QZ", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[155]' value='1' />", "Mr Steve Irons", "Contracts Manager", "Bestway Batleys Foodservice", "London", "NW10 7BW", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[167]' value='1' />", "Mr Guy Farrant", "Managing Director", "Booker Ltd", "Northants", "NN8 1LT", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[168]' value='1' />", "Mr Jeff Parker", "QA Manager Fresh Produce", "Booker Ltd", "Northants", "NN8 1LT", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[421]' value='1' />", "Mr Daniel Ox", "", "Fruit for the office", "Romford", "RM3 0HU", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[438]' value='1' />", "Sir / Madam ", "Technical Manager", "Gilbert Thompson Ltd", "", "LS9 0PX", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[488]' value='1' />", "Mr Mike Igoe", "Commercial Director", "Heron Foods", "East Yorks", "HU14 3HJ", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[538]' value='1' />", "Ms Ying Cao", "Buyer for Fresh and Frozen Meat", "JJ Food Service", "Enfield", "EN3 7XY", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[539]' value='1' />", "Mr Gurku Cigdem", "Category Buyer", "JJ Food Service", "Enfield", "EN3 7XY", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[811]' value='1' />", "Mr Martin Moston", "Quality Manager", "Staples Vegetables Ltd", "Boston", "PE22 9JL", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[877]' value='1' />", "Mr Christian Paynton", "Director", "United Fresh Consortium", "Banbury", "OX16 6FW", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[905]' value='1' />", "Mr Andrew Yarnall", "Operations Manager", "Wing Yip plc", "Birmingham", "B7 5NT", "Cash & Carry / Wholesale"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[27]' value='1' />", "Mr Gary Kennerley", "Operations Director", "Absolute Taste Ltd", "London", "SW18 1SR", "Catering (Big)"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[30]' value='1' />", "Mr Peter Tate", "Purchasing", "Accent Catering", "Middlesex", "TW18 4BB", "Catering (Big)"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[417]' value='1' />", "Mr Nigel Jenny", "Chairman", "Fresh Produce Consortium", "Peterborough", "PE2 6FT", "Trade Assoc"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[271]' value='1' />", "Mr Alex Brown", "", "Crowd Purchasing", "Harrogate", "HG2 8PB", "Unknown"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[349]' value='1' />", "Mr Alexandre Pierron-Darbonne", "General Manager", "El Grupo Planasa", "Navarra", "", "Unknown"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[924]' value='1' />", "Miss Jaz Parkyn", "", "FSL Data", "Wadebridge", "PL27 6HB", "Unknown"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[721]' value='1' />", "Sir / Madam ", "", "POM Wonderful", "Los Angeles", "90064", "Unknown"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[803]' value='1' />", "Mr Justin Chadwick", "CEO", "South African Citrus Growers Association", "", "", "Unknown"]);
data_company_table.addRow(["<input type='checkbox' class='selectall' name='subs[833]' value='1' />", "Mr Dan Batrack", "Chairman, Chief Executive Officer, and President", "Tetra Tech", "Swindon", "SN2 8BL", "Unknown"]);
var picker_location = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'picker_location',
'options': {
'filterColumnLabel': 'Location',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var picker_postcode = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'picker_postcode',
'options': {
'filterColumnLabel': 'Postcode',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var picker_sector = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'picker_sector',
'options': {
'filterColumnLabel': 'Sector',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_contacts',
options: {
'allowHtml': true
}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind([picker_location, picker_postcode, picker_sector], [table]).
draw(data_company_table);
}
google.setOnLoadCallback(drawVisualization);
$(document).ready(function () {
var checkboxes = $(".selectall");
$('#selectall').click(function (event) {
if (this.checked) {
$('.selectall').each(function () {
this.checked = true;
});
} else {
$('.selectall').each(function () {
this.checked = false;
});
}
});
});
答案 0 :(得分：2)
过滤列时，将创建一个新视图（基于dataTable），因此在选中或取消选中一个框时，必须更新dataTable中的相关单元格。
它有点费力，因为你不能直接使用DOM（它必须存储为字符串，不能使用闭包）。
在填充dataTable后直接执行此操作：
//add onchange-attributes
var tmp;
for(var r=0;r<data_company_table.getNumberOfRows();++r){
(function(row){
tmp=$(data_company_table.getValue(row,0));
//the change-listener will be executed in global scope
//where the dataTable is unknown
//trigger an custom event for #table_contacts instead
//to make it work
tmp.attr('onchange',"$('#table_contacts').trigger('selection_changed',{row:"+row+",input:this})")
data_company_table.setCell(row,0,tmp[0].outerHTML);
}(r))
}
//here the dataTable will be accessible, update the first column
$('#table_contacts').on('selection_changed',function(e,data){
if(data.input.checked){
data.input.setAttribute('checked','checked');
}
else{
data.input.removeAttribute('checked');
}
data_company_table.setCell(data.row,0,data.input.outerHTML);
});