[原创]js datagrid 静态数组版
既是项目的需要，也是出于好玩的缘故，弄了这么一个东东。
虽然用了那么一点点的jQuery，但是实际上不用它只用DOM照样可以实现，只是为了下一个版本（AJAX版）着想，提前热一热身子而已。下一个版本期待ing（有空再续。。。）
这个版本主要通过二维数组生成Table并将数组的值填充进取，实现了修改、删除、排序、分页等功能。
资源链接
- 测试地址：http://blog.chenreal.com/demo/datagrid/
- 源码下载：http://blog.chenreal.com/demo/datagrid/js_datagrid.rar
完整代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>js DataGrid - DEMO</title>
<style>
#load{position:absolute;left:400px; width:220px; top:150px;background-color:#EEEEEE; padding:30px;}
#frame{font-size:12px;cursor:pointer;width:950px;margin:auto;}
#frame input{border:solid 1px #999999; width:50px;font-size:12px;color:#FF0000}
#frame table tr.row0{background-color:#FFFFFF;}
#frame table tr.row1{background-color:#EFEFEF;}
#frame table tr.rowOn{background-color:#CCCCCC;}
#frame table td a{color:#000000;text-decoration:none;}
#frame table{width:950px;background-color:#333333;}
#frame table th{text-align:center;background-color:#999999; color:#FFFFFF}
#frame table th a{color:#FFFFFF;text-decoration:none;}
h4{text-align:center;}
</style>
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// 表格标题
var arrTitle = new Array('编号','切工','颜色','净度','克拉','证书','价格','抛光','对称','修改','删除');
// 标题样式/功能标识：sort=可排序、mod=修改、del=删除
var arrTitleClass = new Array('sort','sort','sort','sort','sort','','sort','','','mod','del');
// 内容格式化模板
var arrTemplate = new Array('','','','','{0}克拉','','￥{0}.00','','','','');
// 核心数据数组（钻石信息）
var arr = new Array(
new Array(1622,'G','G','VVS1',0.51,'IGI',23149,'G','G'),
new Array(1512,'VG','E','VS1',0.56,'GIA',25402,'VG','EX'),
new Array(1515,'VG','E','VS1',0.55,'GIA',24948,'VG','VG'),
new Array(1508,'VG','E','VS1',0.52,'GIA',23587,'VG','EX'),
new Array(616,'G','H','VS1',0.83,'GIA',37478,'G','G'),
new Array(459,'G','G','VS1',0.72,'GIA',32394,'G','VG'),
new Array(453,'G','G','VS1',0.7,'IGI',31494,'G','G'),
new Array(1243,'EX','D','VVS1',0.47,'IGI',21596,'EX','EX'),
new Array(1244,'VG','D','VVS1',0.47,'IGI',21596,'VG','EX'),
new Array(1248,'EX','D','VVS1',0.47,'IGI',21596,'EX','EX'),
new Array(1245,'EX','D','VVS1',0.46,'IGI',21137,'EX','EX'),
new Array(1246,'EX','D','VVS1',0.46,'IGI',21137,'EX','EX'),
new Array(1247,'VG','D','VVS1',0.46,'IGI',21137,'VG','EX'),
new Array(388,'G','F','VVS2',0.5,'GIA',22975,'VG','G'),
new Array(634,'G','H','VS2',0.95,'IGI',43820,'G','G'),
new Array(1768,'G','F','VVS2',0.51,'IGI',22713,'VG','VG'),
new Array(678,'G','H','VVS2',0.73,'GIA',33865,'VG','G'),
new Array(2003,'ID','F','IF',0.46,'IGI',21340,'EX','EX'),
new Array(1788,'ID','G','VVS2',0.5,'IGI',22165,'EX','EX'),
new Array(1795,'ID','G','VVS2',0.5,'IGI',22165,'EX','EX'),
new Array(1790,'ID','G','VVS2',0.54,'IGI',23938,'G','G'),
new Array(1794,'ID','G','VVS2',0.54,'IGI',23938,'EX','EX'),
new Array(1294,'VG','D','VS2',0.51,'IGI',22608,'VG','EX'),
new Array(1793,'ID','G','VVS2',0.55,'IGI',24381,'G','G'),
new Array(1517,'G','E','VS1',0.56,'GIA',24676,'VG','G'),
new Array(539,'G','G','VVS1',0.51,'GIA',22458,'G','G'),
new Array(2,'G','D','IF',0.32,'GIA',14091,'G','G'),
new Array(612,'ID','H','VS1',0.75,'IGI',32938,'VG','VG'),
new Array(1060,'EX','D','IF',0.44,'IGI',20639,'EX','EX'),
new Array(462,'VG','G','VS1',0.8,'GIA',37655,'VG','VG'),
new Array(1971,'VG','D','VS1',0.5,'IGI',21804,'VG','VG'),
new Array(456,'G','G','VS1',0.71,'GIA',30961,'VG','G'),
new Array(278,'G','F','VS1',0.7,'GIA',33123,'VG','G'),
new Array(282,'G','F','VS1',0.75,'GIA',35489,'G','G'),
new Array(1972,'G','E','VVS2',0.52,'IGI',24606,'G','G'),
new Array(1766,'VG','F','VVS2',0.52,'IGI',24629,'EX','VG'),
new Array(391,'ID','F','VVS2',0.52,'IGI',24629,'VG','VG'),
new Array(610,'G','H','VS1',0.71,'IGI',30742,'G','G'),
new Array(689,'G','I','SI1',1.35,'IGI',57657,'G','G'),
new Array(614,'G','H','VS1',0.8,'GIA',34144,'G','G'),
new Array(615,'G','H','VS1',0.83,'GIA',35424,'G','G'),
new Array(1623,'G','G','VVS2',0.54,'IGI',22912,'G','VG'),
new Array(1786,'ID','G','VVS2',0.51,'IGI',21639,'EX','EX'),
new Array(1789,'ID','G','VVS2',0.51,'IGI',21639,'EX','EX'),
new Array(1791,'ID','G','VVS2',0.59,'IGI',25033,'G','G'),
new Array(1500,'VG','D','VS1',0.5,'GIA',24226,'VG','VG'),
new Array(457,'G','G','VS1',0.71,'GIA',34401,'G','G'),
new Array(1293,'VG','D','VS1',0.57,'IGI',27618,'VG','EX'),
new Array(455,'G','G','VS1',0.7,'GIA',33917,'G','VG'),
new Array(2010,'ID','G','IF',0.47,'IGI',19866,'EX','EX'),
new Array(1352,'EX','E','VS2',0.5,'IGI',21134,'EX','EX'),
new Array(1519,'VG','F','VS1',0.53,'GIA',22402,'VG','VG'),
new Array(1401,'EX','F','VS1',0.59,'IGI',24938,'EX','EX'),
new Array(272,'G','F','VS1',0.59,'IGI',24938,'G','VG'),
new Array(266,'ID','F','VS1',0.52,'IGI',21979,'EX','EX'),
new Array(1978,'EX','F','VS1',0.52,'IGI',21979,'EX','EX'),
new Array(1353,'EX','E','VS2',0.51,'IGI',21556,'EX','EX'),
new Array(1354,'EX','E','VS2',0.51,'IGI',21556,'EX','EX'),
new Array(261,'VG','F','VS1',0.51,'IGI',21556,'VG','EX'),
new Array(105,'G','E','VS1',0.5,'GIA',21060,'G','G'),
new Array(479,'G','G','VS2',0.76,'IGI',32011,'G','G'),
new Array(1254,'EX','E','VVS1',0.46,'IGI',19375,'EX','EX'),
new Array(1249,'EX','D','VVS2',0.46,'IGI',19375,'EX','EX'),
new Array(1250,'EX','D','VVS2',0.46,'IGI',19375,'EX','EX'),
new Array(480,'G','G','VS2',0.77,'IGI',32432,'G','G'),
new Array(1255,'VG','E','VVS1',0.47,'IGI',19796,'VG','EX'),
new Array(395,'ID','F','VVS2',0.53,'IGI',25852,'EX','EX'),
new Array(202,'G','E','VVS2',0.5,'GIA',24410,'VG','G'),
new Array(279,'G','F','VS1',0.71,'IGI',34663,'G','G'),
new Array(585,'G','G','VVS2',0.75,'GIA',36616,'G','VG'),
new Array(276,'G','F','VS1',0.7,'IGI',34175,'G','G'),
new Array(1706,'ID','D','VVS1',0.41,'IGI',17136,'EX','EX'),
new Array(1718,'ID','E','IF',0.4,'IGI',16718,'EX','EX'),
new Array(675,'VG','H','VVS2',0.71,'GIA',29644,'VG','VG'),
new Array(120,'ID','E','VS2',0.55,'IGI',22915,'EX','EX'),
new Array(1717,'ID','D','VVS1',0.46,'IGI',22762,'EX','EX'),
new Array(1770,'ID','F','VVS2',0.52,'IGI',25731,'EX','EX'),
new Array(393,'ID','F','VVS2',0.52,'IGI',25731,'EX','EX'),
new Array(2001,'ID','E','IF',0.47,'IGI',23257,'EX','EX'),
new Array(1813,'ID','I','VS1',0.9,'IGI',44535,'G','G'),
new Array(1811,'ID','H','SI1',0.9,'IGI',44535,'G','G'),
new Array(1399,'VG','F','VVS2',0.6,'IGI',29690,'VG','EX'),
new Array(1814,'ID','I','VS1',0.91,'IGI',45030,'G','G'),
new Array(1772,'ID','F','VVS2',0.51,'IGI',25237,'EX','EX'),
new Array(1762,'ID','F','VVS2',0.51,'IGI',25237,'EX','EX'),
new Array(1400,'VG','F','VVS2',0.64,'IGI',31670,'VG','EX'),
new Array(655,'ID','H','VVS1',0.54,'IGI',22268,'EX','EX'),
new Array(2002,'ID','F','VVS1',0.46,'IGI',18969,'EX','EX'),
new Array(2013,'ID','E','VVS2',0.46,'IGI',18969,'EX','EX'),
new Array(719,'G','I','VVS2',0.76,'GIA',31340,'G','G'),
new Array(718,'G','I','VVS2',0.71,'GIA',29278,'VG','G'),
new Array(2006,'ID','F','VVS1',0.47,'IGI',19381,'EX','EX'),
new Array(1416,'EX','G','SI1',0.7,'IGI',28865,'EX','EX'),
new Array(717,'G','I','VVS2',0.7,'GIA',28865,'G','G'),
new Array(1061,'EX','D','VVS1',0.38,'IGI',15642,'EX','EX'),
new Array(1062,'EX','D','VVS1',0.39,'IGI',16053,'EX','EX'),
new Array(1063,'EX','D','VVS1',0.39,'IGI',16053,'EX','EX'),
new Array(31,'G','D','VVS1',0.39,'GIA',16053,'G','G'),
new Array(32,'VG','D','VVS1',0.39,'GIA',16053,'VG','VG'),
new Array(1418,'EX','I','IF',0.82,'IGI',40758,'EX','EX'),
new Array(1745,'ID','E','VS1',0.53,'IGI',21637,'VG','VG'),
new Array(1973,'VG','E','VS1',0.5,'IGI',20412,'VG','VG'),
new Array(1854,'G','D','IF',0.35,'IGI',14227,'G','G'),
new Array(208,'ID','E','VVS2',0.56,'IGI',28181,'EX','EX'),
new Array(268,'G','F','VS1',0.53,'GIA',21442,'VG','G'),
new Array(258,'G','F','VS1',0.5,'GIA',20228,'G','G'),
new Array(656,'G','H','VVS1',0.71,'GIA',35865,'VG','G'),
new Array(611,'VG','H','VS1',0.73,'GIA',29350,'VG','VG'),
new Array(1716,'ID','D','VVS1',0.43,'IGI',17155,'EX','EX'),
new Array(264,'G','F','VS1',0.51,'GIA',20325,'G','G'),
new Array(1729,'ID','F','IF',0.4,'IGI',15941,'EX','EX'),
new Array(220,'ID','F','IF',0.41,'IGI',16339,'EX','EX'),
new Array(1630,'G','H','VVS1',0.52,'IGI',20524,'G','G'),
new Array(257,'G','F','VS1',0.5,'GIA',19624,'G','G'),
new Array(1147,'EX','F','IF',0.38,'IGI',14914,'EX','EX'),
new Array(1988,'EX','G','VS1',0.52,'IGI',20371,'EX','EX'),
new Array(1987,'EX','G','VS1',0.51,'IGI',19979,'EX','EX'),
new Array(106,'G','E','VS1',0.7,'GIA',36185,'G','VG'),
new Array(205,'ID','E','VVS2',0.53,'IGI',27467,'EX','EX'),
new Array(161,'ID','E','VVS1',0.42,'GIA',16330,'EX','EX'),
new Array(159,'G','E','VVS1',0.4,'GIA',15552,'VG','G'),
new Array(160,'VG','E','VVS1',0.4,'GIA',15552,'VG','VG'),
new Array(154,'G','E','VVS1',0.38,'GIA',14774,'G','G'),
new Array(2022,'G','G','VVS1',0.7,'HRD',36428,'G','G'),
new Array(33,'G','D','VVS1',0.5,'GIA',26053,'G','G'),
new Array(1083,'EX','E','VVS1',0.38,'IGI',14551,'EX','EX'),
new Array(1084,'EX','E','VVS1',0.38,'IGI',14551,'EX','EX'),
new Array(1086,'VG','E','VVS1',0.38,'IGI',14551,'VG','EX'),
new Array(1088,'EX','E','VVS1',0.38,'IGI',14551,'EX','EX'),
new Array(1090,'EX','E','VVS1',0.38,'IGI',14551,'EX','EX'),
new Array(1094,'EX','E','VVS1',0.38,'IGI',14551,'EX','EX'),
new Array(1095,'EX','E','VVS1',0.38,'IGI',14551,'EX','EX'),
new Array(1092,'EX','E','VVS1',0.38,'IGI',14551,'EX','EX'),
new Array(1109,'EX','E','VVS1',0.38,'IGI',14551,'EX','EX'),
new Array(1110,'VG','E','VVS1',0.38,'IGI',14551,'VG','EX'),
new Array(1266,'EX','F','VVS1',0.48,'IGI',18380,'EX','EX'),
new Array(1256,'EX','E','VVS2',0.47,'IGI',17997,'EX','EX'),
new Array(1257,'EX','E','VVS2',0.46,'IGI',17614,'EX','EX'),
new Array(1258,'EX','E','VVS2',0.46,'IGI',17614,'EX','EX'),
new Array(1267,'EX','F','VVS1',0.46,'IGI',17614,'EX','EX'),
new Array(1265,'EX','F','VVS1',0.46,'IGI',17614,'EX','EX'),
new Array(1106,'EX','E','VVS1',0.44,'IGI',16848,'EX','EX'),
new Array(1108,'EX','E','VVS1',0.44,'IGI',16848,'EX','EX'),
new Array(1104,'EX','E','VVS1',0.44,'IGI',16848,'EX','EX'),
new Array(1098,'EX','E','VVS1',0.42,'IGI',16082,'EX','EX'),
new Array(1114,'EX','E','VVS1',0.42,'IGI',16082,'EX','EX'),
new Array(1096,'EX','E','VVS1',0.42,'IGI',16082,'EX','EX'),
new Array(1087,'VG','E','VVS1',0.42,'IGI',16082,'VG','EX'),
new Array(1085,'EX','E','VVS1',0.41,'IGI',15699,'EX','EX'),
new Array(1091,'EX','E','VVS1',0.41,'IGI',15699,'EX','EX'),
new Array(1089,'EX','E','VVS1',0.41,'IGI',15699,'EX','EX'),
new Array(1099,'EX','E','VVS1',0.41,'IGI',15699,'EX','EX'),
new Array(1101,'EX','E','VVS1',0.41,'IGI',15699,'EX','EX'),
new Array(1102,'EX','E','VVS1',0.41,'IGI',15699,'EX','EX'),
new Array(1107,'EX','E','VVS1',0.41,'IGI',15699,'EX','EX'),
new Array(1105,'EX','E','VVS1',0.4,'IGI',15316,'EX','EX'),
new Array(1093,'EX','E','VVS1',0.4,'IGI',15316,'EX','EX'),
new Array(1115,'EX','E','VVS1',0.4,'IGI',15316,'EX','EX'),
new Array(1113,'EX','E','VVS1',0.4,'IGI',15316,'EX','EX'),
new Array(1097,'EX','E','VVS1',0.4,'IGI',15316,'EX','EX'),
new Array(1100,'EX','E','VVS1',0.39,'IGI',14933,'EX','EX'),
new Array(1103,'EX','E','VVS1',0.39,'IGI',14933,'EX','EX'),
new Array(1111,'EX','E','VVS1',0.39,'IGI',14933,'EX','EX'),
new Array(1112,'EX','E','VVS1',0.39,'IGI',14933,'EX','EX'),
new Array(423,'ID','G','IF',0.53,'IGI',27865,'EX','EX'),
new Array(1351,'EX','E','VVS2',0.53,'IGI',27865,'EX','EX'),
new Array(1395,'EX','F','VVS1',0.58,'IGI',30494,'EX','EX'),
new Array(1774,'ID','G','IF',0.54,'IGI',28391,'EX','EX'),
new Array(1398,'VG','F','VVS1',0.5,'IGI',26288,'VG','EX'),
new Array(1396,'VG','F','VVS1',0.63,'IGI',33123,'VG','EX'),
new Array(1349,'VG','E','VVS2',0.51,'IGI',26814,'VG','EX'),
new Array(1350,'VG','E','VVS2',0.51,'IGI',26814,'VG','EX'),
new Array(1747,'ID','E','VVS2',0.51,'IGI',26814,'EX','EX'),
new Array(588,'G','G','VVS2',0.81,'GIA',42587,'VG','G'),
new Array(1397,'VG','F','VVS1',0.52,'IGI',27340,'VG','EX'),
new Array(2005,'ID','E','VS1',0.47,'IGI',17928,'EX','EX'),
new Array(2009,'ID','G','VVS1',0.47,'IGI',17928,'EX','EX'),
new Array(1402,'EX','F','VS2',0.5,'IGI',19072,'EX','EX'),
new Array(1415,'EX','I','IF',0.5,'IGI',19072,'EX','EX'),
new Array(1522,'VG','F','VS2',0.57,'GIA',21742,'VG','VG'),
new Array(1409,'EX','F','VS2',0.62,'IGI',23649,'EX','EX'),
new Array(2008,'ID','G','VVS1',0.46,'IGI',17546,'EX','EX'),
new Array(1525,'VG','F','VS2',0.53,'GIA',20216,'VG','VG'),
new Array(1533,'VG','F','VS2',0.6,'GIA',22886,'VG','EX'),
new Array(1403,'EX','F','VS2',0.51,'IGI',19453,'EX','EX'),
new Array(1404,'EX','F','VS2',0.51,'IGI',19453,'EX','EX'),
new Array(1405,'EX','F','VS2',0.51,'IGI',19453,'EX','EX'),
new Array(1408,'EX','F','VS2',0.58,'IGI',22123,'EX','EX'),
new Array(1406,'EX','F','VS2',0.56,'IGI',21360,'EX','EX'),
new Array(1407,'EX','F','VS2',0.56,'IGI',21360,'EX','EX'),
new Array(1976,'VG','F','VS1',0.51,'IGI',19401,'VG','VG'),
new Array(1977,'VG','F','VS1',0.51,'IGI',19401,'VG','VG'),
new Array(1754,'G','F','VS1',0.51,'IGI',19401,'G','G'),
new Array(263,'G','F','VS1',0.51,'GIA',19401,'VG','G'),
new Array(269,'G','F','VS1',0.54,'GIA',20542,'G','G'),
new Array(1982,'VG','F','VS1',0.54,'IGI',20542,'VG','VG'),
new Array(273,'G','F','VS1',0.59,'GIA',22444,'G','VG'),
new Array(1979,'G','F','VS1',0.52,'IGI',19781,'G','G'),
new Array(1983,'VG','F','VS1',0.57,'IGI',21683,'VG','VG'),
new Array(1969,'VG','F','VS1',0.6,'IGI',22824,'VG','VG'),
new Array(1975,'VG','F','VS1',0.5,'IGI',19020,'VG','VG'),
new Array(260,'G','F','VS1',0.5,'GIA',19020,'G','G'),
new Array(706,'VG','I','VS2',2.39,'IGI',257475,'VG','VG'),
new Array(427,'ID','G','IF',1.07,'IGI',117698,'EX','EX'),
new Array(1574,'ID','F','VVS2',1,'IGI',110278,'EX','EX'),
new Array(1586,'ID','F','VVS2',1,'IGI',110278,'EX','EX'),
new Array(212,'ID','E','VVS2',1.01,'GIA',117182,'EX','EX'),
new Array(289,'G','F','VS1',1.5,'GIA',197935,'VG','G'),
new Array(1570,'VG','F','VS2',2,'IGI',302439,'VG','VG'),
new Array(681,'VG','H','VVS2',2.02,'HRD',318524,'VG','VG'),
new Array(472,'VG','G','VS1',2.03,'GIA',379654,'EX','VG')
);
// 分页配置
var IsPaging = true; // 是否开启分页
var PageSize = 15; // 每页显示记录数
var PageIndex = 0; // 初始页数（从0开始）
var TotalPage = 0; // 总页数
var NumSize = 5; // 页脚数字长度：0为显示全部页码
var hoverClassName = ""; // 行悬浮样式缓存
// 时间统计：开始
function startTime(){
var dt = new Date();
window.status = "Start:"+dt.getMinutes()+":"+dt.getSeconds()+"."+dt.getMilliseconds();
}
// 时间统计：结束
function endTime(){
var dt = new Date();
window.status += " End:"+dt.getMinutes()+":"+dt.getSeconds()+"."+dt.getMilliseconds()+"(length:"+arr.length+")";
}
// 升序排列
function upClick(index){
startTime();
$("#load").show(40,function(){orderUp(index);endTime();});
}
function orderUp(index){
if(EditMode()) return;
arr.sort(function(x,y){return (typeof(arr[0][index])=="number") ? x[index] - y[index] : x[index].localeCompare(y[index]);});
firstPage();
$("#load").hide();
}
// 降序排列
function downClick(index){
startTime();
$("#load").show(40,function(){orderDown(index);endTime();});
}
function orderDown(index){
if(EditMode()) return;
arr.sort(function(x,y){return (typeof(arr[0][index])=="number") ? y[index]-x[index] : y[index].localeCompare(x[index]);});
firstPage();
$("#load").hide();
}
// 判断是否处于修改模式（修改时禁止排序）
function EditMode(){
return $("#tab input").length>0;
}
// 开启修改模式
function Edit(e,index){
setEdit(e.parentNode);
for(var j=0;j<index;j++){
e.parentNode.parentNode.childNodes[j].innerHTML="<input value="+e.parentNode.parentNode.childNodes[j].innerHTML+"><input type=hidden value="+e.parentNode.parentNode.childNodes[j].innerHTML+">";
}
}
// 确认修改
function EditOK(e,index){
setEdit(e.parentNode);
for(var j=0;j<index;j++){
e.parentNode.parentNode.childNodes[j].innerHTML=e.parentNode.parentNode.childNodes[j].childNodes[0].value;
}
}
// 取消修改
function EditCancel(e,index){
setEdit(e.parentNode);
for(var j=0;j<index;j++){
e.parentNode.parentNode.childNodes[j].innerHTML=e.parentNode.parentNode.childNodes[j].childNodes[1].value;
}
}
// 切换修改按钮显示状态
function setEdit(e){
for(var i=0;i<e.childNodes.length;i++){
if(e.childNodes[i].tagName != "A")continue;
if(e.childNodes[i].style.display == "none"){
e.childNodes[i].style.display = "";
}
else{
e.childNodes[i].style.display = "none";
}
}
}
// 清除表格内容行（保留表头）
function ClearTableList(){
var oTB = $("#mytb")[0];
var oTr = oTB.childNodes[0].childNodes[0].cloneNode(1);
oTB.removeChild(oTB.childNodes[0]);
var oTBody = document.createElement("tbody");
oTBody.appendChild(oTr);
oTB.appendChild(oTBody);
}
// 生成表格标题行
function CreateTableTitle(){
var oTr = document.createElement("tr");
var oTh = document.createElement("th");
// 循环生成表头
for( var i=0;i<arrTitle.length;i++){
var th = oTh.cloneNode(1);
th.innerHTML = arrTitle[i];
if(arrTitleClass[i] != ""){
th.className=arrTitleClass[i];
if(arrTitleClass[i] == "sort"){
th.innerHTML += '<img src=img/up.gif onclick="upClick('+i+');" alt="升序排列" /><img src=img/down.gif onclick="downClick('+i+')" alt="降序排列" />';
}
}
oTr.appendChild(th);
}
return oTr;
}
// 生成分页栏
function CreateTableFoot(){
var oTr = document.createElement("tr");
var oTh = document.createElement("th");
oTh.colSpan = arrTitle.length;
oTh.id = "Pager";
var pageNum = "";
var k = 1;
var StartNum = 1;
if(NumSize>0) StartNum = PageIndex+1;
// 生成页码按钮
for(var i=StartNum;i<TotalPage+2;i++){
pageNum += '<a href="javascript:void(0);" onclick="goPage('+(i-1)+')">'+i+'</a> ';
if(NumSize>0)k++;
if(k > NumSize && i < TotalPage+1 && NumSize>0){
pageNum += '<a href="javascript:void(0);" onclick="goPage('+(i)+')">…</a> ';
break;
}
}
// 拼接分页控件
oTh.innerHTML = '<a href="javascript:void(0);" onclick="firstPage()">首页</a> <a href="javascript:void(0);" onclick="prevPage()">上一页</a> '+pageNum+'<a href="javascript:void(0);" onclick="nextPage()">下一页</a> <a href="javascript:void(0);" onclick="lastPage()">末页</a>';
oTr.appendChild(oTh);
return oTr;
}
// 生成表格数据行
function CreateTableList(index){
var oTr = document.createElement("tr");
var oTd = document.createElement("td");
// 奇偶行样式
oTr.className = "row" + index%2;
// 行悬浮样式
oTr.onmouseover=function(){
hoverClassName = this.className;
this.className = "rowOn";
}
oTr.onmouseout=function(){
this.className = hoverClassName;
hoverClassName = "";
}
// 循环生成单元格
for( var i=0;i<arrTitle.length;i++){
var td = oTd.cloneNode(1);
if(arr[index][i] || arr[index][i] == 0){
if(arrTemplate[i] == ""){
td.innerHTML = arr[index][i];
}
else{
td.innerHTML = arrTemplate[i].replace("{0}",arr[index][i]);
}
}
// 生成修改按钮
if(arrTitleClass[i]=="mod"){
td.innerHTML="<a href='javascript:void(0)' onclick='EditOK(this,"+i+")' style='display:none;'>确定</a> "
+"<a href='javascript:void(0)' onclick='EditCancel(this,"+i+")' style='display:none;'>取消</a> "
+"<a href='javascript:void(0)' onclick='Edit(this,"+i+")'>修改</a>";
}
// 生成删除按钮
if(arrTitleClass[i]=="del"){
td.innerHTML="删除";
td.onclick=function(){
if(confirm("确认删除？"))td.parentNode.parentNode.removeChild(td.parentNode);
}
}
oTr.appendChild(td);
}
return oTr;
}
// 跳转到指定页
function goPage(index){
PageIndex = index;
CreatePagingList();
}
// 上一页
function prevPage(){
if(PageIndex == 0)return;
PageIndex--;
CreatePagingList();
}
// 下一页
function nextPage(){
if((PageIndex+1)*PageSize>=arr.length) return;
PageIndex++;
CreatePagingList();
}
// 首页
function firstPage(){
PageIndex=0;
CreatePagingList();
}
// 末页
function lastPage(){
PageIndex=TotalPage;
CreatePagingList();
}
// 生成分页数据列表
function CreatePagingList(){
ClearTableList();
var oTBody = $("#mytb")[0].childNodes[0];
// 循环生成当前页数据行
for(var k=PageIndex*PageSize;k<(PageIndex+1)*PageSize;k++){
oTBody.appendChild(CreateTableList(k));
if(k==arr.length-1)break;
}
// 添加分页栏
oTBody.appendChild(CreateTableFoot());
}
// 初始化表格
function Initial(){
if(arr.length == 0) return;
var oTab = document.createElement("table");
var oTBody = document.createElement("tbody");
// 若关闭分页，显示全部数据
if(!IsPaging){
PageSize = arr.length;
}
// 添加表头
oTBody.appendChild(CreateTableTitle());
// 添加第一页数据
for(var k=0;k<PageSize;k++){
oTBody.appendChild(CreateTableList(k));
}
// 计算总页数并添加分页栏
if(IsPaging){
TotalPage = Math.floor(arr.length/PageSize);
if(arr.length % PageSize ==0) TotalPage--;
oTBody.appendChild(CreateTableFoot());
}
oTab.appendChild(oTBody);
oTab.id = "mytb";
oTab.cellPadding = 5;
oTab.cellSpacing = 1;
oTab.border = 0;
$("#frame")[0].appendChild(oTab);
$("#load").hide();
endTime();
}
// 页面加载完成后初始化
window.onload=function(){startTime();setTimeout("Initial()",10);}
</script>
</head>
<body>
<div id="load">
<h3>正在加载数据，请稍候...</h3>
<img src="img/loading.gif" />
</div>
<h4>JS DataGrid Demo - 静态数组版</h4>
<div id="frame">
</div>
</body>
</html>
核心功能说明
1. 基础配置
| 变量 | 作用 |
|---|---|
arrTitle | 表格列标题数组 |
arrTitleClass | 列功能标识（sort=可排序、mod=修改、del=删除） |
arrTemplate | 内容格式化模板（如{0}克拉、￥{0}.00） |
arr | 核心数据数组（存储钻石信息的二维数组） |
IsPaging | 是否开启分页（true=开启、false=关闭） |
PageSize | 每页显示行数（默认15） |
2. 核心功能
（1）排序
- 支持数字/字符串类型字段的升序/降序排序；
- 点击表头排序图标触发，修改模式下禁止排序。
（2）修改
- 点击“修改”按钮进入编辑模式（单元格转为输入框）；
- 支持“确定”保存/“取消”回滚修改内容。
（3）删除
- 点击“删除”按钮，确认后移除当前行；
- 基于DOM操作直接删除，无数据持久化（可扩展AJAX同步后端）。
（4）分页
- 支持首页/上一页/下一页/末页/指定页码跳转；
- 页脚页码长度可通过
NumSize配置（默认显示5个页码）。
（5）样式交互
- 奇偶行差异化背景色；
- 行悬浮高亮效果；
- 加载中遮罩提示。