请问如何在一个界面中显示两列图片!

时间:2021-08-02 19:32:16
我以前用DataGrid可以实现一列图片的显示,但是为了多显示些我想让他显示两列,可是简单的添加列显示和第一列一样,请问有没有好办法解决这一问题,谢谢.

6 个解决方案

#1


<form id="Form1" method="post" runat="server">
<table>
 <asp:Repeater id="Repeater1" runat="server">  
   <ItemTemplate>
<tr><td><imge src='<%# Container.DataItem("imagesrc")%>'></imge></td>
   </ItemTemplate>
   <AlternatingItemTemplate>
    <td><imge src='<%# Container.DataItem("imagesrc")%>'></imge></td></tr>
   </AlternatingItemTemplate>  
 </asp:Repeater></table>
</form>

#2


像这种情况使用datalist最方便了。

#3


使用datalist!

#4


使用一楼的方法,怎么没有显示图片,连Repeater的影子也没看到,希望能在稍微指点一下,谢谢!

#5


还请推荐DalaList的大虾们做一下简单的指点,小弟稍一了解,立即结账!

#6


将数据取到xml dom用javascript xpath解析即可  随便你怎么显示都可以:

function displayPicture()
{
document.getElementById("Table6").style.display="inline";
var pNode=product.selectNodes("//root/product");
var rowlenlen=pNode.length%3==0?Math.round(pNode.length/3):Math.round(pNode.length/3)+1;
if(rowlenlen>1)
{
for(var k=1;k<rowlenlen;k++)
{
var tr=document.getElementById("Table6").insertRow();
tr.height=150;
for(var u=0;u<6;u++)
{
var td=tr.insertCell();
td.style.borderBottom="2px solid #3399ff";
}
}
}
// ss
for(var i=0;i<document.getElementById("Table6").rows.length;i++)
{
try{
if(i*3>=pNode.length)
break;
for(var j=0;j<6;j++)
{
if(j/2>=pNode.length)
break;
if(j%2==0)
{
document.getElementById("Table6").rows(i).cells(j).title="单击查看详细情况或定购产品";
document.getElementById("Table6").rows(i).cells(j).innerHTML="<a href='productdetail.aspx?id="+pNode[3*i+j/2].getAttribute("productfid")+"'><img id='img"+pNode[3*i+j/2].getAttribute("productfid")+"' onmouseover=\"opacitypicture(this,true)\" onmouseout=\"opacitypicture(this,false)\" style='filter:alpha(opacity=100)' border=0 src="+pNode[3*i+j/2].getAttribute("fpicture")+" width=130 height=130></a>";
}
else
{
document.getElementById("Table6").rows(i).cells(j).valign="bottom";
document.getElementById("Table6").rows(i).cells(j).innerHTML="[编号:"+pNode[3*i+(j-1)/2].getAttribute("fcode")+"]"+"<br>";
document.getElementById("Table6").rows(i).cells(j).innerHTML+="[<a href='productdetail.aspx?id="+pNode[3*i+(j-1)/2].getAttribute("productfid")+"'>查看详情]";
}
}
}catch(error){}
}
}
function opacitypicture(objimg,flag)
{
objimg.filters.alpha.opacity=flag==true?100:100;
}

#1


<form id="Form1" method="post" runat="server">
<table>
 <asp:Repeater id="Repeater1" runat="server">  
   <ItemTemplate>
<tr><td><imge src='<%# Container.DataItem("imagesrc")%>'></imge></td>
   </ItemTemplate>
   <AlternatingItemTemplate>
    <td><imge src='<%# Container.DataItem("imagesrc")%>'></imge></td></tr>
   </AlternatingItemTemplate>  
 </asp:Repeater></table>
</form>

#2


像这种情况使用datalist最方便了。

#3


使用datalist!

#4


使用一楼的方法,怎么没有显示图片,连Repeater的影子也没看到,希望能在稍微指点一下,谢谢!

#5


还请推荐DalaList的大虾们做一下简单的指点,小弟稍一了解,立即结账!

#6


将数据取到xml dom用javascript xpath解析即可  随便你怎么显示都可以:

function displayPicture()
{
document.getElementById("Table6").style.display="inline";
var pNode=product.selectNodes("//root/product");
var rowlenlen=pNode.length%3==0?Math.round(pNode.length/3):Math.round(pNode.length/3)+1;
if(rowlenlen>1)
{
for(var k=1;k<rowlenlen;k++)
{
var tr=document.getElementById("Table6").insertRow();
tr.height=150;
for(var u=0;u<6;u++)
{
var td=tr.insertCell();
td.style.borderBottom="2px solid #3399ff";
}
}
}
// ss
for(var i=0;i<document.getElementById("Table6").rows.length;i++)
{
try{
if(i*3>=pNode.length)
break;
for(var j=0;j<6;j++)
{
if(j/2>=pNode.length)
break;
if(j%2==0)
{
document.getElementById("Table6").rows(i).cells(j).title="单击查看详细情况或定购产品";
document.getElementById("Table6").rows(i).cells(j).innerHTML="<a href='productdetail.aspx?id="+pNode[3*i+j/2].getAttribute("productfid")+"'><img id='img"+pNode[3*i+j/2].getAttribute("productfid")+"' onmouseover=\"opacitypicture(this,true)\" onmouseout=\"opacitypicture(this,false)\" style='filter:alpha(opacity=100)' border=0 src="+pNode[3*i+j/2].getAttribute("fpicture")+" width=130 height=130></a>";
}
else
{
document.getElementById("Table6").rows(i).cells(j).valign="bottom";
document.getElementById("Table6").rows(i).cells(j).innerHTML="[编号:"+pNode[3*i+(j-1)/2].getAttribute("fcode")+"]"+"<br>";
document.getElementById("Table6").rows(i).cells(j).innerHTML+="[<a href='productdetail.aspx?id="+pNode[3*i+(j-1)/2].getAttribute("productfid")+"'>查看详情]";
}
}
}catch(error){}
}
}
function opacitypicture(objimg,flag)
{
objimg.filters.alpha.opacity=flag==true?100:100;
}