📄 untitled-3.html
字号:
<!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>无标题文档</title>
<link href="CSS/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
function JSGrid()
{
JSGrid.backColor = "#fdfdfd"; //行背景色
JSGrid.hoverColor = "#e1e6f1";//鼠标移过颜色
JSGrid.clickColor = "inactivecaptiontext";//选择行颜色
this.id="JSGridID";//ID
this.datas=""; //数据
this.container;//DIV
this.table;//Grid
this.curRow;//Grid行
this.curCell;//Grid单元格
this.colWidth;//Grid宽度
this.curOrder;//Grid排序方法
//改变列宽初始位置
var ml = 0;
//改变列宽对象初始宽度
var ow = 0;
//改变列宽对象
var thobj = null;
var CurGrid = this;//Grid对象
this.PageSize=0;//分页大小
this.GridClick=function(){};//Grid行单击事件
this.GridDBClick=function(){};//Grid行双击事件
//-------------------------------------------------初始化------------------------------//
this.load = function()
{
//grid重画模块
/** 加载table **/
var tbStr = [];
tbStr.push("<table cellspacing='1' id='"+this.id+"table'><tr>");
for(var o=0; o<this.datas.title.length;o++)
{
//初始化表头
tbStr.push("<th width="+this.datas.colWidth[o]+">"+ this.datas.title[o] + (this.curOrder == o?(this.datas.order[o]==1?"↑":"↓"):" ") + "</th>");
}
tbStr.push("</tr>");
//初始化表数据
for(var i=0;i<this.datas.data.length;i++)
{
tbStr.push("<tr bgcolor=" + JSGrid.backColor + ">");
for(var j=0;j<this.datas.data[i].length;j++)
{
tbStr.push("<td>" + this.datas.data[i][j] + "</td>");
}
tbStr.push("</tr>");
}
tbStr.push("</table>");
this.container.innerHTML = tbStr.join("");
this.table = this.container.firstChild;
/** 设置单元格 **/
for(var r=1; r<this.table.rows.length;r++)
{
//Grid行鼠标移动事件
this.table.rows[r].onmouseover = function(){ this.style.backgroundColor = JSGrid.hoverColor; }
this.table.rows[r].onmouseout = function()
{
if(CurGrid.curRow!=this) this.style.backgroundColor = JSGrid.backColor;
else this.style.backgroundColor = JSGrid.clickColor;
}
for(var c=0;c<this.table.rows[r].cells.length;c++)
{
//Grid行单击事件
this.table.rows[r].cells[c].onclick = function()
{
if(CurGrid.curRow) CurGrid.curRow.style.backgroundColor = JSGrid.backColor;
CurGrid.curRow = this.parentNode;
this.parentNode.style.backgroundColor = JSGrid.clickColor;
CurGrid.GridClick();
}
//Grid双击事件
this.table.rows[r].cells[c].ondblclick = function()
{
CurGrid.GridDBClick();
//alert(CurGrid.datas.data[this.parentNode.rowIndex-1][0]);
}
}
}
//标题单击事件
for(var g=0; g<this.table.rows[0].cells.length;g++)
{
this.table.rows[0].cells[g].onmouseover=function()
{
this.style.color="#FFFFFF";
if(thobj!=null){
var newwidth = ow-(ml-event.clientX);
if(newwidth>5){
thobj.style.width = newwidth;
}
else{
thobj.style.width = 5;
}
}
}
this.table.rows[0].cells[g].onmouseout = function()
{
this.style.color = "";
}
this.table.rows[0].cells[g].onclick = function()
{
CurGrid.datas.order[this.cellIndex] = -CurGrid.datas.order[this.cellIndex];
CurGrid.curOrder = this.cellIndex;
CurGrid.sort(this.cellIndex, CurGrid.datas.order[this.cellIndex]);
}
this.table.rows[0].cells[g].onmousedown = function()
{
var px = document.all?event.offsetX:event.layerX-this.offsetLeft;
if(px>this.offsetWidth-6 && px<this.offsetWidth){
ml = event.clientX;
ow = this.offsetWidth;
thobj = this;
if(this.setCapture){
this.setCapture();
}
else{
event.preventDefault();
}
}
//CurGrid.rsc_d(event,this);
}
}
}
//----------------------------------------初始化结束-------------------------------------//
this.sort = function(n, type)
{ //排序
this.datas.data = this.datas.data.sort(function(x,y){if (x[n]>y[n]){return type;}else if(x[n]<y[n]){return -type;}else{return 0;}});
this.load();
}
}
/*---------------------------分页--------------------------------------------------------------------------------*/
function DividePage(Contentdata,oGrid){
this.datas = Contentdata.data;
this.totalCount = Contentdata.data.length;
this.pageSize = oGrid.PageSize;
this.pageCount = Math.ceil(this.totalCount/this.pageSize);
this.curPage = 1;
this.imgbtnfolder="";
//跳转页方法
this.go = function(i){
if(isNaN(i) || i<1 || i>this.pageCount) return;
this.curPage = i;
this.showData();
}
//第一页方法
this.firstPage = function(){
this.curPage = 1;
this.showData();
}
//最后一页方法
this.lastPage = function(){
this.curPage = this.pageCount;
this.showData();
}
//上一页方法
this.prevPage = function(){
this.curPage --;
if(this.curPage == 0){
this.curPage = 1;
}
this.showData();
}
//下一页方法
this.nextPage = function(){
this.curPage++;
if(this.curPage == this.pageCount+1){
this.curPage = this.pageCount;
}
this.showData();
}
//刷新方法
this.refresh = function(){
this.totalCount = this.data.length;
this.pageCount = Math.ceil(this.totalCount/this.pageSize);
this.curPage = 1;
this.showData();
}
//显示数据
this.showData = function(){
var tempArr = [];
var start = (this.curPage-1)*this.pageSize;
var len = this.curPage==this.pageCount && (this.totalCount%this.pageSize) > 0?this.totalCount%this.pageSize:this.pageSize;
for(var i=0; i<len;i++){
tempArr[i] = [];
for(var j=0; j<this.datas[0].length; j++){
tempArr[i].push(this.datas[i+start][j]);
}
}
document.getElementById(""+oGrid.id+"_lbstart").innerText=start+1;
document.getElementById(""+oGrid.id+"_lbto").innerText=start+len;
document.getElementById(""+oGrid.id+"_lbnowpage").innerText=this.curPage;
document.getElementById(""+oGrid.id+"_lbpagecount").innerText=this.pageCount;
document.getElementById(""+oGrid.id+"_lbdatacount").innerText=this.totalCount;
//第一页时不能点击“第一页”和“上一页”
var imgbtnfirst=document.getElementById(""+oGrid.id+"_btnfirst");
var imgbtnprev=document.getElementById(""+oGrid.id+"_btnprev");
var imgbtnnext=document.getElementById(""+oGrid.id+"_btnnext");
var imgbtnlast=document.getElementById(""+oGrid.id+"_btnlast");
var imgbtngo=document.getElementById(""+oGrid.id+"_btngo");
var txtgo=document.getElementById(""+oGrid.id+"_txtpagego");
//当前页为第一页时
if(this.curPage==1)
{
//只有一页时
if(this.pageCount==1)
{
imgbtnfirst.src=""+this.imgbtnfolder+"firstPageDisabled.gif";
imgbtnfirst.disabled="disabled";
imgbtnprev.src=""+this.imgbtnfolder+"prevPageDisabled.gif";
imgbtnprev.disabled="disabled";
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -