?? index.html
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dhtmlxGrid. Big Grid Sample</title>
<style>
body{
background-color:#f0f0f0;
}
div {
font-size:12px;
font-family:verdana;
}
div.h{
margin-top:10px;
margin-bottom:5px;
font-size:16px;
border-bottom:1px solid gray;
width:400px;
}
</style>
<link rel="STYLESHEET" type="text/css" href="../../css/dhtmlXGrid.css">
<script src="../../js/dhtmlXCommon.js"></script>
<script src="../../js/dhtmlXGrid.js"></script>
<script src="../../js/dhtmlXGrid_srnd.js"></script>
<script src="../../js/dhtmlXGridCell.js"></script>
<script>
var mygrid;
var timeoutHnd;
var flAuto = false;
function doOnLoad(){
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../imgs/");
mygrid.setHeader("Name,Index,Code");
mygrid.setInitWidths("150,150,*")
mygrid.setColAlign("left,left,right")
mygrid.setColTypes("ro,ro,ro");
mygrid.setColSorting("int,str,str,int,str,str,str,date")
mygrid.setColumnColor("white,#d5f1ff")
mygrid.setSkin("xp");
mygrid.init();
mygrid.enableSmartRendering(true);
try{
mygrid.setOnLoadingEnd(setCounter)
}catch(e){
//available in Pro Edition only
}
//mygrid.setOnLoadingStart(showLoading)
mygrid.loadXML("loadGrid.php?un="+Date.parse(new Date()));
showLoading()
}
function setCounter(){
var span = document.getElementById("recfound")
span.style.color = "";
span.innerHTML = mygrid.getRowsNum();
}
function showLoading(){
var span = document.getElementById("recfound")
if(!mygrid.setOnLoadingEnd){
span.innerHTML = "<i>available in Professional Edition of dhtmlxGrid</i>"
return;
}
span.style.color = "red";
span.innerHTML = "loading...";
}
function doSearch(ev){
if(!flAuto)
return;
var elem = ev.target||ev.srcElement;
if(timeoutHnd)
clearTimeout(timeoutHnd)
timeoutHnd = setTimeout(reloadGrid,500)
}
function reloadGrid(){
var nm_mask = document.getElementById("search_nm").value
var cd_mask = document.getElementById("search_cd").value
mygrid.clearAll();
mygrid.loadXML("loadGrid.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask+"&un="+Date.parse(new Date()));
showLoading()
}
function enableAutosubmit(state){
flAuto = state;
document.getElementById("submitButton").disabled = state
}
</script>
</head>
<body onload="doOnLoad()">
<h1>dhtmlxGrid. Working with big datasets</h1>
<p style="font-size:14px;">
This sample demonstrates how dhtmlxGrid works with large amount of data.<br>
We have put into a table in a Mysql database 10.000 records filled with random words. dhtmlxGrid, using Ajax, loads only those records, that are visible.<br>
When user is scrolling, dhtmlxGrid automatically loads new records from database and displays them. When user is scrolling back, those records that have been already loaded, are taken from cache.<br>
If user wants to make a search (just enter some word into input fields), grid sends search criteria to server and loads only data that correspond to entered criteria.<br>
<i>Important: sample is working with real data - <b>10.000</b> records! Enjoy it's performance and imagine how it could be used in your product</i>
</p>
<div class="h">Search By:</div>
<div>
Name<br>
<input type="text" id="search_nm" onkeydown="doSearch(arguments[0]||event)">
</div>
<div>
Code<br>
<input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)">
<button onclick="reloadGrid()" id="submitButton" style="margin-left:30px;">Search</button>
<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"> Enable Autosearch
</div>
<div id="gridbox" style="width:600px;height:200px;margin-top:20px;margin-bottom:10px;"></div>
<div>Records found: <span id="recfound"></span></div>
<h3>© Scand LLC</h3>
</body>
</html>
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -