[ 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: json_demo.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="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 - Load Grid from Url</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" /> <script type="text/javascript" src="../src/zpgrid-xml.js"></script> <script type="text/javascript" src="../../zpslider/src/slider.js"></script> <script type="text/javascript" src="json_demo.js"></script> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Load Grid from Url</div> <div class="leftCol"> <h3> Controls</h3> <form><br/> <fieldset> Date Filter<p/> <div id="filterDate"></div> </fieldset> <fieldset> Account Filter<p/> <div id="filterAccount"></div> </fieldset> <fieldset> <p>Find Value</p> <p><input type="checkbox" name="isRegExp"/> Use regular expression</p> <p>Search: <input type="text" name="textFilter" size="6"/> <input type="button" name="buttonText" value="Go" onclick="filter(this.form)"/></p> </fieldset> <fieldset> <input type="button" value="Debits" onclick="limitRangeDebits(this.form)"/> <br/> <input style="color:#f00" type="button" value="Credits" onclick="limitRangeCredits(this.form)"/> <br/> <input type="button" value="All" onclick="resetControls(this.form)"/> </fieldset> </form> </div> <div class='mainCol'> This demo uses the Zapatec AJAX Transport module to build the grid after the page is displayed. The grid data can be defined as an HTML table, <a href='http://json.org'>JSON</a>, or XML, making it easy to generate using any server-side technology.<br/> Often the grid will display database-generated data. <br/><br/> <a href="javascript:loadGrid('json_demo.txt', 'json/url', 'lightblue')"> Fetch the JSON grid </a> <br/><br/> <a href="json_demo.txt" target="_blank"> See the JSON file </a> <br/><br/> <a href="javascript:loadGrid('xml_demo.xml', 'xml/url', 'blackandwhite')"> Fetch the XML grid </a> <br/><br/> <a href="xml_demo.xml" target="_blank"> See the XML file </a> <br/><br/> <a href="javascript:loadGrid('html_demo.html', 'html/url', 'winxp')"> Fetch the HTML grid</a> <br/><br/> <a href="html_demo.html" target="_blank"> See the HTML file </a> <br/><br/> <ul> <li><b><i>Full name</i></b> is case-insensitive. Sorting does not consider upper or lower case.</li> <li><b><i>Amount</i></b> - Credits in <span style='color: #f00'>RED</span>, see JSON file.</li> <li><b><i>Account</i></b> column uses <b><i>Amount</i></b> column for sorting. This means that <span style="color:#f00"><strong>if you click on <b><i>Account</i></b>, grid is sorted by <b><i>Amount</i></b> column</strong></span>.</li> <li><b><i>Amount</i></b> is not sortable. To sort it, click <b><i>Account</i></b> instead.</li> </ul> <div id="gridContainer"></div> <hr/> </div> <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>