📄 grid.html
字号:
<html>
<title>Easy grid sample</title>
<style>
TABLE.grid_table { width: 400px; padding: 0px; }
TABLE.grid_table TH { border: 1px solid silver; background-color: #EEEEEE; padding: 0px 5px 0px 5px; }
TABLE.grid_table TABLE TD { border: 0px; font-weight: bold; }
TABLE.grid_table TABLE TD A { cursor: pointer; }
TABLE.grid_table TD { border-left: 1px solid silver; border-bottom: 1px solid silver; border-right: 1px solid silver; padding: 0px 5px 0px 5px; }
.grid_indication { background: silver; }
.grid_nav INPUT.cond { width: 30px; }
.grid_nav INPUT.filter { width: 130px; }
.grid_nav FORM { padding: 2px 0px 2px 0px; margin: 2px; }
.grid_nav FORM A { padding: 2px 5px 2px 5px; border: 1px silver solid; cursor: pointer; }
/* Grid Context Menu */
.context_menu { border: 1px solid black; background-color: #F9F8F7; visibility: hidden; position: absolute; width: 282px;}
.context_menu a { width: 258px; padding: 4px 0px 4px 4px; color: black; text-decoration: none; cursor: default}
.context_menu a:hover {color: #ffffff; background: #B6BDD2; border: 1px solid black; }
.context_menu TABLE { width: 282px; }
.context_menu TD { background-color: #F9F8F7; font-size: 12px; font-family: Arial; }
.context_menu TD.leftc { width: 24px; background: url(contextm_lbg.gif) repeat-y; }
</style>
<body>
<script src = "easygrid.js" ></script>
<script src = "easygrid_contextmenu.js" ></script>
<h1>Easy GRID Sample</h1>
This package can be used to display and data grids using AJAX. It uses own interface library to perform AJAX requests. The grid supports column sorting, data filtering, pagination and context menu that appears when the menu mouse button is clicked.
You can download the lastest source code <a href="http://www.phpclasses.org/browse/package/3481.html">here</a>. <br /><br />
<!-- Tool panel -->
<div class="grid_nav">
<form id="FilterForm">
Country <input class="filter" type="text" name="filter" value="" onkeypress="refreshByClick('Name', this.value, event)" />
<input type="button" name="sfilter" onclick="makeRequest('filter_field=Name&filter_value='+this.form.filter.value);" value="Filter" />
</form>
<form id="RangeForm">
Since <input class="cond" type="text" name="offset" value="0" />
to <input class="cond" type="text" name="limit" value="20" /> from <span id="TblLength">0</span>
<input type="button" name="show" onclick="makeRequest('offset='+this.form.offset.value+'&limit='+this.form.limit.value);" value="Show" />
</form>
<form id="PaginationForm">
</form>
</div>
<div id="TblBody">Data is loading...</div>
<script>
/**
* GRID configuration
**/
EGConfig.sUrl = "file_controller.php";
EGConfig.ContextMenu = "on";
EGConfig.LeightIndicatorDivID = "TblLength";
EGConfig.WorkplaceDivID = "TblBody";
EGConfig.RangeFormID = "RangeForm";
EGConfig.PaginationFormID = "PaginationForm";
EGConfig.PaginationFrameHalfLength = 2;
EGConfig.ArrowToUp = '<img src="arr_top.gif" width="13" height="8" border="0" alt="Ascent Sorting">';
EGConfig.ArrowToDown = '<img src="arr_bottom.gif" width="13" height="8" border="0" alt="Descent Sorting">';
settings(columns, '{"field":"Code","title":"Code", "width":"15%"}');
settings(columns, '{"field":"Name","title":"Country", "width":"80%"}');
settings(columns, '{"field":"Abb","title":"Abbreviation", "width":"15%"}');
makeRequest('');
</script>
<br /><a href="#" onclick="window.open('http://sitesapiens.com/tutorials/index.php?f=en_records.swf&w=824&h=518','demo', 'scrollbars=no,status=no,resizable=0,width=824,height=518'); return false;">Record Management within Site Sapiens CMS (swf)</a> - a tutorial of grid technology use from <a href="http://sitesapiens.com">www.sitesapiens.com</a>
<br /><a href="http://cmsdevelopment.com/en/">Browse other author's classes</a>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -