当前位置:编程问答 > C#/ASP.NET >

关于GridView的应用<附了图片效果>,这个效果有点难,请求高手帮助!

--------------------编程问答-------------------- 图片看不了 --------------------编程问答-------------------- 的确有难度。 --------------------编程问答-------------------- 图片显示不出来?重新发过啊 --------------------编程问答-------------------- 我的理解是将将GridView(B)嵌套在 GridView(A)中,如果选中了A中的一行,那个加号的图片变为减号,然后展开B. 有兴趣的来讨论一下.
                                    后生有礼---谢谢各位 --------------------编程问答-------------------- 别人都能看到,刷一下,应该没问题,有兴趣的话加我QQ:77856977 --------------------编程问答-------------------- 很简单,不过你贴的图看不到 --------------------编程问答-------------------- LZ解决了不要忘了告诉我们,关注,也想做这个效果 --------------------编程问答-------------------- Repeater --------------------编程问答-------------------- 简单,用js和gridview结合 --------------------编程问答-------------------- 下面的内容可以看成是记录的备注 --------------------编程问答-------------------- 看不到图片的可以去这个地址看,帖子加100分,有源码的或是有什么看发的都贴出来大家同进取,同分享
/upload/20131225/48394eae463970e0fbed50ea.gif --------------------编程问答-------------------- 先找找第三方控件吧,有的话就不用自己那么麻烦去做了 --------------------编程问答-------------------- <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">



<title></title>
<style type="text/css">
body{text-align:center;}
td {font-size: 12px;line-height:160%}
.dotline{background-image:url(images/dot_line.gif);background-repeat: repeat-x;background-position: bottom;}
</style>
</head>

<body>
<script language=JavaScript src="js/js.js"></script>
<table width="600" border="0" cellspacing="2" cellpadding="0">
  <tr>
    <td width="56" height="40" align="right" class="dotline"><img src="images/ico_q.gif" width="47" height="29"></td>
    <td width="544" height="40" class="dotline"><a onClick=javascript:ShowFLT(1) href="javascript:void(null)">1.为什么我在加入购物车的时候提示“数量已超过该物品库存”?</a></td>
  </tr>
  <tr id=LM1 style="DISPLAY: none">
    <td height="30" align="right" bgcolor="#f5f9ed"><img src="images/ico_a.gif" width="14" height="14" hspace="5"></td>
    <td height="30" bgcolor="#f5f9ed">这是因为您要购买的数量超过了我们目前仓库中该物品的数量。比如说您想购物10件物品,而我们目前只有5件库存,所以系统会出现该提示,并会把尽可能多的物品加入您的购物车。</td>
  </tr>
  <tr>
    <td height="40" align="right" class="dotline"><img src="images/ico_q.gif" width="47" height="29"></td>
    <td height="40" class="dotline"><a onClick=javascript:ShowFLT(2) href="javascript:void(null)">2.“下次自动登录”有什么用?</a></td>
  </tr>
  <tr id=LM2 style="DISPLAY: none">
    <td height="30" align="right" bgcolor="#f5f9ed"><img src="images/ico_a.gif" width="14" height="14" hspace="5"></td>
    <td height="30" bgcolor="#f5f9ed"><p>如果您是我们的会员,在您登录的时候,会有一个下次自动登录选项。如果您是在家或者办公室上网的话,您可以选中它,这样当您下次再来的时候,就不用再手工登录了,会自动识别出您,并自动登录。</p>
    </td>
  </tr>
  
  <tr>
    <td height="40" align="right" class="dotline"><img src="images/ico_q.gif" width="47" height="29"></td>
    <td height="40" class="dotline"><a onClick=javascript:ShowFLT(3) href="javascript:void(null)">3.为什么在付款的时候要“多加一个尾数”?</a></td>
  </tr>
  <tr id=LM3 style="DISPLAY: none">
    <td height="30" align="right" bgcolor="#f5f9ed"><img src="images/ico_a.gif" width="14" height="14" hspace="5"></td>
    <td height="30" bgcolor="#f5f9ed">因为我们的定单较多,难免会出现多个顾客同时汇款的情况。加个尾数可以方便我们识别您的汇款,以减少不必要的麻烦,并第一时间给您发货。如果有可能的话,我们还建议在您的汇款或者转帐附言中写明您的订单号。当然,您在付款后及时的通知我们也是必不可少的。</td>
  </tr>
  
  <tr>
    <td height="40" align="right" class="dotline"><img src="images/ico_q.gif" width="47" height="29"></td>
    <td height="40" class="dotline"><a onClick=javascript:ShowFLT(4) href="javascript:void(null)">4.什么是TrackBack,对我而言有何意义?</a></td>
  </tr>
  <tr id=LM4 style="DISPLAY: none">
    <td height="30" align="right" bgcolor="#f5f9ed"><img src="images/ico_a.gif" width="14" height="14" hspace="5"></td>
    <td height="30" bgcolor="#f5f9ed">简单说来,TrackBack 被设计用来提供一种方法以实现网站之间的互相通告。利用这种简单使用的方式,可以让您实现主动推送(Push)一条相关信息加进产品页面内。这样,不仅使用户在访问我们的网站时得到的高价值信息量更多,更能使您的 Blog 吸引到与您志同道合的朋友。</td>
  </tr>
  
  <tr>
    <td height="40" align="right" class="dotline"><img src="images/ico_q.gif" width="47" height="29"></td>
    <td height="40" class="dotline"><a onClick=javascript:ShowFLT(5) href="javascript:void(null)">5.我的 Blog 是否也支持 Trackback?</a></td>
  </tr>
  <tr id=LM5 style="DISPLAY: none">
    <td height="30" align="right" bgcolor="#f5f9ed"><img src="images/ico_a.gif" width="14" height="14" hspace="5"></td>
    <td height="30" bgcolor="#f5f9ed">作为一种协议和一项功能对其进行了实现,这是 TrackBack 的第一个实现。由于只有众多的站点都支持TrackBack,它的真正价值才能得以体现,所以 TrackBack 从一开始就被设计为一个开放系统:一个其它的 blog 工具能很简单地实现的开放系统。</td>
  </tr>
</table>
</body>
</html>
--------------------编程问答-------------------- 以上是一个js的效果,结合到gridview里就行了,你说的这种隐藏一条备注信息的做法不难,难得是隐藏一个相关的表,也就是表格套表格 --------------------编程问答-------------------- 呵呵,谢谢你,是不是忘了给js文件了? --------------------编程问答-------------------- var number=5; //定义条目数

function LMYC() {
var lbmc;
    for (i=1;i<=number;i++) {
        lbmc = eval('LM' + i);
        lbmc.style.display = 'none';
    }
}
 
function ShowFLT(i) {
    lbmc = eval('LM' + i);
    if (lbmc.style.display == 'none') {
        LMYC();
        lbmc.style.display = '';
    }
    else {
        lbmc.style.display = 'none';
    }
} --------------------编程问答-------------------- gridview里每条记录要生成一个号,就是要有一个自增长的列,再结合以上的来做 --------------------编程问答-------------------- 收藏,等高手。。。。 --------------------编程问答-------------------- 做一个隐藏层不就可以了...

选中的时候显示层..

--------------------编程问答-------------------- 嵌套? 网上有例子啊 --------------------编程问答-------------------- repeater来重复需要的tr,ItemTemplate里面需两个tr

然后写些js就搞定了


生成的html大概如下,需要注意的是不要改动table的id,要不你需要更改js对应的table的id

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title></title> 
<style type="text/css"> 
#MyTable{background:#9891C4}
#MyTable thead{background:#B7BAE7}
#MyTable tbody tr{background:#ffffff}
#MyTable tbody tr td.plus{background:#ffffff url(plus.png) no-repeat center;cursor:pointer;}
#MyTable tbody tr td.minus{background:#ffffff url(minus.png) no-repeat center;cursor:pointer;}
#MyTable tbody tr.hide{display:none;}
#MyTable tbody tr.focus{background:#DDDEF3}
</style> 
</head> 
<body> 
<script>
function $(Id){return document.getElementById(Id);}
function $s(o,tagName){return o.getElementsByTagName(tagName);}
function CKALL(checked){
  var cbs=$s($s($('MyTable'),"tbody")[0],"input");
  for(var i=0;i<cbs.length;i++){
    cbs[i].checked=checked;
    cbs[i].parentNode.parentNode.className=checked?"focus":"";
  }
}
function resetClass(o){
  var tbody=$s($('MyTable'),"tbody")[0],tr,trPre;
  var showTr=o.parentNode.nextSibling;
  while(showTr.nodeType!=1)showTr=showTr.nextSibling;//for firefox
  for(var i=1;i<tbody.rows.length;i=i+2){
    tr=tbody.rows[i];
    if(showTr!=tr&&tr.className!='hide'){
      trPre=tr.previousSibling;
      while(trPre.nodeType!=1)trPre=trPre.previousSibling;//for firefox
      trPre.cells[1].className='plus';
      tr.className='hide';
    }
  }
  tr=o.parentNode.nextSibling;
  while(tr.nodeType!=1)tr=tr.nextSibling;//for firefox
  tr.className=o.className=="plus"?"":"hide";
  o.className=o.className=="plus"?"minus":"plus";
}
document.onclick=function(e){
  e=e||window.event;
  var o=e.srcElement||e.target;
  if(o.id=="ckall")CKALL(o.checked);
  else if(o.name=='cb')o.parentNode.parentNode.className=o.checked?"focus":"";
  else if(o.className=="plus"||o.className=="minus")resetClass(o);
}
</script>


<table  width="600" border="0" cellspacing="1" cellpadding="0" id="MyTable"> 
  <thead><tr><td style='width:25px'><input type='checkbox' id='ckall'/></td><td style='width:17px'></td><td>承运人</td><td>转运属性</td><td>离港班期</td></tr></thead>
  <tbody>
  <!--repeater放tbody里面,重复下面说明的两列,绑定下就可以了-->
  <!----需要重复的tr-->
    <tr><td><input type='checkbox' name='cb'/></td><td class='plus'></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
 <!----到此结束-->
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>   
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
 </tbody>
</table> 
</body> 
</html> 
--------------------编程问答-------------------- 发个最终版本,全选的勾选取消,单个触发的全选以及+/-列背景颜色的问题

为了看到效果,图片使用了网络图片

如果改过表格的id的话,样式表的表格id也要改  :-)
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title></title> 
<style type="text/css"> 
#MyTable{background:#9891C4}
#MyTable thead{background:#B7BAE7}
#MyTable tbody tr{background:#ffffff}
#MyTable tbody tr td.plus{background:#ffffff url(http://country.lvyou168.cn/flashwariii/plus.png) no-repeat center;cursor:pointer;}
#MyTable tbody tr td.minus{background:#ffffff url(http://country.lvyou168.cn/flashwariii/minus.png) no-repeat center;cursor:pointer;}
#MyTable tbody tr.hide{display:none;}
#MyTable tbody tr.focus td{background-color:#DDDEF3;}
</style> 
</head> 
<body> 
<script>
function $(Id){return document.getElementById(Id);}
function $s(o,tagName){return o.getElementsByTagName(tagName);}
function CKALL(checked){
  var cbs=$s($s($('MyTable'),"tbody")[0],"input");
  for(var i=0;i<cbs.length;i++){
    cbs[i].checked=checked;
    cbs[i].parentNode.parentNode.className=checked?"focus":"";
  }
}
function resetClass(o){
  var tbody=$s($('MyTable'),"tbody")[0],tr,trPre;
  var showTr=o.parentNode.nextSibling;
  while(showTr.nodeType!=1)showTr=showTr.nextSibling;//for firefox
  for(var i=1;i<tbody.rows.length;i=i+2){
    tr=tbody.rows[i];
    if(showTr!=tr&&tr.className!='hide'){
      trPre=tr.previousSibling;
      while(trPre.nodeType!=1)trPre=trPre.previousSibling;//for firefox
      trPre.cells[1].className='plus';
      tr.className='hide';
    }
  }
  tr=o.parentNode.nextSibling;
  while(tr.nodeType!=1)tr=tr.nextSibling;//for firefox
  tr.className=o.className=="plus"?"":"hide";
  o.className=o.className=="plus"?"minus":"plus";
}
function rootCheck(){
  var tbody=$s($('MyTable'),"tbody")[0];
  var cka=true;
  for(var i=0;i<tbody.rows.length;i=i+2)
    if($s(tbody.rows[i].cells[0],"input")[0].checked==false){
      cka=false;break;
    }
   $('ckall').checked=cka;
}
document.onclick=function(e){
  e=e||window.event;
  var o=e.srcElement||e.target;
  if(o.id=="ckall")CKALL(o.checked);
  else if(o.name=='cb'){
    o.parentNode.parentNode.className=o.checked?"focus":"";
    if(o.checked)rootCheck();
    else $('ckall').checked=false;
  }
  else if(o.className=="plus"||o.className=="minus")resetClass(o);
}
</script>


