简体   繁体   中英

Google table chart not loading toggle

I have used bootstrap toggle for on off button.

If I used this out of the google table chart it is working fine. But it was showing the simple checkbox inside the google table.

 <html> <head> <meta charset="UTF-8"> <title>Alerts</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type='text/javascript' src='https://www.google.com/jsapi'></script> </head> <script type='text/javascript'> google.load('visualization', '1', {packages:['table'], "callback": drawTable}); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Report'); data.addColumn('string', ''); data.setColumnProperty(1, {allowHtml: true}); data.addRows([ ["aaaa",'<input id ="toggle" class="toggle" data-toggle="toggle" type = "checkbox" data-width="100" />'], ["dddd",'<input id="toogle" data-toggle="toggle" type="checkbox" data-width="100"/>'], ]); options = {showRowNumber: true,'height':250,} var table = new google.visualization.Table(document.getElementById('chart_div1')); table.draw(data, {showRowNumber: true, allowHtml: true, page:'enable', pageSize:8}); $('.toggle').bootstrapToggle('toggle'); }; </script> <body> <div class = "chart_div1" id = "chart_div1"></div> <input id="toogle" data-toggle="toggle" type="checkbox" data-width="100"/> </body> </html> 

Please give me a solution for this,

Thanks in Advance.

删除第16行

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM