JavaScript实现的数据表格：冻结列、调整列宽和客户端排序-SQL天地-大量免费数据库|电脑|编程|开发|网页制作|学习|网络安全.Net|Ajax|SqlServer|Oracle|c#|sliverlight|finance...教程资料

当前位置：网站首页 > 网络编程 > ASP.NET > JavaScript实现的数据表格：冻结列、调整列宽和客户端排序

订阅｜上一篇:webconfig的设置节点说明｜下一篇:加入身份验证信息的SMTP mail发送

JavaScript实现的数据表格：冻结列、调整列宽和客户端排序

[作者]：菩提树下的杨过 [来源]：互联网 [收录时间]：2007-8-18 14:57:51

根据网上的一些脚本改的，大家看一下，应该对开发有用，准备在.Net下写个Server-Side端控件 把下面的代码另存为.htm文件后看下效果。 <HTML><HEAD> <TITLE>数据表格</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <STYLE type=text/css>BODY { FONT: 12px 细明体; CURSOR: default } TD { FONT: 12px 细明体; CURSOR: default } .title { BORDER-RIGHT: #555 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 4px; BACKGROUND: LightBlue; PADDING-BOTTOM: 4px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; CURSOR: hand; PADDING-TOP: 4px; BORDER-BOTTOM: #555 1px solid; WHITE-SPACE: nowrap } .cdata { PADDING-RIGHT: 3px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; OVERFLOW: hidden; PADDING-TOP: 3px; BORDER-BOTTOM: #ddd 1px solid; WHITE-SPACE: nowrap } .coolMenu { position: absolute; height: 1px; width: 1px; font-size: 9pt; background-color: menu; border-top: 2px outset buttonhighlight; border-left: 2px outset buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; visibility: hidden; } .coolMenu .coolMenuItem { height: 20px; margin: 1px; padding-right: 10px; cursor: hand; overflow: hidden; } .coolMenu .coolMenuItem IMG { vertical-align: middle; margin-left: 1px; margin-right: 6px; } .coolMenu .coolMenuItem .coolMenuMore { font-family: webdings; } .coolMenu .coolMenuDivider { border: 1px inset; border-top-color: buttonshadow; border-bottom-color: buttonhighlight; height: 2px; overflow: hidden; margin-left: 2px; margin-top: 2px; margin-bottom: 2px; } .sinput { BORDER-BOTTOM: black 1px solid; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT-FAMILY: 宋体,Arial; FONT-SIZE: 9pt; WIDTH: 15pt; height: 12pt; } </STYLE> <SCRIPT language=JavaScript> // 栏位标题 ( 栏位名称 # 栏位宽度 # 资料对齐 #数据类型（主要分三种数据类型：文本、数值、日期）) var DataTitles=new Array( "歌手 / 团体#90 #left#文本" , "专辑名称 #130#left#文本" , "发行公司 #110#left#文本" , "本周排名 #58 #center#数值", "排名状况 #58 #center#文本", "上周排名 #58 #center#数值", "上榜周数 #58 #center#数值", "最高名次 #58 #center#数值", "销售百分比 #70 #center#数值", "发行日期 #100 #right#日期" ) // 栏位资料 ( 二维阵列 ) var DataFields=new Array() DataFields[0] =new Array("萧亚轩萧亚轩萧亚轩萧亚轩萧亚轩萧亚轩萧亚轩萧亚轩" ,"爱的主打歌-吻" ,"维京 Virgin" ,"1" ,"持平" ,"1" ,"2","1" ,"2.9 %", "2004-1-1") DataFields[1] =new Array("张惠妹" ,"发烧" ,"华纳 Warner" ,"2" ,"持平" ,"2" ,"2","2" ,"2.1 %", "2004-2-10") DataFields[2] =new Array("陶吉吉" ,"黑色柳丁" ,"全员集合 Shock" ,"3" ,"持平" ,"3" ,"5","1" ,"1.8 %", "2004-2-09") DataFields[3] =new Array("S.H.E" ,"美丽新世界" ,"华研 HIM" ,"4" ,"持平" ,"4" ,"6","1" ,"1.2 %", "2003-1-1") DataFields[4] =new Array("艾薇儿" ,"展翅高飞" ,"博德曼 BMG" ,"5" ,"新进榜","-" ,"1","5" ,"1.1 %", "2004-4-4") DataFields[5] =new Array("任贤齐" ,"一个任贤齐" ,"滚石 Rock" ,"6" ,"新进榜","-" ,"1","6" ,"1.0 %", "2002-10-11") DataFields[6] =new Array("范逸臣" ,"范逸臣第一张专辑","丰华 Forward" ,"7" ,"持平" ,"7" ,"2","7" ,"0.9 %", "2002-12-11") DataFields[7] =new Array("谢霆锋" ,"无形的他全精选" ,"新力 Sony" ,"8" ,"下跌" ,"6" ,"4","4" ,"0.9 %", "2004-1-1") DataFields[8] =new Array("周蕙" ,"寂寞城市" ,"福茂 Decca" ,"9" ,"下跌" ,"5" ,"3","5" ,"0.8 %", "2004-1-1") DataFields[9] =new Array("周杰伦" ,"八度空间" ,"博德曼 BMG" ,"10","下跌" ,"8" ,"8","1" ,"0.8 %", "2004-1-1") DataFields[10]=new Array("酷玩乐团","玩过头" ,"科艺百代 EMI" ,"11","上升" ,"16","2","11","0.7 %", "2004-1-1") DataFields[11]=new Array("张震岳" ,"等我有一天" ,"魔岩 Magicstone","12","新进榜","-" ,"1","12","0.6 %", "2004-1-1") DataFields[12]=new Array("堂本刚" ,"红与蓝" ,"艾回 Avex" ,"13","新进榜","-" ,"1","13","0.6 %", "2004-1-1") DataFields[13]=new Array("ENERGY" ,"COME ON" ,"环球 Universal" ,"14","下跌" ,"10","9","5" ,"0.6 %", "2004-1-1") DataFields[14]=new Array("陈冠希" ,"TRANSITION" ,"艾回 Avex" ,"15","下跌" ,"9" ,"3","5" ,"0.4 %", "2004-1-1") DataFields[15]=new Array("合辑" ,"MTV 嘻哈大师" ,"环球 Universal" ,"16","下跌" ,"12","3","12","0.4 %", "2004-1-1") </SCRIPT> <SCRIPT language=JavaScript> var BoxWidth = 480 // 资料表显示宽度 ( 不含滚动条) var ShowLine = 10 // 资料表显示列数 var RsHeight = 21 // 资料列高度 var LockCols = 1 // 要锁定的栏位数 ( 由左至右 ) var RowColor = "Linen" var RowAlternativeColor = "#d9ffd3" var RowMouseOverColor = "LightSteelBlue" var RowSelectedColor = "CornflowerBlue" //记录每次右击的列的索引。 var columnRC = 0 //记录被单击过的行的索引。 var rowC = -1; function SetRowColor(sRowIndex, sColor) { for(i=0;i<leftTable.rows[sRowIndex].cells.length;i++) leftTable.rows[sRowIndex].cells[i].style.backgroundColor = sColor; for(i=0;i<rightTable.rows[sRowIndex].cells.length;i++) rightTable.rows[sRowIndex].cells[i].style.backgroundColor = sColor; } function ResetRowColor(sRowIndex) { var sColor = null; if (sRowIndex % 2 ==0) sColor = RowColor; else sColor = RowAlternativeColor; SetRowColor(sRowIndex, sColor); } function SortTableAsc() { var cTitle=DataTitles[columnRC].split("#"); switch(cTitle[3]) { case "文本" : alert("暂时不支持文本排序！汉字的拼音问题尚未解决！"); break; case "数值" : var minIndex = 0; var tempArray = new Array(); for(i=0;i<DataFields.length;i++) { minIndex = i; var leftMin = parseFloat(DataFields[i][columnRC]); for(j=i+1;j<DataFields.length;j++) { if (leftMin>parseFloat(DataFields[j][columnRC])) { leftMin = parseFloat(DataFields[j][columnRC]); minIndex = j; } } if (minIndex != i) { for(h=0;h<DataFields[i].length;h++) { tempArray[h] = DataFields[i][h]; DataFields[i][h] = DataFields[minIndex][h]; DataFields[minIndex][h] = tempArray[h]; } } } ApplyData(); break; case "日期" : var minIndex = 0; var tempArray = new Array(); for(i=0;i<DataFields.length;i++) { //日期必须是yyyy-mm-dd格式的。 minIndex = i; var leftMin = DataFields[i][columnRC].split("-"); for(j=i+1;j<DataFields.length;j++) { var currentDate = DataFields[j][columnRC].split("-"); if ( ( parseInt(leftMin[0]) > parseInt(currentDate[0]) ) || ( ( leftMin[0] == currentDate[0] ) && ( parseInt(leftMin[1]) > parseInt(currentDate[1]) ) ) || ( ( leftMin[0] == currentDate[0] ) && ( leftMin[1] == currentDate[1] ) && ( parseInt(leftMin[2]) > parseInt(currentDate[2]) ) ) ) { leftMin[0] = currentDate[0]; leftMin[1] = currentDate[1]; leftMin[2] = currentDate[2]; minIndex = j; } } if (minIndex != i) { for(h=0;h<DataFields[i].length;h++) { tempArray[h] = DataFields[i][h]; DataFields[i][h] = DataFields[minIndex][h]; DataFields[minIndex][h] = tempArray[h]; } } } ApplyData(); break; } } function SortTableDesc() { var cTitle=DataTitles[columnRC].split("#"); switch(cTitle[3]) { case "文本" : alert("暂时不支持文本排序！汉字的拼音问题尚未解决！"); break; case "数值" : var minIndex = 0; var tempArray = new Array(); for(i=0;i<DataFields.length;i++) { minIndex = i; var leftMin = parseFloat(DataFields[i][columnRC]); for(j=i+1;j<DataFields.length;j++) { if (leftMin<parseFloat(DataFields[j][columnRC])) { leftMin = parseFloat(DataFields[j][columnRC]); minIndex = j; } } if (minIndex != i) { for(h=0;h<DataFields[i].length;h++) { tempArray[h] = DataFields[i][h]; DataFields[i][h] = DataFields[minIndex][h]; DataFields[minIndex][h] = tempArray[h]; } } } ApplyData(); break; case "日期" : var minIndex = 0; var tempArray = new Array(); for(i=0;i<DataFields.length;i++) { //日期必须是yyyy-mm-dd格式的。 minIndex = i; var leftMin = DataFields[i][columnRC].split("-"); for(j=i+1;j<DataFields.length;j++) { var currentDate = DataFields[j][columnRC].split("-"); if ( ( parseInt(leftMin[0]) < parseInt(currentDate[0]) ) || ( ( leftMin[0] == currentDate[0] ) && ( parseInt(leftMin[1]) < parseInt(currentDate[1]) ) ) || ( ( leftMin[0] == currentDate[0] ) && ( leftMin[1] == currentDate[1] ) && ( parseInt(leftMin[2]) < parseInt(currentDate[2]) ) ) ) { leftMin[0] = currentDate[0]; leftMin[1] = currentDate[1]; leftMin[2] = currentDate[2]; minIndex = j; } } if (minIndex != i) { for(h=0;h<DataFields[i].length;h++) { tempArray[h] = DataFields[i][h]; DataFields[i][h] = DataFields[minIndex][h]; DataFields[minIndex][h] = tempArray[h]; } } } ApplyData(); break; } } function WriteTable(){ // 写入表格 var iBoxWidth=BoxWidth var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>\ <td><div style=\"width:100%;overflow-x:scroll\">\ <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" id=\"leftHead\"><tr>" for(i=0;i<DataTitles.length;i++){ if(i<LockCols){ var cTitle=DataTitles[i].split("#") iBoxWidth-=cTitle[1] NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" align=\"" + cTitle[2] + "\" oncontextmenu=\"HeadRightClick()\">"+cTitle[0]+"</div></td>" } } NewHTML+="</tr>\ <tr><td colspan=\""+LockCols+"\">\ <div id=\"DataFrame1\" style=\"position:relative;width:100%;overflow:hidden\">\ <div id=\"DataGroup1\" style=\"position:relative\"></div></div>\ </td></tr></table></div></td>\ <td valign=\"top\"><div style=\"width:"+iBoxWidth+"px;overflow-x:scroll\">\ <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" id=\"rightHead\"><tr>" for(i=0;i<DataTitles.length;i++){ if(i>=LockCols){ var cTitle=DataTitles[i].split("#") NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" align=\"" + cTitle[2] + "\" oncontextmenu=\"HeadRightClick()\">"+cTitle[0]+"</div></td>" } } NewHTML+="</tr>\ <tr><td colspan=\""+(DataTitles.length-LockCols)+"\">\ <div id=\"DataFrame2\" style=\"position:relative;width:100%;overflow:hidden\">\ <div id=\"DataGroup2\" style=\"position:relative\"></div>\ </div></td></tr></table>\ </div></td><td valign=\"top\">\ <div id=\"DataFrame3\" style=\"position:relative;background:#000;overflow-y:scroll\" onscroll=\"SYNC_Roll()\">\ <div id=\"DataGroup3\" style=\"position:relative;width:1px;visibility:hidden\"></div>\ </div></td></tr></table>" DataTable.innerHTML=NewHTML ApplyData() } function ApplyData(){ // 写入资料 var NewHTML="<table id=\"leftTable\" onMouseOver=\"overcolor()\" onClick=\"clickColor()\" onMouseOut=\"outcolor()\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">" for(i=0;i<DataFields.length;i++){ if (i %2 == 0) NewHTML+="<tr bgcolor=\"" + RowColor + "\">" else NewHTML+="<tr bgcolor=\"" + RowAlternativeColor + "\">" for(j=0;j<DataTitles.length;j++){ if(j<LockCols){ var cTitle=DataTitles[j].split("#") NewHTML+="<td><div class=\"cdata\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"\">"+DataFields[i][j]+"</div></td>" } } NewHTML+="</tr>" } NewHTML+="</table>" DataGroup1.innerHTML=NewHTML var NewHTML="<table id=\"rightTable\" onMouseOver=\"overcolor()\" onClick=\"clickColor()\" onMouseOut=\"outcolor()\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">" for(i=0;i<DataFields.length;i++){ if (i %2 == 0) NewHTML+="<tr bgcolor=\"" + RowColor + "\">" else NewHTML+="<tr bgcolor=\"" + RowAlternativeColor + "\">" for(j=0;j<DataTitles.length;j++){ if(j>=LockCols){ var cTitle=DataTitles[j].split("#") NewHTML+="<td><div class=\"cdata\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"\">"+DataFields[i][j]+"</div></td>" } } NewHTML+="</tr>" } NewHTML+="</table>" DataGroup2.innerHTML=NewHTML DataFrame1.style.pixelHeight=RsHeight*ShowLine DataFrame2.style.pixelHeight=RsHeight*ShowLine DataFrame3.style.pixelHeight=RsHeight*ShowLine+RsHeight DataGroup3.style.pixelHeight=RsHeight*(DataFields.length+1) } function ResetTable(){ var iBoxWidth=0 for(i=0;i<DataTitles.length;i++){ if(i<(columnRC+1)){ var cTitle=DataTitles[i].split("#") iBoxWidth+=parseInt(cTitle[1]) } } if(iBoxWidth>BoxWidth){ var Sure=confirm("\n锁定栏位的宽度大於资料表显示的宽　　\n\n度，这可能会造成版面显示不正常。\n\n\n您确定要继续吗？") }else{ Sure=true } if(Sure){ LockCols=(LockCols==columnRC+1)?0:columnRC+1 WriteTable() } } function SYNC_Roll(){ DataGroup1.style.posTop=-DataFrame3.scrollTop DataGroup2.style.posTop=-DataFrame3.scrollTop } function clickColor() { try { var oEl = event.srcElement; if (oEl) if (oEl.tagName == "DIV") { try { oEl = oEl.parentElement.parentElement; } catch (e) { return; } } if (oEl.tagName == "TD") oEl = oEl.parentElement; var sindex = oEl.rowIndex; SetRowColor(sindex, RowSelectedColor); if (rowC >= 0) if (rowC != sindex) ResetRowColor(rowC); rowC = sindex; } catch (e) {} } function overcolor() { var oEl = event.srcElement; if (oEl) if (oEl.tagName == "DIV") { try { oEl = oEl.parentElement.parentElement; } catch (e) { return; } } if (oEl.tagName == "TD") oEl = oEl.parentElement; var sindex = oEl.rowIndex; if (rowC >= 0) if (sindex == rowC) return; SetRowColor(sindex, RowMouseOverColor); } function outcolor() { var oEl = event.srcElement; if (oEl) if (oEl.tagName == "DIV") { try { oEl = oEl.parentElement.parentElement; } catch (e) { return; } } if (oEl.tagName == "TD") oEl = oEl.parentElement; var sindex = oEl.rowIndex; if (rowC >= 0) if (sindex == rowC) return; ResetRowColor(sindex); } function HeadRightClick() { var ev = window.event; var el = ev.srcElement; if (el.tagName == "DIV") { showMenu(ev.clientX, ev.clientY); ev.cancelBubble = true; ev.returnValue = false; var ep = el.parentElement; columnRC = ep.cellIndex; ep = el.parentElement.parentElement.parentElement.parentElement; if (ep.tagName == "TABLE") { if (ep.id == "rightHead") columnRC += LockCols; } } } function showMenu(x, y) { var intRightEdge = window.document.body.clientWidth - x; var intBottomEdge = window.document.body.clientHeight - y; var intScrollLeft = window.document.body.scrollLeft + x; var intScrollTop = window.document.body.scrollTop + y; if (intRightEdge < objHeadMenu.offsetWidth) objHeadMenu.style.left = intScrollLeft - objHeadMenu.offsetWidth; else objHeadMenu.style.left = intScrollLeft; if (intBottomEdge < objHeadMenu.offsetHeight) objHeadMenu.style.top = intScrollTop - objHeadMenu.offsetHeight; else objHeadMenu.style.top = intScrollTop; objHeadMenu.style.zIndex = 50; objHeadMenu.style.filter = "blendTrans(duration=0.50) progid:DXImageTransform.Microsoft.Shadow(color=#323232, direction=135, strength=3)"; if (objHeadMenu.filters.blendTrans.status != 2) { objHeadMenu.filters.blendTrans.apply(); objHeadMenu.style.visibility = "visible"; objHeadMenu.filters.blendTrans.play(); } } function hideMenu() { objHeadMenu.style.filter = "blendTrans(duration=0.50) progid:DXImageTransform.Microsoft.Shadow(color=#323232, direction=135, strength=3)"; if (objHeadMenu.filters.blendTrans.status != 2) { objHeadMenu.filters.blendTrans.apply(); objHeadMenu.style.visibility = "hidden"; objHeadMenu.filters.blendTrans.play(); } } //加列宽 function SetCWP(valWidth) { var cTitle = DataTitles[columnRC].split("#"); var cWidth = parseInt(cTitle[1]) + parseInt(valWidth); DataTitles[columnRC] = cTitle[0] + "#" + cWidth + "#" + cTitle[2] + "#" + cTitle[3]; WriteTable(); } //减列宽 function SetCWM(valWidth) { var cTitle = DataTitles[columnRC].split("#"); var cWidth = parseInt(cTitle[1]) - parseInt(valWidth); if (cWidth <= 0) return; DataTitles[columnRC] = cTitle[0] + "#" + cWidth + "#" + cTitle[2] + "#" + cTitle[3]; WriteTable(); } /* 右键菜单上的两个调整列宽的文本框的KeyDown事件，用于捕捉"Enter"时调整列宽并隐藏菜单 */ function CWKeyDown() { if (event.keyCode == 13) { var oEl = event.srcElement; if (oEl.id == "txtCWPlus") SetCWP(txtCWPlus.value); if (oEl.id == "txtCWMinus") SetCWM(txtCWMinus.value); hideMenu(); } } function createMenu() { var txtHTML = "<div class=\"coolMenuItem\" style='padding-top: 1px;' onclick=\"SortTableAsc();hideMenu();\"><img src=http://www.webstudy8.com/2006/12/\"images/asc.gif\" width=\"16\" height=\"16\">按升序排序</div>"; txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' onclick=\"SortTableDesc();hideMenu();\"><img src=http://www.webstudy8.com/2006/12/\"images/desc.gif\" width=\"16\" height=\"16\">按降序排序</div>"; txtHTML +="<div class=\"coolMenuDivider\"></div>"; txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' onclick=\"ResetTable();hideMenu();\"><img src=http://www.webstudy8.com/2006/12/\"images/blank.gif\" width=\"16\" height=\"16\">锁定列</div>"; txtHTML += "<div class=\"coolMenuDivider\"></div>"; txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' onClick=\"SetCWP(txtCWPlus.value);\" onMouseOver=\"txtCWPlus.focus();\"><img src=http://www.webstudy8.com/2006/12/\"images/blank.gif\" width=\"16\" height=\"16\">列宽 + <input type=\"text\" id=\"txtCWPlus\" class=\"sinput\" value=\"20\" onKeyDown=\"CWKeyDown();\"> px</div>"; txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' onclick=\"SetCWM(txtCWMinus.value);\" onMouseOver=\"txtCWMinus.focus()\"><img src=http://www.webstudy8.com/2006/12/\"images/blank.gif\" width=\"16\" height=\"16\">列宽 - <input type=\"text\" id=\"txtCWMinus\" class=\"sinput\" value=\"20\" onKeyDown=\"CWKeyDown();\"> px</div>"; objHeadMenu.className = "coolMenu"; objHeadMenu.innerHTML = txtHTML; window.document.body.insertAdjacentElement("afterBegin", objHeadMenu); } </SCRIPT> <META content="MSHTML 6.00.2800.1170" name=GENERATOR> <script language="JavaScript" type="text/JavaScript">  </script> </HEAD> <BODY onLoad="WriteTable();createMenu();" onClick="hideMenu();"> <CENTER> <H4>&nbsp;</H4>  <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD style="BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; BORDER-LEFT: white 2px inset; BORDER-BOTTOM: white 2px inset; BACKGROUND-COLOR: scrollbar"> <DIV id=DataTable> </DIV></TD></TR></TBODY></TABLE> &nbsp; <div id="objHeadMenu" style="position:absolute; width:124px; height:13px; z-index:1; left: 525px; top: 164px; visibility: hidden;" oncontextmenu="return false;"></div> </CENTER></BODY></HTML>

订阅｜上一篇:webconfig的设置节点说明｜下一篇:加入身份验证信息的SMTP mail发送

引用通告：http://www.sqlsky.com/asp-net/070818/28147

相关文章：

·在ASP.NET中访问SQL Server

·关于ASP.Net中的时间处理

·JavaScript实现的数据表格：冻结列、调整列宽和客户端排序

·用ASP.NET 1.1 新特征防止Script攻击

·枚举器模式（Enumerator pattern）

·一段实现DataGrid的“编辑”、“取消”功能脚本[无刷新]

·一个简单的加密/解密方法

·webconfig的设置节点说明

·加入身份验证信息的SMTP mail发送

·在Repeater中嵌套使用Repeater

tags:无