<table  width="600" border="0" cellspacing="1" cellpadding="0" id="MyTable"> 
  <thead><tr><td style='width:25px'><input type='checkbox' id='ckall'/></td><td style='width:17px'></td><td>承运人</td><td>转运属性</td><td>离港班期</td></tr></thead>
  <tbody>
  <!--repeater放tbody里面,重复下面说明的两行,绑定下就可以了-->
  <!----需要重复的tr-->
    <tr><td><input type='checkbox' name='cb'/></td><td class='plus'></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
 <!----到此结束-->
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>   
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
    <tr><td><input type='checkbox' name='cb'/></td><td class="plus"></td><td>ShowBo</td><td>海运直达</td><td>周一</td></tr>
    <tr class='hide'><td colspan='2'></td><td colspan='3'><br/>介绍信息<br/></td></tr>
 </tbody>
</table> 
</body> 
</html> 
--------------------编程问答-------------------- 顶 --------------------编程问答-------------------- 大家都是html和js高手,没有一个能用两个GridView嵌套,通过SelectedIndexChanged事件实现的吗? --------------------编程问答--------------------
引用 24 楼 lim62008 的回复:
大家都是html和js高手,没有一个能用两个GridView嵌套,通过SelectedIndexChanged事件实现的吗?


你说的这个方法不建议使用,你可以参考22楼的 --------------------编程问答-------------------- 图片看不到..用客户端实现更合理 --------------------编程问答-------------------- 这个还要等高手.........................

这个太容易了,只要会用repeater or datalist + html +js

很容易搞定的 --------------------编程问答-------------------- 这个是显示+ -图片

<asp:TemplateField>
                    <ItemTemplate>
                        <a href="javascript:expandcollapse('div<%# Eval("CustomerID") %>', 'one');">
                            <img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide Orders for Customer <%# Eval("CustomerID") %>"  width="9px" border="0" src="plus.gif"/>
                        </a>
                    </ItemTemplate>
</asp:TemplateField>



<asp:TemplateField>
<ItemTemplate>
<tr>
        <td colspan="100%">
                                <div id="div<%# Eval("CustomerID") %>" style="display:none;position:relative;left:15px;OVERFLOW: auto;WIDTH:97%" >
                                   //这里放一个GRID
                                </div>
                           </ItemTemplate>        
    </asp:TemplateField>



function expandcollapse(obj,row)
    {
        var div = document.getElementById(obj);
        var img = document.getElementById('img' + obj);
        
        if (div.style.display == "none")
        {
            div.style.display = "block";
            if (row == 'alt')
            {
                img.src = "minus.gif";
            }
            else
            {
                img.src = "minus.gif";
            }
            img.alt = "Close to view other Customers";
        }
        else
        {
            div.style.display = "none";
            if (row == 'alt')
            {
                img.src = "plus.gif";
            }
            else
            {
                img.src = "plus.gif";
            }
            img.alt = "Expand to show Orders";
        }
    } 
--------------------编程问答-------------------- 用ajax就行了 --------------------编程问答-------------------- 我记得孟子做过,他网站上有 --------------------编程问答--------------------   本文描述如何使用嵌套的Repeater 控件来显示分级数据 。当然了,你也可以将这一技术应用到其他的列表绑定控件上去,比如DataGrid包含DataGrid,DataList包含DataList等等的组合。 

 

  绑定到父表 

  1.添加一个新的Web Form 到应用程序项目中,名称为Nestedrepeater.aspx. 
  2.从工具箱托动一个Repeater 控件到这个页面上, 设定其ID 属性为 parent . 
  3.切换到HTML 视图. 
  4.选中下列<itemtemplate> 代码,复制到Repeater 控件对应的位置。注意,粘贴的时候请使用“粘贴为html”功能。这些语句包含了数据绑定语法,很简单。


<itemtemplate><b><%# DataBinder.Eval(Container.DataItem, "au_id") %></b><br></itemtemplate>
 


  5.打开Nestedrepeater.aspx.cs 这个代码分离文件。降下列代码添加到Page_Load 事件中,其作用是建立一个到 Pubs (这个数据库是sql server的演示数据库。另外在安装.net framework sdk的时候也会安装这个数据库)数据库的连接,并绑定Authors 表到Repeater 控件 

public void Page_Load(){ SqlConnection cnn = new SqlConnection("server=(local);database=pubs;uid=sa;pwd=;"); SqlDataAdapter cmd1 = new SqlDataAdapter("select * from authors",cnn);  DataSet ds = new DataSet();  cmd1.Fill(ds,"authors");
  //这里将要插入子表的数据绑定
  parent.DataSource = ds.Tables["authors"];  Page.DataBind(); cnn.Close();}
 


  6.在文件的头部添加下面的名称空间 
  using System.Data.SqlClient;
  7.根据你自己的情况修改一下连接字符串 
  8.保存并编译应用程序 
  9.在浏览器中打开这个页面,输出结果类似于下面的格式 


172-32-1176 213-46-8915 238-95-7766 267-41-2394 ... 
 


  绑定到子表 

  1.在页面的HTML视图中,添加下列代码。其目的是增加子Repeater 控件到父Repeater的项目模板中,形成嵌套。 

<asp:repeater id="child" runat="server"><itemtemplate><%# DataBinder.Eval(Container.DataItem, "["title_id"]") %><br></itemtemplate></asp:repeater>
 


  2.设置子Repeater 控件的DataSource 属性: 

