现在我有一个项目,需要实现如图功能,当我要填写学校时,自动弹图本模拟对话框,让用户选择学校,想知道,这个是如何实现的,我想用JQ来实现,但我想知道,这些数据如何得到!?
Ajax 弹窗插件就可以了啊
jquery ui组件里有dailog控件,数据当然是从数据库里读出来的。
数据当然是一个一个添加了 怎么可能有不劳而获的事情 弄个excel导到数据库里
--給你一個自定義的用戶控件
jquery.js.
--前臺
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DropDownSelect.ascx.cs"
Inherits="DropDownSelect" %>
<style type="text/css">
.x-combo-list-item {
padding:2px;
border:1px solid;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
border-color:#fff;
cursor:pointer;
}
.dropList-item
{
padding:2px;
border:1px solid;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
border-color:#fff;
cursor:pointer;
}
.x-shadow {
display: none;
position: absolute;
overflow: hidden;
left:0;
top:0;
}
.x-shadow * {
overflow: hidden;
}
.x-shadow * {
padding: 0;
border: 0;
margin: 0;
clear: none;
zoom: 1;
}
.x-shadow .xstc, .x-shadow .xsbc {
height: 6px;
float: left;
}
.x-shadow .xstl, .x-shadow .xstr, .x-shadow .xsbl, .x-shadow .xsbr {
width: 6px;
height: 6px;
float: left;
}
.x-shadow .xsc {
width: 100%;
}
.x-shadow .xsml, .x-shadow .xsmr {
width: 6px;
float: left;
height: 100%;
}
.x-shadow .xsmc {
float: left;
height: 100%;
background: transparent;
}
.x-shadow .xst, .x-shadow .xsb {
height: 6px;
overflow: hidden;
width: 100%;
}
.x-shadow .xsml {
background: transparent repeat-y 0 0;
}
.x-shadow .xsmr {
background: transparent repeat-y -6px 0;
}
.x-shadow .xstl {
background: transparent no-repeat 0 0;
}
.x-shadow .xstc {
background: transparent repeat-x 0 -30px;
}
.x-shadow .xstr {
background: transparent repeat-x 0 -18px;
}
.x-shadow .xsbl {
background: transparent no-repeat 0 -12px;
}
.x-shadow .xsbc {
background: transparent repeat-x 0 -36px;
}
.x-shadow .xsbr {
background: transparent repeat-x 0 -6px;
}
.x-shadow .xsmc {
background-image: url(images/shadow-c.png);
}
.x-shadow .xsml, .x-shadow .xsmr {
background-image: url(images/shadow-lr.png);
}
.x-shadow .xstl, .x-shadow .xstc, .x-shadow .xstr, .x-shadow .xsbl, .x-shadow .xsbc, .x-shadow .xsbr{
background-image: url(images/shadow.png);
}
.checkbox
{
background-image: url(images/unchecked.gif) ; background-repeat:no-repeat; border:1px solid green; border:0px; background-position:top 0;
}
</style>
<script language="javascript" type="text/javascript">
var <%=drowdownCheckList.ClientID %>isShow='N';
$(document.body).ready(function()
{
<%=drowdownCheckList.ClientID %>PageInint();
$(document).click(function(event)
{
<%=drowdownCheckList.ClientID %>PageClick(event);
});
$("#<%=drowdownCheckList.ClientID%>").find("img").click(function()
{
if (<%=drowdownCheckList.ClientID %>isShow=='N')
{
$("#<%=checkItemList.ClientID%>").show();
$("#<%=shadow.ClientID %>").show();
<%=drowdownCheckList.ClientID %>isShow='Y';
}
else
{
$("#<%=checkItemList.ClientID%>").hide();
$("#<%=shadow.ClientID %>").hide();
<%=drowdownCheckList.ClientID %>isShow='N';
}
});
$("#<%=showSELECTVAL.ClientID%>").click(function()
{
if (<%=drowdownCheckList.ClientID %>isShow=='N')
{
$("#<%=checkItemList.ClientID%>").show();
$("#<%=shadow.ClientID %>").show();
<%=drowdownCheckList.ClientID %>isShow='Y';
}
else
{
$("#<%=checkItemList.ClientID%>").hide();
$("#<%=shadow.ClientID %>").hide();
<%=drowdownCheckList.ClientID %>isShow='N';
}
});
$("#<%=drowdownCheckList.ClientID %>").find("div.dropList-item").hover(function()
{
$(this).css({"background-color":"#dfe8f6",border:"1px dashed #7EADD9"});
},function()
{
$(this).css({"background-color":"#ffffff",border:"1px solid #fff"});
});
$("#<%=drowdownCheckList.ClientID %>").find("div.dropList-item").find("input[type=checkbox]").click(function()
{
var newVal=null;
var labVal=null;
var ckIdval=null;
$("#<%=drowdownCheckList.ClientID %>").find("div.dropList-item").find("input[type=checkbox][checked]").each(function()
{
var val=$(this).val();
var id=$(this).attr("id");
var lab=$.trim($("#<%=drowdownCheckList.ClientID %>").find("div.dropList-item").find("label[for="+id+"]").html());
if(newVal==null)
{
newVal="'"+val+"'";
labVal= lab;
ckIdval=id;
}
else
{
newVal="'"+val+"',"+newVal;
labVal=lab+","+labVal;
ckIdval=id+","+ckIdval;
}
});
if(newVal!=null)
{
$("#<%=hiddenval.ClientID%>").val(newVal);
$("#<%=showSELECTVAL.ClientID %>").val(labVal);
$("#<%=hiddenchid.ClientID %>").val(ckIdval);
}
else
{
$("#<%=hiddenval.ClientID%>").val("");
$("#<%=showSELECTVAL.ClientID %>").val("");
$("#<%=hiddenchid.ClientID %>").val("");
}
});
});
function <%=drowdownCheckList.ClientID %>PageInint()
{
var val=$("#<%=hiddenchid.ClientID %>").val();
if(val!="")
{
var properties= val.split(",");
for(i=0;i<properties.length;i++)
{
var id= properties[i];
$("#"+id).attr("checked","checked");
}
}
}
function <%=drowdownCheckList.ClientID %>PageClick(event)
{
var mLeft=$("#<%=drowdownCheckList.ClientID%>").offset().left;
var mTop=$("#<%=drowdownCheckList.ClientID%>").offset().top;
var mWidth=$("#<%=drowdownCheckList.ClientID%>").width();
var mHeight=$("#<%=drowdownCheckList.ClientID%>").attr("ahei");
mHeight=parseFloat(mHeight);
var bodyScrollTop= document.documentElement.scrollTop || document.body.scrollTop;
var bodyScrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
bodyScrollTop=event.clientY+bodyScrollTop;
bodyScrollLeft=event.clientX+bodyScrollLeft;
var lLeft=mLeft+mWidth;
var lTop=mTop+mHeight+20;
if(!(bodyScrollTop>=mTop && bodyScrollTop<=lTop && bodyScrollLeft>=mLeft && bodyScrollLeft<=lLeft) && <%=drowdownCheckList.ClientID %>isShow=='Y')
{
$("#<%=checkItemList.ClientID%>").hide();
$("#<%=shadow.ClientID %>").hide();
<%=drowdownCheckList.ClientID %>isShow='N';
}
}
</script>
<div id='drowdownCheckList' runat="server" style="margin: 0px; padding: 0px; white-space: nowrap;
word-spacing: normal;">
<input type="text" id="showSELECTVAL" runat="server" style="background-color: #fff;
border: 1px solid #7eadd9; white-space: pre-line; line-height: 18px; vertical-align: middle;
height: 17px; margin-bottom: 1px; padding-top: 2px; background-image: url(images/text-bg.gif);
padding-bottom: 0px; padding-left: 3px; padding-right: 3px; background-repeat: repeat-x;
font-family: Arial;" /><img style="white-space: pre-line; width: 17px; position: absolute; border-bottom: 1px solid #7eadd9;
background-position: -51px 0px; cursor: pointer; height: 20px; top: 0px; background-image: url(images/trigger.gif);"
src="Images/s.gif" alt='' />
<input type="hidden" id="hiddenval" runat="server" style="display: none" />
<input type="hidden" id="hiddenchid" runat="server" style="display: none" />
<div style="z-index: 10999; display: block; margin-top: 26px; display: none; margin-left: -4px;"
class="x-shadow" runat="server" id="shadow">
<div class="xst">
<div class="xstl">
</div>
<div style="width: <%=(Width-12)%>px;" class="xstc">
</div>
<div class="xstr">
</div>
</div>
<div style="height: <%=Height-12%>px;" class="xsc">
<div class="xsml">
</div>
<div style="width: <%=(Width-12)%>px;" class="xsmc">
</div>
<div class="xsmr">
</div>
</div>
<div class="xsb">
<div class="xsbl">
</div>
<div style="width: <%=(Width-12)%>px;" class="xsbc">
</div>
<div class="xsbr">
</div>
</div>
</div>
<div style="z-index: 11000; margin-left: 0px; font-size: 12px; border: 1px solid #98c0f4;
font-family: Arial; display: none; position: absolute; top: 22px; left: 0px;"
id="checkItemList" runat="server">
<div style="overflow: auto; background: white;" class="x-combo-list-inner" runat="server"
id="ck_content">
<div class="dropList-item">
<input type="checkbox" value="1" id="drowdownCheckList_ck1" />
<label for="drowdownCheckList_ck1">
Test1</label></div>
<div class="dropList-item">
<input type="checkbox" value="2" id="drowdownCheckList_ck2" />
<label for="drowdownCheckList_ck2">
Test2</label></div>
<div class="dropList-item">
<input type="checkbox" value="3" id="drowdownCheckList_ck3" /><label for="drowdownCheckList_ck3">
Test3</label></div>
<div class="dropList-item">
<input type="checkbox" value="4" id="drowdownCheckList_ck4" /><label for="drowdownCheckList_ck4">
Test4</label></div>
<div class="dropList-item">
<input type="checkbox" value="5" id="drowdownCheckList_ck5" /><label for="drowdownCheckList_ck5">
Test5</label></div>
<div class="dropList-item">
<input type="checkbox" value="6" id="drowdownCheckList_ck6" /><label for="drowdownCheckList_ck6">
Test6</label></div>
<div class="dropList-item">
<input type="checkbox" value="7" id="drowdownCheckList_ck7" /><label for="drowdownCheckList_ck7">
Test7</label></div>
</div>
</div>
</div>
---後臺
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class DropDownSelect : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
this.Page.ClientScript.RegisterClientScriptInclude("JQUERY", "JS/jquery-1.3.2.min.js");
if (!IsPostBack)
{
Response.Write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
drowdownCheckList.Style.Add("width", Width.ToString() + "px");
drowdownCheckList.Style.Add("position", position.ToString());
drowdownCheckList.Style.Add("left", Left.ToString() + "px");
drowdownCheckList.Style.Add("top", Top.ToString() + "px");
drowdownCheckList.Attributes.Add("ahei", Height.ToString());
showSELECTVAL.Style.Add("width", (Width - 33).ToString() + "px");
shadow.Style.Add("width", Width.ToString() + "px");
shadow.Style.Add("height", Height.ToString() + "px");
checkItemList.Style.Add("Width", (Width - 10).ToString() + "px");
checkItemList.Style.Add("height", (Height - 2).ToString() + "px");
ck_content.Style.Add("height", (Height - 2).ToString() + "px");
ck_content.Style.Add("width", (Width - 10).ToString() + "px");
if (Items.Count > 0)
{
int i = 0;
ck_content.InnerHtml = "";
foreach (ListItem li in Items)
{
i++;
ck_content.InnerHtml = ck_content.InnerHtml + " <div class=\"dropList-item\"> <input type=\"checkbox\" value=\"" + li.Value + "\" id=\"" + this.ClientID + "drowdownCheckList_ck" + i.ToString() + "\" /><label for=\"" + this.ClientID + "drowdownCheckList_ck" + i.ToString() + "\"> " + li.Text + "</label></div>";
}
}
}
}
private ListItemCollection listCollection = new ListItemCollection();
/// <summary>
///
/// 內容值
/// </summary>
public ListItemCollection Items
{
get { return listCollection; }
set { listCollection = value; }
}
/// <summary>
/// 選擇值
/// </summary>
public string SelectValue
{
get { return hiddenval.Value; }
}
private int _width = 110;
private int _height = 200;
private Position _position = Position.Relative;
private int _top = 0;
private int _left = 0;
/// <summary>
/// 寬度
/// </summary>
public int Width
{
get { return _width; }
set { _width = value; }
}
/// <summary>
/// 高度
/// </summary>
public int Height
{
get { return _height; }
set { _height = value; }
}
/// <summary>
/// 位置
/// </summary>
public Position position
{
get { return _position; }
set { _position = value; }
}
/// <summary>
/// Top
/// </summary>
public int Top
{
get { return _top; }
set { _top = value; }
}
/// <summary>
/// Left
/// </summary>
public int Left
{
get { return _left; }
set { _left = value; }
}
public enum Position
{
Relative,
Absolute,
Fixed
}
}