本例是基于Prototype的数据分页,能对行数,列数进行设置,列和行都是用表格进行布局,需要时根据自己的喜好进行修改。
页面导航类:
var TNavigationBar = new Class.create();
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
TNavigationBar.prototype =
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
initialize: function(_cssPath)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.viewObj = null;/**//*显示的位置*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.cssPath = _cssPath;/**//*导航样式路径*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.Bar = null;/**//*导航容器对象*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.Total = null;/**//*总数对象*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.PageNumber = null;/**//*页码对象*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.Arrow = null;/**//*导航符号对象*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.FirstPage = null;/**//*第一页对象*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.PrevPage = null;/**//*上一页对象*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.NextPage = null;/**//*下一页对象*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.Lastpage = null;/**//*最后一页对象*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.toPage = Prototype.emptyFunction;/**//*导航跳转页面过程*/
Common.loadCss(this.cssPath);
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
init: function()
{
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Title:
{/**//*对象提示*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
First: "第一页", /**//*第一页对象提示*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Prev: "上一页", /**//*上一页对象提示*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Next: "下一页", /**//*下一页对象提示*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Last: "最后一页" /**//*最后一页对象提示*/
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Text:
{/**//*导航文字*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
First: "9", /**//*第一页对象文字*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Prev: "7", /**//*上一页对象文字*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Next: "8", /**//*下一页对象文字*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Last: ":" /**//*最后一页文字*/
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Template:
{ /**//*文字模板*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Total: new Template("Total: #{Total}"), /**//*对象总数模板*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
PageNumber: new Template("Pages: #{CurrentPage} / #{TotalPages}") /**//*页码模板*/
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Numberic:
{ /**//*导航所需要的数字*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Total: 0, /**//*对象总数*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
CurrentPage: 1, /**//*当前页*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
TotalPages: 0 /**//*总页数*/
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
create: function()
{
var _this = this;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
with(_this)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Bar = new Element("DIV",
{className: "pages"});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*对象总数*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Total = new Element("SPAN",
{className: "count"}).update(Common.format(Template.Total,
{Total: Numberic.Total}));
Bar.appendChild(Total);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*页码对象*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
PageNumber = new Element("SPAN",
{className: "count"}).update(Common.format(Template.PageNumber,
{CurrentPage: Numberic.CurrentPage, TotalPages: Numberic.TotalPages}));
Bar.appendChild(PageNumber);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*导航符号*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Arrow = new Element("SPAN",
{className: "arrow"});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
FirstPage = new Element("SPAN",
{title: Title.First});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (Numberic.CurrentPage - 1 < 1 )
{
FirstPage.update(Text.First);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var links = new Element("NOBR",
{className: "link"}).update(Text.First);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
links.observe("click", function()
{_this.toPage(1)});
FirstPage.appendChild(links);
}
Arrow.appendChild(FirstPage);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
PrevPage = new Element("SPAN",
{title: Title.Prev});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (Numberic.CurrentPage - 1 < 1 )
{
PrevPage.update(Text.Prev);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var links = new Element("NOBR",
{className: "link"}).update(Text.Prev);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
links.observe("click", function()
{_this.toPage(_this.Numberic.CurrentPage - 1)});
PrevPage.appendChild(links);
}
Arrow.appendChild(PrevPage);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
NextPage = new Element("SPAN",
{title: Title.Next});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (Numberic.CurrentPage + 1 > Numberic.TotalPages )
{
NextPage.update(Text.Next);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var links = new Element("NOBR",
{className: "link"}).update(Text.Next);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
links.observe("click", function()
{_this.toPage(_this.Numberic.CurrentPage + 1)});
NextPage.appendChild(links);
}
Arrow.appendChild(NextPage);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Lastpage = new Element("SPAN",
{title: Title.Last});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (Numberic.CurrentPage + 1 > Numberic.TotalPages )
{
Lastpage.update(Text.Last);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var links = new Element("NOBR",
{className: "link"}).update(Text.Last);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
links.observe("click", function()
{_this.toPage(_this.Numberic.TotalPages)});
Lastpage.appendChild(links);
}
Arrow.appendChild(Lastpage);
Bar.appendChild(Arrow);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*********************************/
viewObj.appendChild(Bar);
}
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
show: function()
{
var _this = this;
Element.update(_this.viewObj);
_this.create();
}
};
导航效果图:
下面为数据分页类,其中包括对数据删除、添加、修改
var TPagination = new Class.create();
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
TPagination.prototype =
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
initialize: function()
{
this.viewObj = $(arguments[0]) || null;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.InstanceName = "";/**//*实例名称*/
this.calls = new TCallBack();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.imgPath = "";/**//*显示图片的路径*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.getDataURL = ""; /**//*获取分页数据的路径*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.pageData = null;/**//*分页数据*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.pageHeadData = null;/**//*表格头部数据以Aarray形式,如:{"aa","bb"}*/
this.STR_FILECANTUPLOAD = "文件格式不正确,不能上传!";
this.STR_EMPTYOBJECTNAME = "请输入组件名称!";
this.STR_EMPTYOBJECTSORT = "请从左边选择组件分类!";
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.outBgColor = "";/**//*鼠标移出时的背景色*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.overBgColor = "#e7edee";/**//*鼠标移上时的背景色*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.defaultFontColor = "#000000";/**//*默认对象的文字颜色*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.fouseFontColor = "#FFFFFF";/**//*选中中对象的文字颜色*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.selectBgColor = "#0A246A";/**//*选中对象的背景色*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.Pages = 0;/**//*总页数*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.CurrentPageIndex = 0;/**//*当前页*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.PageCounts = 0;/**//*每页显示个数*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.Cells = 0;/**//*每行显示的列数*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.showHead = false;/**//*是否显示表格头部*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.showBody = true;/**//*是否显示表格体部*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.showFoot = true;/**//*是否显示表格脚注*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.showMenu = false;/**//*是否显示操作菜单,菜单包括:删除、修改*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.canCellDbClick = false;/**//*每列是否可以点击*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.CellDbClick = Prototype.emptyFunction;/**//*当canCellClick为true时,必须指定的事件*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.pageTable = null;/**//*分页表格模板*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.pageTableHead = null;/**//*分页表格头部模板*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.pageTableFoot = null;/**//*分页表格脚注模板*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.pageTableBody = null;/**//*分页表格体部模板*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.pageTableRow = null;/**//*分页表格行模板*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.pageTableCell = null;/**//*分页表格列模板*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.pagesTemplate = null;/**//*页码模板*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.linkTemplate = null;/**//*链接模板*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.CellTemplate = null;/**//*每列显示的模板*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.pageMenuItems = null;/**//*操作菜单项*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.SelectObj = null;/**//*选中的对象*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.SelectValue = null;/**//*选中的对象值*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.STR_FIRSTPAGE = "9";/**//*第一页符号,字体为Webdings*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.STR_PREVPAGE = "7";/**//*上一页符号,字体为Webdings*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.STR_NEXTPAGE = "8";/**//*下一页符号,字体为Webdings*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.STR_LASTPAGE = ":";/**//*最后一页符号,字体为Webdings*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.ERROR_EMPTYDATA = "<center><B>此分类没有数据。</B><center>";/**//*此分类下没有数据*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.ERROR_EMPTYHEADDATA = "请指定表格头部数据。格式如{\"aaa\", \"bbb\"}";/**//*当showHead为true时,没有表格头部数据的错误信息*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.ERROR_EMPTYMENUEVENTS = "未指定菜单事件。";/**//*当showMenu为true时,没有指定菜单事件的错误信息*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.ERROR_EMPTYCELLCLICKEVENTS = "未指定每列点击事件。";/**//*当canCellClick为true时,没有指定点击事件的错误信息*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.NavigationBar = null;/**//*导航栏*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.init(); /**//*初始化变量*/
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
pageMenuEvents:
{/**//*操作菜单事件,如果showMenu为true时,必须指定操作代码*/
Insert: Prototype.emptyFunction,
Update: Prototype.emptyFunction,
Delete: Prototype.emptyFunction
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
init: function()
{
var _this = this;
this.getDataURL = "";
this.getSortDataURL = "";
this.Pages = 0;
this.CurrentPageIndex = 1;
this.PageCounts = 9;
this.Cells = 3;
this.showHead = false;
this.showBody = true;
this.showFoot = true;
this.CellTemplate = new Template('<div><center><img src="#{Img}"/><br>#{Name}</center></div>');
this.NavigationBar = new TNavigationBar("http://www.cnblogs.com/App_Themes/Pagination/Pages");
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.NavigationBar.toPage = function(pageIndex)
{
_this.CurrentPageIndex = pageIndex;
_this.show();
}
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
initializePageTalbe: function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.pageTable = new Element("TABLE",
{border: "0", cellspacing: "5", cellpadding: "0", width: "100%"});
this.pageTableBody = new Element("TBODY");
this.pageTableHead = new Element("THEAD");
this.pageTableFoot = new Element("TFOOT");
this.pageTable.appendChild(this.pageTableHead);
this.pageTable.appendChild(this.pageTableBody);
this.pageTable.appendChild(this.pageTableFoot);
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
createRow: function(oObj)
{
var _this = this;
_this.pageTableRow = oObj.insertRow();
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
createCell: function()
{ /**//*生成列,参数0:创建列数,参数1:合并列数,参数2:合并行数*/
var _this = this;
var times = arguments[0];
var colspan = arguments[1] == null ? 0 : parseInt(arguments[1]);
var rowspan = arguments[2] == null ? 0 : parseInt(arguments[2]);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (var i = 0 ; i< times; i++)
{
_this.pageTableCell = _this.pageTableRow.insertCell();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
with (_this.pageTableCell)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (colspan > 0)
{colSpan = colspan;}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (rowspan > 0)
{rowSpan = rowspan;}
}
}
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
createMenu: function()
{
var _this = this;
_this.pageMenuItems = [
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
name: '添加',
className: 'new',
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
callback: function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
if (_this.pageMenuEvents.Insert == Prototype.emptyFunction)
throw new Error(_this.ERROR_EMPTYMENUEVENTS);
else
_this.pageMenuEvents.Insert();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(e)
{
Errors.show(e);
}
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
name: '修改',
className: 'edit',
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
callback: function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
if (_this.pageMenuEvents.Update == Prototype.emptyFunction)
throw new Error(_this.ERROR_EMPTYMENUEVENTS);
else
_this.pageMenuEvents.Update(_this.SelectValue);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(e)
{
Errors.show(e);
}
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
separator: true
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
name: '删除',
className: 'delete',
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
callback: function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
if (_this.pageMenuEvents.Delete == Prototype.emptyFunction)
throw new Error(_this.ERROR_EMPTYMENUEVENTS);
else
_this.pageMenuEvents.Delete(_this.SelectValue);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(e)
{
Errors.show(e);
}
}
}
];
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
new Proto.Menu(
{
selector: '#'+_this.viewObj.id,
className: 'menu desktop',
menuItems: _this.pageMenuItems
});
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
mouseOver: function(objNode)
{
var _this = this;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
objNode.setStyle(
{backgroundColor: _this.overBgColor, color: _this.defaultFontColor});
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
mouseOut: function(objNode)
{
var _this = this;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
objNode.setStyle(
{backgroundColor: _this.outBgColor});
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
showCell: function(strCell)
{
var _this = this;
return _this.CellTemplate.evaluate(strCell);
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
show: function()
{
var _this = this;
var JSON = _this.pageData;
_this.initializePageTalbe();
_this.viewObj.update();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (JSON==null)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*****分类数据为空************/
_this.createRow(_this.pageTableBody);
_this.createCell(1);
Element.update(_this.pageTableCell, _this.ERROR_EMPTYDATA);
_this.viewObj.appendChild(_this.pageTable);
return;
}
if (_this.showMenu) _this.createMenu();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_this.Pages = Math.floor(JSON.Table.size() / _this.PageCounts) + (JSON.Table.size() % _this.PageCounts > 0 ? 1 : 0); /**//*计算总页数*/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*****生成表格头部*****/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (_this.showHead)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (_this.pageHeadData != null)
{
_this.createRow(_this.pageTableHead);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_this.pageHeadData.each(function(value, index)
{
_this.createCell(1);
Element.update(_this.pageTableCell, value);
});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
throw new Error(_this.ERROR_EMPTYHEADDATA);
}
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*****生成数据主体******/
_this.createRow(_this.pageTableBody);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
JSON.Table.each(function(value, index)
{
var startIndex = _this.CurrentPageIndex == 1 ? 1 : (_this.CurrentPageIndex - 1)*_this.PageCounts + 1;
var endIndex = _this.CurrentPageIndex * _this.PageCounts;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if ((index+1) >= startIndex && (index+1) <= endIndex )
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
with(value)
{
_this.createCell(1);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Event.observe(_this.pageTableCell, "mouseover", function()
{
var sObj = Event.findElement(event, "TD");
_this.mouseOver(sObj);
});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Event.observe(_this.pageTableCell, "mouseout", function()
{
var sObj = Event.findElement(event, "TD");
if (_this.SelectObj != sObj)
_this.mouseOut(sObj);
});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Event.observe(_this.pageTableCell, "mousedown", function(event)
{
if (event.button == 1) return;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (_this.SelectObj != null) _this.SelectObj.setStyle(
{backgroundColor: "", color: _this.defaultFontColor});
_this.SelectObj = Event.findElement(event, 'TD');
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_this.SelectObj.setStyle(
{backgroundColor: _this.selectBgColor, color: _this.fouseFontColor});
_this.SelectValue = value;
});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (_this.canCellDbClick)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Event.observe(_this.pageTableCell, "dblclick", function(event)
{
var sObj = Event.findElement(event, 'TD');
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
sObj.setStyle(
{backgroundColor: _this.selectBgColor, color: _this.fouseFontColor});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
if (_this.CellDbClick == Prototype.emptyFunction)
throw new Error(_this.ERROR_EMPTYCELLCLICKEVENTS);
else
_this.CellDbClick(value);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(e)
{
Errors.show(e);
}
});
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var strCell =
{
Img: _this.imgPath + Goods_smallpic,
Name: Goods_name
};
Element.update(_this.pageTableCell, _this.showCell(strCell));
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if ((index+1) % (_this.Cells) == 0)
{
_this.createRow(_this.pageTableBody);
}
}
}
});
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (JSON.Table.size() % _this.Cells > 0)
{
_this.createCell(JSON.Table.size() % _this.Cells - 1);
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*****生成脚注页码*****/
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (_this.showFoot)
{
_this.createRow(_this.pageTableFoot);
_this.createCell(1, _this.Cells);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
with(_this.NavigationBar)
{
viewObj =_this.pageTableCell;
Numberic.Total = JSON.Table.size();
Numberic.CurrentPage = _this.CurrentPageIndex;
Numberic.TotalPages = _this.Pages;
show();
}
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//******************/
_this.viewObj.appendChild(_this.pageTable);
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
toPage: function(pageIndex)
{
var _this = this;
_this.CurrentPageIndex = pageIndex;
_this.show();
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
callGet: function(param)
{
var _this = this;
_this.calls.Path = _this.getDataURL;
_this.calls.Method = "post";
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_this.calls.onSuccess = function(JSON)
{
_this.pageData = JSON;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
_this.CurrentPageIndex = 1;
_this.show();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(e)
{
Errors.show(e);
}
};
_this.calls.Call(param);
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
getData: function(sortIndex)
{
var _this = this;
PostParameters.Clear();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
with (PostParameters.Add())
{
DataType = getSqlDbType("varchar");
Direction = getDirection("Input");
FieldName = "GoodsSortID";
Size = 255;
Value = sortIndex;
RunType = getRunType("Proc");
}
_this.callGet(PostParameters.toJSON());
}
}
后台数据说明:本例使用的数据格式都为JSON,而在对数据进行操作时用到了基于Prototype的
Proto.Menu,下载地址:http://yura.thinkweb2.com/scripting/contextMenu/