Google表格可视化 - 删除过滤器上选中的复选框

Question

我有一个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;
            });
        }
    });
});

Answer 1

过滤列时，将创建一个新视图（基于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);
});

http://jsfiddle.net/doktormolle/amwfpvsu/3/