[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpgrid
/
zpgrid
/
demo
/
[
Home
]
File: select_rows_with_checkboxes_json.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <meta name="description" content=" In this example input data set is in JSON format. Select multiple rows using checkboxes. Click on Submit button to send an array with multiple selected rows to the server. "> <meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools"> <title>Zapatec DHTML Grid Widget - Example Of Multiple Row Selection With Checkboxes</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <script type="text/javascript" src="../src/zpgrid.js"></script> <script type="text/javascript" src="demo.js"></script> <!-- ALL demos need these css --> <link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css"> <link href="../../website/css/template.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { width: 778px; } </style> <link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico"> <link href="../themes/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Example Of Multiple Row Selection With Checkboxes</div> <div class='mainCol'> This phone bill example shows more advanced features of the Zapatec AJAX grid, including the ability to select and transmit multiple rows. <div class='zpCalDemoText'> <ul> <li>In this example input data set is in JSON format.</li> <li>Select multiple rows using checkboxes.</li> <li>Click on <i>Submit</i> button to send an array with multiple selected rows to the server.</li> </ul> </div> <form> <input type="checkbox" onclick="selectAll(this.checked)" id="selectAllCheckbox"/> Select all rows <input type="checkbox" onclick="selectPage(this.checked)" id="selectPageCheckbox"/> Select all rows on current page <div id="gridContainer"></div> </form> <form> <input type="button" value="Submit" onclick="submitChecked()" /> </form> </div> <!-- Include scripts related to this demo --> <script type="text/javascript" src="select_rows_with_checkboxes.js"></script> <script type="text/javascript"> /* * Initialize grid */ var oGrid = new Zapatec.Grid({ // Use json_checkboxes.txt file as grid data source source: 'json_checkboxes.txt', sourceType: 'json/url', // Use "lightblue" theme theme: 'lightblue', // Put the grid into element with id "gridContainer" container: 'gridContainer', // Do not mark selected rows with different color selectRows: false, // Do not mark selected cells with different color selectCells: false, // Call this function when row is clicked callbackRowOnClick: rowOnClick, // Call this function when grid is refreshed callbackOnRefresh: gridOnRefresh, // Display 10 rows per page rowsPerPage: 10 }); </script> <noscript> <br/> This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'> AJAX Component</a> - Zapatec DHTML Grid Widget, but your browser does not support Javascript. <br/> <br/> </noscript> <br/><br/><br/> <div class="footer" style='width: 778px; text-align:center; margin-top:2em'> © 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong> </div> </body> </html>