带图片的，多列的dropDownList的实现
2024-07-21 02:23:20
供稿：网友
下面是模仿的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.onclick=dropdownhide
</script>
</head>
<body text="#000000" onload="document.all.form1.reset()">
<div style="padding:10px;border-bottom:2px solid red">模拟下拉框</div>
<form id="form1" onsubmit="alert(city.value)" runat="server">
<table>
<tr>
<td>
<div class="link_box" onselectstart="return false" style="width: 100px">
<div class="link_head" onclick="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 onmouseup="this.classname='link_arrow0'" class="link_arrow0"
onmousedown="this.classname='link_arrow1'" onmouseout="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='/uploadpic/2007-2/200726203726257.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" onmouseover="hilight(this)"
onclick="checkme(this);document.all.form1.city.value=this.innertext"><label>北京市</label></div>
<div class="link_record0" onmouseover="hilight(this)"
onclick="checkme(this);document.all.form1.city.value=this.innertext"><label>上海市</label></div>
<div class="link_record0" onmouseover="hilight(this)"
onclick="checkme(this);document.all.form1.city.value=this.innertext"><label>河南省</label></div>
<div class="link_record0" onmouseover="hilight(this)"
onclick="checkme(this);document.all.form1.city.value=this.innertext"><label>深圳市</label></div>
<div class="link_record0" onmouseover="hilight(this)"
onclick="checkme(this);document.all.form1.city.value=this.innertext"><label>大连市</label></div>
<div class="link_record0" onmouseover="hilight(this)"
onclick="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
}
}
