[ 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_hidden.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=" This demo shows how to hide one or several columns. Column Amount is hidden, but filtering and searching can still be done on this column. To filter Amount column, press Debits or Credits button. Account column uses Amount column for sorting. This means that if you click on Account, grid is sorted by invisible Amount column. The rest of columns are sorted normally. "> <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://www.crockford.com/JSON/'>JSON</a>, or XML, making it easy to generate using any server-side technology.<br/> Often the grid will display database-generated data. <div class='zpCalDemoText'> <ul> <li>This demo shows how to hide one or several columns.</li> <li>Column <b><i>Amount</i></b> is hidden, but filtering and searching can still be done on this column.</li> <li>To filter <b><i>Amount</i></b> column, press Debits or Credits button.</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 invisible <b><i>Amount</i></b> column</strong></span>. The rest of columns are sorted normally.</li> </ul> </div> <br/><br/> <a href="javascript:loadGrid('json_hidden.txt', 'json/url', 'lightblue')"> Fetch the JSON grid </a> <br/><br/> <a href="json_hidden.txt" target="_blank"> See the JSON file </a> <br/><br/> <a href="javascript:loadGrid('xml_hidden.xml', 'xml/url', 'blackandwhite')"> Fetch the XML grid </a> <br/><br/> <a href="xml_hidden.xml" target="_blank"> See the XML file </a> <br/><br/> <a href="javascript:loadGrid('html_hidden.html', 'html/url', 'winxp')"> Fetch the HTML grid </a> <br/><br/> <a href="html_hidden.html" target="_blank"> See the HTML file </a> <br/><br/> <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>