下面是模仿的DropDownList的效果，支持图片，多列，换行等。查看例子

WebDropDownList.aspx

<%@ Page language="c#" Codebehind="WebDropDownList.aspx.cs"validateRequest="false"
 AutoEventWireup="false" Inherits="eMeng.WebDropDownList" %>
<HTML>
<HEAD>
<title>模拟下拉列表框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>BODY {
FONT: 12px 宋体
}
TD {
FONT: 12px 宋体
}
DIV {
FONT: 12px 宋体
}
LABEL {
PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px; PADDING-TOP: 3px; HEIGHT: 19px
}
.link_box {
CURSOR: default; TEXT-ALIGN: left
}
.link_head {
BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; BORDER-LEFT: 2px inset; WIDTH: 100%;
BORDER-BOTTOM: 2px inset; HEIGHT: 23px
}
.link_text {
PADDING-LEFT: 2px; BACKGROUND: #fff
}
.link_arrow0 {
BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BACKGROUND: buttonface;
FONT: 14px marlett; BORDER-LEFT: 2px outset; WIDTH: 22px;
 BORDER-BOTTOM: 2px outset; HEIGHT: 100%; TEXT-ALIGN: center
}
.link_arrow1 {
BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 0px;
BORDER-TOP: buttonshadow 1px solid; PADDING-LEFT: 2px;
BACKGROUND: buttonface; PADDING-BOTTOM: 0px; FONT: 14px marlett;
BORDER-LEFT: buttonshadow 1px solid; WIDTH: 22px; PADDING-TOP: 2px;
BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 100%; TEXT-ALIGN: center
}
.link_value {
BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FILTER: alpha(opacity:0);
VISIBILITY: hidden; OVERFLOW-X: hidden; OVERFLOW: auto; BORDER-LEFT: 1px solid;
BORDER-BOTTOM: 1px solid; POSITION: absolute
}
.link_record0 {
BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; BACKGROUND: #fff;
WIDTH: 100%; COLOR: #000; HEIGHT: 20px
}
.link_record1 {
BORDER-TOP: #047 1px solid; PADDING-LEFT: 2px; BACKGROUND: #058;
WIDTH: 100%; COLOR: #fe0; HEIGHT: 20px
}
</style>
<script>
var dropShow=false
var currentID
function dropdown(el){
if(dropShow){
dropFadeOut()
}else{
currentID=el
el.style.visibility="visible"
dropFadeIn()
}
}
function dropFadeIn(){//选单淡入的效果
if(currentID.filters.alpha.opacity<100){
currentID.filters.alpha.opacity+=20
fadeTimer=setTimeout("dropFadeIn()",50)
}else{
dropShow=true
clearTimeout(fadeTimer)
}
}
function dropFadeOut(){//选单淡出的效果
if(currentID.filters.alpha.opacity>0){
clearTimeout(fadeTimer)
currentID.filters.alpha.opacity-=20
fadeTimer=setTimeout("dropFadeOut()",50)
}else{
dropShow=false
currentID.style.visibility="hidden"
}
}
function dropdownHide(){
if(dropShow){
dropFadeOut()
dropShow=false
}
}
function hiLight(el){//高亮度显示指标位置
if(dropShow){
for(i=0;i<el.parentElement.childNodes.length;i++){
el.parentElement.childNodes(i).className="link_record0"
}
el.className="link_record1"
}
}
function CheckMe(el){//替换显示内容
document.all.text1.innerText=el.innerText
}
document.οnclick=dropdownHide
</script>
</HEAD>
<body text="#000000" οnlοad="document.all.form1.reset()">
<div style="padding:10px;border-bottom:2px solid red">模拟下拉框</div>
<form id="form1" οnsubmit="alert(city.value)" runat="server">
<table>
<tr>
<td>
<div class="link_box" onselectstart="return false" style="WIDTH: 100px">
<div class="link_head" οnclick="dropdown(value1)">
<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
 <td>
  <div class="link_text"><nobr><label id="text1">请选择？</label></nobr></div>
 </td>
 <td align="right" width="22">
  <div οnmοuseup="this.className='link_arrow0'" class="link_arrow0"
  οnmοusedοwn="this.className='link_arrow1'" οnmοuseοut="this.className='link_arrow0'">6</div>
 </td>