<asp:repeater ... datasource=’<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>’>
 


  3.在页面顶部添加下列指令(请注意,是在.aspx文件中): 

  <%@ Import Namespace="System.Data" %>
  在.cs文件中,将Page_Load中的注释部分(//这里将要插入子表的数据绑定)替换成下列代码: 

SqlDataAdapter cmd2 = new SqlDataAdapter("select * from titleauthor",cnn);cmd2.Fill(ds,"titles");ds.Relations.Add("myrelation",ds.Tables["authors"].Columns["au_id"],ds.Tables["titles"].Columns["au_id"]);
 


  4.保存并编译应用程序。
  .在浏览器中察看修改后的页面。显示格式类似于下面的格式: 

172-32-1176 PS3333 213-46-8915 BU1032 BU2075 238-95-7766 PC1035 267-41-2394 BU1111 TC7777 ... 
 


完整的代码 

Nestedrepeater.aspx <%@ Page Language=C# Inherits="yourprojectname.nestedrepeater" %><%@ Import Namespace="System.Data" %>
<html><body><form runat=server>
<!-- start parent repeater --><asp:repeater id="parent" runat="server">  <itemtemplate>   <b><%# DataBinder.Eval(Container.DataItem,"au_id") %></b><br>
   <!-- start child repeater -->   <asp:repeater id="child" datasource=’<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>’ runat="server">    <itemtemplate>      <%# DataBinder.Eval(Container.DataItem, "["title_id"]")%><br>     </itemtemplate>   </asp:repeater>   <!-- end child repeater -->
 </itemtemplate></asp:repeater><!-- end parent repeater -->
</form></body></html>Nestedrepeater.aspx.cs using System;using System.Data;using System.Data.SqlClient;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;
namespace yourprojectname{ public class nestedrepeater : System.Web.UI.Page  {   protected System.Web.UI.WebControls.Repeater parent;   public nestedrepeater()   {     Page.Init += new System.EventHandler(Page_Init);   }   public void Page_Load(object sender, EventArgs e)   {     //Create the connection and DataAdapter for the Authors table.     SqlConnection cnn = new SqlConnection("server=(local);database=pubs;uid=sa;pwd=;");     SqlDataAdapter cmd1 = new SqlDataAdapter("select * from authors",cnn);
     //Create and fill the DataSet.     DataSet ds = new DataSet();     cmd1.Fill(ds,"authors");
     //Create a second DataAdapter for the Titles table.     SqlDataAdapter cmd2 = new SqlDataAdapter("select * from titleauthor",cnn);     cmd2.Fill(ds,"titles");
     //Create the relation bewtween the Authors and Titles tables.     ds.Relations.Add("myrelation",     ds.Tables["authors"].Columns["au_id"],     ds.Tables["titles"].Columns["au_id"]);
     //Bind the Authors table to the parent Repeater control, and call DataBind.     parent.DataSource = ds.Tables["authors"];     Page.DataBind();
     //Close the connection.     cnn.Close();   }   private void Page_Init(object sender, EventArgs e)   {     InitializeComponent();   }   private void InitializeComponent()   {     this.Load += new System.EventHandler(this.Page_Load);   }  }} 
 

--------------------编程问答--------------------
引用 9 楼 loverdotnet 的回复:
简单,用js和gridview结合


贴代码哈! --------------------编程问答-------------------- up --------------------编程问答-------------------- 关注
--------------------编程问答-------------------- 做过,有空再帮你找找代码 --------------------编程问答-------------------- 我想你是要一个GridView嵌套的吧。给你一个我做过的例子。把GridView2放在GridView的一个模板列里面,然后做个换行。
通过div来控制GirdView2的隐藏和显示。

//一张图片是显示的“+”,一张是显示的“-”
function expandcollapse(obj,row)
        {
            var div = document.getElementById(obj);
            var img = document.getElementById('img' + obj);
            
            if (div.style.display == "none")
            {
                div.style.display = "block";
                if (row == 'alt')
                {
                    img.src = "../images/minus.gif";
                }
                else
                {
                    img.src = "../images/minus.gif";
                }
            }
            else
            {
                div.style.display = "none";
                if (row == 'alt')
                {
                    img.src = "../images/plus.gif";
                }
                else
                {
                    img.src = "../images/plus.gif";
                }
            }
        }


<asp:GridView ID="GridView1" Width="100%" AutoGenerateColumns="false" DataKeyNames="id" CssClass="Grid1"
                         ShowFooter="true" runat="server" OnRowDataBound="GridView1_RowDataBound" AllowSorting="true">
                        <Columns>
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <div id="divimg_<%# Eval("id") %>">
                                    <img id="imgdiv<%# Eval("id") %>"  style="cursor:hand" alt="" onclick="expandcollapse('div<%# Eval("id") %>', 'one');" width="9" border="0" src="../images/plus.gif"/>
                                    </div>
                                </ItemTemplate>
                            </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <tr>
                                        <td colspan="100%">
                                            <div id="div<%# Eval("id") %>" align="Left" style="display:none;left:15px;position:relative;" >
                                                <asp:GridView ID="GridView2"  Width="670px"
                                                    AutoGenerateColumns="false" runat="server" DataKeyNames="id2" 
                                                     OnRowDataBound="GridView2_RowDataBound">
                                                    <Columns>
                                                        <asp:TemplateField HeaderText="ID2" >
                                                            <ItemTemplate><%# Eval("id2")%></ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="右闭区间" >
                                                            <ItemTemplate><%# Eval("right_scale")%></ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="返还值">
                                                            <ItemTemplate><%# Eval("rebate_value")%></ItemTemplate>
                                                        </asp:TemplateField>
                                                    </Columns>
                                               </asp:GridView>
                                            </div>
                                         </td>
                                    </tr>
                    </ItemTemplate>        
                </asp:TemplateField>     
            </Columns>
                    </asp:GridView>


           protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
   {
     GridViewRow row = e.Row;
             string strSort = string.Empty;
             if (row.DataItem == null)
             {
                return;
             }

             GridView gv = new GridView();
             gv = (GridView)row.FindControl("GridView2");

             string id = ((DataRowView)e.Row.DataItem)["id"].ToString();//获取GridView当前行的id字段的值
               if (gv.UniqueID == String.Empty)
             {
                gv.PageIndex = 0;
                gv.EditIndex = -1;
                ClientScript.RegisterStartupScript(GetType(), "Expand", "<SCRIPT LANGUAGE='javascript'>expandcollapse('div"
                    + id + "','one');</script>");
             }
             //此处代码是根据id获取要绑定到第二个GridView上的DataTable。
               DataTable dt = table;
             gv.DataSource = dt;
             gv.DataBind();
  }
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,