</tr>
</table>
</div>
<div class="link_value" id="value1" style="WIDTH: 500px; HEIGHT: 300px">
<asp:datagrid id="DataGrid1" runat="server" AutoGenerateColumns="False" Font-Size="12px" Width="100%"
ShowHeader="False">
<Columns>
<asp:BoundColumn DataField="Title" SortExpression="Title"
 DataFormatString="<img src='http://dotnet.aspx.cc/Images/meng.gif' align='absmiddle'> {0}">
 </asp:BoundColumn>
<asp:BoundColumn DataField="CreateDate" SortExpression="CreateDate"
 HeaderText="" DataFormatString="{0:yyyy年MM月dd日}"></asp:BoundColumn>
</Columns>
</asp:datagrid>
<div id="mx">
<div class="link_record0" οnmοuseοver="hiLight(this)"
 οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>北京市</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
 οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>上海市</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
 οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>河南省</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
 οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>深圳市</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
 οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>大连市</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
 οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>云南省</label></div>
</div>
</div>
</div>
</td>
<td><input type="hidden" value="您尚未选择" name="city"> <input type="submit" value="确定">
</td>
</tr>
</table>
</form>
</body>
</HTML>

WebDropDownList.aspx.cs

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.OleDb;

namespace eMeng
{
/// <summary>
/// ShowList 的摘要说明。
/// </summary>
public class WebDropDownList : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid DataGrid1;

private void Page_Load(object sender, System.EventArgs e)
{   
DataGrid1.Columns[0].ItemStyle.Width = Unit.Pixel(400);
DataGrid1.Columns[1].ItemStyle.Width = Unit.Pixel(100);
Data_Bind();
}

public void Data_Bind()
{
Response.CacheControl = "no-cache";
Response.Expires = -1;
try
{
string strSQL = "SELECT id,objectGuid,Title,CreateDate,HitCount FROM Document ORDER BY id DESC";
string cnString = (new Connection()).ConnectionString;
OleDbConnection cn = new OleDbConnection(cnString);
cn.Open();
OleDbCommand cmd = new OleDbCommand(strSQL, cn);
DataGrid1.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection);
DataGrid1.DataBind();
cn.Close();
cn.Dispose();
cn = null;
cmd.Dispose();
cmd = null;
}
catch(OleDbException myOleDbException)
{
Response.Write("错误：" + myOleDbException.Message + ":" + myOleDbException.HelpLink);
Response.End();
}
}
private void DataGrid1_ItemDataBound(object sender,System.Web.UI.WebControls.DataGridItemEventArgs e)
{

if( e.Item.ItemIndex != -1 )
{
e.Item.Attributes.Add("onmouseover", "this.bgColor='#C1D2EE'");
e.Item.Attributes.Add("onclick",
"document.all.text1.innerText=this.cells[0].innerText;document.all.form1.city.value=this.cells[0].innerText;");
if (e.Item.ItemIndex % 2 == 0 )
{
 e.Item.Attributes.Add("bgcolor", "#FFFFFF");
 e.Item.Attributes.Add("onmouseout", "this.bgColor=document.getElementById('DataGrid1').getAttribute('singleValue')");
}
else
{
 e.Item.Attributes.Add("bgcolor", "oldlace");
 e.Item.Attributes.Add("onmouseout", "this.bgColor=document.getElementById('DataGrid1').getAttribute('oldValue')");
}
}
else
{
DataGrid1.Attributes.Add("oldValue", "oldlace");
DataGrid1.Attributes.Add("singleValue", "#FFFFFF");
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{   
this.DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}

转载于:https://www.cnblogs.com/hzuIT/articles/504704.html

带图片的，多列的DropDownList的实现相关推荐

  1. 关于excel导入带图片

    public String importExcel(MultipartFile file) {if (file == null) {throw new CustomException("当前 ...

  2. jxl实现写入excel模板及导出(带图片)

    在上一片博客中我用的是freemarker(操作简单),试了很多种方法就是没有把带图片的excel导出来,没办法就换jxl来实现.好了下面就开始进入正题: 第一步:pom.xml中添加jxl的依赖如下 ...

  3. Excel导出带图片详解

    Excel导出带图片详解 导出模板 一.引入的jar <dependency><groupId>org.apache.poi</groupId><artifa ...

  4. Java带图片的excel数据导入

    带图片的EXCEL数据导入 这里使用的是POI,所以这里使用的很杂,不过方便对它们的了解.模板下载与图片导出到excel都不一样. 下面会把对应连接贴上. 带入依赖:不要使用3.17的版本,直接上代码 ...

  5. 如何制作带图片的中药标签

    最近在网上看到有一个小学生手绘了很多中草药,并将其药材特性记录在旁,图文并茂,堪称一个手绘版的中草药图鉴.其实我们使用条码标签软件也可以设计制作此类标签,制作好的标签可以粘贴在中药药柜上,外包装盒,方 ...

  6. springboot整合easypoi导入带图片excel并将图片上传到FastDFS服务器

    springboot整合easypoi导入带图片excel并将图片上传到FastDFS服务器 1.使用easypoi导入excel 链接: easypoi详细文档. 2.导入easypoi依赖,版本可 ...

  7. poi读取excel中的内容（带图片）

    项目中有一需求:需要读取excel中的信息,带图片,需要将每一行的图片,做对应,整理方法如下: 主要逻辑: 1,获取excel对象, 2,读取excel中所有的图片流,将图片所处的位置和图片流存在ma ...

  8. 导出带图片的Excel报表

    导出带图片的Excel报表 先引用 Microsoft.Office.Tools.Excel.v4.0.Utilities.dll程序集,然后在后台页面引用using Excel = Microsof ...

  9. 导出带图片的excel

    昨天导excel 发现有带图片的,找到了ruoyi人家说得自己扩展,留了个思路终于放进去了 第一步要把url转为byte[] /*** 从输入流中获取数据** @param inStream 输入流* ...

最新文章

  1. 我们为什么选择Kubernetes
  2. Hadoop学习笔记：MapReduce框架详解
  3. 移动端给img加上max-width:100%
  4. hdu 3449(依赖背包)
  5. A English version for my blog start.
  6. python的函数_Python 返回函数+匿名函数
  7. java opencv 平移_Java中使用opencv
  8. java websocket client，java基础面试笔试题
  9. python求最大回文数_python最长回文串算法
  10. 20162302 第七周作业
  11. 在mysql数据库中创建Oracle数据库中的scott用户表
  12. Visio 2007 下载安装
  13. DNS各地延迟排行榜
  14. 坚果pro2官方rom_坚果pro2线刷包_坚果pro2刷机包_坚果pro2固件包_坚果pro2救砖包 - 线刷宝ROM中心...
  15. 调用百度语音合成API，Qt实现语音合成，Qt语音合成
  16. python解码gbk_python编码：gbk编码与解码
  17. 高项题目--工期计算
  18. 新年新故事 | Nice 兔 Meet U
  19. 美元和人民币 货币转换
  20. Java 杨辉三角

热门文章

  1. 途牛网站无线架构变迁实践
  2. 监控视频长度压缩算法
  3. s3-1 数据链路层概述
  4. CVE-2017-0004相关lsass拒绝服务漏洞杂谈
  5. python文件压缩
  6. Nginx research, nginx module development
  7. Struts2学习8--文件上传（多个文件上传）
  8. 字符串 编码转换 ATL
  9. HTML5的未来 - HTML5 还能走多远？
  10. 解决计算机名修改或作业移植导致的服务器名问题.sql