我正在使用Ajax和asp控件开发一个多列组合框。当我们在页面上使用一个实例时，我的控件工作正常。但是当我们在一个页面上使用多个实例时停止工作。
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="BssWebDataCombo.ascx.cs" Inherits="BssWebDataCombo" ClientIDMode="Predictable" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxControl" %>
<link rel="stylesheet" href="GridViewCSSThemes/YahooGridView.css" type="text/css" media="screen" />
<%--Mouse hover start--%>
<script type = "text/javascript">
var backcolorselect = "orange";
var backcolorfirstrow = "#F5F5F5";
var backcoloralternetrow = "#CCDDFB";
function MouseEvents(objRef, evt) {
//var checkbox = objRef.getElementsByTagName("input")[0];
if (evt.type == "mouseover") {
objRef.style.backgroundColor = backcolorselect; //"orange";
}
else {
if (objRef.rowIndex % 2 == 0) {
//Alternating Row Color
objRef.style.backgroundColor = backcoloralternetrow; // "#9AD8ED";
}
else {
objRef.style.backgroundColor = backcolorfirstrow; // "white";
}
}
}
</script>
<%--Mouse hover end--%>
<%--Set dropdown visibility start--%>
<script type="text/javascript">
//dropdown arrow key allways visible
function VisibleMe() {
$find('<%= DDE.ClientID%>')._dropWrapperHoverBehavior_onhover();
}
//Row selection using arrow key
var SelectedRow = null;
var SelectedRowIndex = null;
var UpperBound = null;
var LowerBound = null;
function SelectValue(CurrentRow, RowIndex) {
document.getElementById('<%= txtDisplay.ClientID%>').value = (CurrentRow.cells[1].innerHTML == "" ? CurrentRow.cells[2].innerHTML : CurrentRow.cells[1].innerHTML);
closeDatacombo();
}
function SelectRow(CurrentRow, RowIndex) {
document.getElementById('<%= txtSearch.ClientID%>').value = "";
if (SelectedRow == CurrentRow || RowIndex > UpperBound || RowIndex < LowerBound) return;
if (SelectedRow != null) {
if (SelectedRow.style.backgroundColor == backcolorselect) { //"orange") {
}
else {
SelectedRow.style.backgroundColor = SelectedRow.originalBackgroundColor;
SelectedRow.style.color = SelectedRow.originalForeColor;
}
if ((SelectedRowIndex + 1) % 2 == 0) {
//Alternating Row Color
SelectedRow.style.backgroundColor = backcoloralternetrow; //"#9AD8ED";
}
else {
SelectedRow.style.backgroundColor = backcolorfirstrow; //"white";
}
}
if (CurrentRow != null) {
CurrentRow.originalBackgroundColor = CurrentRow.style.backgroundColor;
CurrentRow.originalForeColor = CurrentRow.style.color;
CurrentRow.style.backgroundColor = backcolorselect; //"orange"//'#DCFC5C';
CurrentRow.style.color = 'Black';
}
SelectedRow = CurrentRow;
SelectedRowIndex = RowIndex;
document.getElementById('<%= Hidden_RowIndex.ClientID%>').value = RowIndex;
setFooter();
setTimeout("SelectedRow.focus();", 0);
}
//Select next row
function SelectSibling(e) {
var e = e ? e : window.event;
var KeyCode = e.which ? e.which : e.keyCode;
var cntrlname = document.getElementById('<%= gridEdit.ClientID%>');
var rows = cntrlname.getElementsByTagName("tr");
//alert(SelectedRowIndex + '\r\n' + rows.length);
if (KeyCode == 40) {
if ((SelectedRowIndex + 1) < rows.length) {
SelectRow(SelectedRow.nextSibling, SelectedRowIndex + 1);
}
else {
SelectRow(SelectedRow, SelectedRowIndex);
}
}
else if (KeyCode == 38) {
SelectRow(SelectedRow.previousSibling, SelectedRowIndex - 1);
}
else if (KeyCode == 13) {
SelectedRow.style.backgroundColor = backcolorselect; //"orange";
SelectValue(SelectedRow, SelectedRowIndex);
}
else if (KeyCode == 9) {
SelectedRow.style.backgroundColor = backcolorselect; //"orange";
SelectValue(SelectedRow, SelectedRowIndex);
}
return false;
}
//Ragister on page load
var DDE;
function ShowMe() {
DDE._wasClicked = true;
}
//Show datacombo on textbox focus
function showDataCombo() {
var d = $get('<%= txtDisplay.ClientID%>');
d.click();
if (document.getElementById('<%= divGrid.ClientID%>').scrollHeight > 615) {
document.getElementById('<%= Table1.ClientID%>').style.width = "983px";
}
else {
document.getElementById('<%= Table1.ClientID%>').style.width = "1000px";
}
afterpostback();
setFooter();
document.getElementById('<%= txtSearch.ClientID%>').focus();
}
// Add handler for event DropDownExtender.hiding
// This will cancel hiding the dropdown so we can type in the postcode
function TextBox1_focus() {
var dde = $find('<%= DDE.ClientID%>')
dde.add_hiding(DDE_Hiding);
}
// Remove handler for event DropDownExtender.hiding
function TextBox1_blur() {
var dde = $find('<%= DDE.ClientID%>')
dde.remove_hiding(DDE_Hiding);
}
function DDE_Hiding(e) {
e.set_cancel(true);
}
</script>
<%--Set dropdown visibility end--%>
<%--Search in gridview start--%>
<script type="text/javascript">
String.prototype.startsWith = function (str) { return (this.indexOf(str) === 0); }
function Highlight() {
var srchval = document.getElementById('<%= txtSearch.ClientID%>').value;
var cntrlname = document.getElementById('<%= gridEdit.ClientID%>');
var rows = cntrlname.getElementsByTagName("tr");
var rowTop = 0;
var FirstRow = rows[1];
for (var loop = 0; loop < rows.length; loop++) {
if (loop != SelectedRowIndex) {
if (loop % 2 != 0) {
//Alternating Row Color
rows[loop].style.background = backcoloralternetrow; //"#9AD8ED";
}
else {
rows[loop].style.background = backcolorfirstrow; //"white";
}
}
else {
rows[loop].style.background = backcolorselect; //"orange";
}
}
var ok = 0;
if (srchval != '') {
do {
for (var loop = 0; loop < rows.length; loop++) {
var cells = rows[loop].getElementsByTagName("td");
if (ok != 2) {
for (i = 0; i < cells.length; i++) {
if (cells[i].innerHTML.toLowerCase().startsWith(srchval.toLowerCase())) {
ok = 1;
}
}
}
if (ok == 1) {
CurrentRow = rows[loop];
CurrentRow.style.background = backcolorselect; //'orange';
SelectedRow = CurrentRow;
SelectedRowIndex = loop;
document.getElementById('<%= Hidden_RowIndex.ClientID%>').value = loop;
document.getElementById('<%= divGrid.ClientID%>').scrollTop = loop * CurrentRow.clientHeight;
var h = document.getElementById('<%= hfScrollPosition.ClientID%>');
h.value = loop * CurrentRow.clientHeight;
setFooter();
ok = 2;
}
else {
if (loop % 2 != 0) {
//Alternating Row Color
rows[loop].style.background = backcoloralternetrow; //"#9AD8ED";
}
else {
rows[loop].style.background = backcolorfirstrow; //"white";
}
}
}
if (srchval.length > 0) {
srchval = srchval.substring(0, srchval.length - 1);
}
} while (ok == 0 && srchval.length > 0);
}
if (SelectedRowIndex <= -1) {
if (srchval.length <= 0 || ok == 0) {
CurrentRow = rows[0];
CurrentRow.style.background = backcolorselect; //'orange';
SelectedRow = CurrentRow;
SelectedRowIndex = 0;
document.getElementById('<%= Hidden_RowIndex.ClientID%>').value = 0;
document.getElementById('<%= divGrid.ClientID%>').scrollTop = 0 * CurrentRow.clientHeight;
var h = document.getElementById('<%= hfScrollPosition.ClientID%>');
h.value = 0 * CurrentRow.clientHeight;
setFooter();
for (var loop = 0; loop < rows.length; loop++) {
if (loop != SelectedRowIndex) {
if (loop % 2 != 0) {
//Alternating Row Color
rows[loop].style.background = backcoloralternetrow; //"#9AD8ED";
}
else {
rows[loop].style.background = backcolorfirstrow; //"white";
}
}
else {
rows[loop].style.background = backcolorselect; //"orange";
}
}
}
}
return false;
}
function SendUp(CurrentRow, FirstRow) {
FirstRow.parentNode.insertBefore(CurrentRow, FirstRow);
}
function GetMedName(MedName) {
document.getElementById('<%= txtSearch.ClientID%>').value = MedName;
}
function setFocusOnGrid(evt, id) {
var evt = evt ? evt : window.event;
var KeyCode = evt.which ? evt.which : evt.keyCode;
var cntrlname = document.getElementById('<%= gridEdit.ClientID%>');
var rows = cntrlname.getElementsByTagName("tr");
if (SelectedRowIndex < rows.length) {
if (KeyCode == 40) {
SelectRow(rows[parseInt(SelectedRowIndex) + 1], parseInt(SelectedRowIndex) + 1);
}
else if (KeyCode == 38) {
SelectRow(rows[parseInt(SelectedRowIndex) - 1], parseInt(SelectedRowIndex) - 1);
}
else if (KeyCode == 13) {
//alert(KeyCode);
SelectedRow.style.backgroundColor = backcolorselect; //"orange";
SelectValue(rows[SelectedRowIndex], SelectedRowIndex);
return false;
}
else if (KeyCode == 9) {
if (SelectedRowIndex == -1) {
SelectedRowIndex = 0;
SelectedRow = rows[0];
rows[0].style.backgroundColor = backcolorselect; // "orange";
SelectValue(rows[0], 0);
}
else {
SelectedRow.style.backgroundColor = backcolorselect; // "orange";
SelectValue(rows[SelectedRowIndex], SelectedRowIndex);
}
}
}
return true;
}
function setFocusOnSearch(event) {
if (event.altKey == false && event.ctrlKey == false) {
if ((event.keyCode >= 48 && event.keyCode <= 57 && event.shiftKey == false) ||
(event.keyCode >= 65 && event.keyCode <= 90) ||
(event.keyCode >= 97 && event.keyCode <= 122)) {
document.getElementById('<%= txtSearch.ClientID%>').value = String.fromCharCode(event.keyCode);
document.getElementById('<%= txtSearch.ClientID%>').focus();
}
}
}
</script>
<%--Search in gridview end--%>
<%--Maintain scroll position start--%>
<script type="text/javascript">
function SetDivPosition() {
var intY = document.getElementById('<%= divGrid.ClientID%>').scrollTop;
var h = document.getElementById('<%= hfScrollPosition.ClientID%>');
h.value = intY;
}
function afterpostback() {
var h = document.getElementById('<%= hfScrollPosition.ClientID%>');
document.getElementById('<%= divGrid.ClientID%>').scrollTop = h.value;
}
</script>
<%--Maintain scroll position end--%>
<%--Supporting function start--%>
<script type="text/javascript">
//Set footer description
function setFooter() {
var cntrlname = document.getElementById('<%= gridEdit.ClientID%>');
var rows = cntrlname.getElementsByTagName("tr");
if (SelectedRowIndex != -1) {
document.getElementById('<%= lblTot.ClientID%>').value = 'Record: ' + (parseInt(SelectedRowIndex) + 1) + ' / ' + rows.length;
}
else {
document.getElementById('<%= lblTot.ClientID%>').value = 'Record: ' + rows.length;
}
}
function closeDatacombo() {
var cntrlname = document.getElementById('<%= gridEdit.ClientID%>');
var rows = cntrlname.getElementsByTagName("tr");
if (SelectedRow != null) {
document.getElementById('<%= txtDisplay.ClientID%>').value = (SelectedRow.cells[1].innerHTML == "" ? SelectedRow.cells[2].innerHTML : SelectedRow.cells[1].innerHTML);
}
else {
document.getElementById('<%= txtDisplay.ClientID%>').value = (rows[0].cells[1].innerHTML == "" ? rows[0].cells[2].innerHTML : rows[0].cells[1].innerHTML);
SelectedRowIndex = 0;
SelectedRow = rows[0];
}
rows[SelectedRowIndex].style.backgroundColor = backcolorselect;
var hidden = $get('<%= Hidden1.ClientID%>');
hidden.click();
document.getElementById('<%= gridEdit.ClientID%>').nextSibling.focus();
}
</script>
<%--Supporting function end--%>
<%--Add page load event start--%>
<script type="text/javascript">
function control1OnLoadHandler() {
//Maintain scroll position
var h = document.getElementById('<%= hfScrollPosition.ClientID%>');
document.getElementById('<%= divGrid.ClientID%>').scrollTop = h.value;
//dropdown arrow key allways visible.
$find('<%= DDE.ClientID%>')._dropWrapperHoverBehavior_onhover();
$find('<%= DDE.ClientID%>').unhover = VisibleMe;
//Show and hide panal on mouse over anf leave
//var dxt = $find('DDE');
//var panel = $get('DropPanel');
//var hidden = $get('Hidden1');
//$addHandler(dxt.get_element(), "mouseover", function () { dxt.show(); });
//$addHandler(dxt.get_element(), "mouseleave", function () { hidden.click(); });
//$addHandler(panel, "mouseleave", function () { hidden.click(); });
//$addHandler(panel, "mouseover", function () { dxt.show(); });
//Row selection using arrow key
UpperBound = parseInt('<%= this.gridEdit.Rows.Count %>') - 1;
LowerBound = 0;
SelectedRowIndex = (document.getElementById('<%= Hidden_RowIndex.ClientID%>').value.length > 0 ? document.getElementById('<%= Hidden_RowIndex.ClientID%>').value : -1);
DDE = $find('<%= DDE.ClientID%>');
DDE._dropWrapperHoverBehavior_onhover();
$get('<%= DropPanel.ClientID%>').style.width = $get('<%= txtDisplay.ClientID%>').clientWidth;
if (DDE._dropDownControl) {
$common.removeHandlers(DDE._dropDownControl, DDE._dropDownControl$delegates);
}
DDE._dropDownControl$delegates = {
click: Function.createDelegate(DDE, ShowMe),
contextmenu: Function.createDelegate(DDE, DDE._dropDownControl_oncontextmenu)
}
$addHandlers(DDE._dropDownControl, DDE._dropDownControl$delegates);
var cntrlname = document.getElementById('<%= gridEdit.ClientID%>');
var rows = cntrlname.getElementsByTagName("tr");
rows[SelectedRowIndex].style.backgroundColor = backcolorselect; // "orange";
}
function addLoadEventHandler(func) {
var previous_handler = window.onload;
if (typeof window.onload != "function") window.onload = func;
else window.onload = function () {
previous_handler();
func();
}
}
//add this control's onLoad handler to the document's onload, without
//replacing whatever handler may be there already
addLoadEventHandler(control1OnLoadHandler);
</script>
<%--Control designer start--%>
<div style="position:relative;border:none;">
<asp:HiddenField ID="Hidden1" Value="" runat="server" />
<asp:HiddenField ID="Hidden_RowIndex" Value="" runat="server" />
<asp:HiddenField ID="hfScrollPosition" Value="" runat="server" />
<%--<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>--%>
<asp:TextBox ID="txtDisplay" runat="server" onfocus="showDataCombo();" CssClass="tb10" ToolTip="Type for search"></asp:TextBox>
<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Width="1000px"
style="display :none;
visibility: hidden;
border:2px solid #E5E5E5;
padding-bottom:-1px;
margin-top:-28px;
background-color:#83ACF3;
overflow:hidden;
height:auto;
max-height:700px;">
<div class="ddeSerch">
<div style="padding-top:5px;float:left;">
Look-Up
</div>
<asp:TextBox runat="server" ID="txtSearch" CssClass="tb10" BackColor="White" Width="470px" MaxLength="150"
onkeypress="Highlight()"
onblur="return Highlight()"
onkeydown="return setFocusOnGrid(event, this.id)"
onkeyup="Highlight()"
onclick="return false;"
style="background: url(GridViewCSSThemes/Images/tia.png) no-repeat top right;background-color:White;padding-right:25px;">
</asp:TextBox>
<div style="padding-top:5px;float:right;cursor:pointer;" onclick="closeDatacombo();">
Close
</div>
</div>
<asp:Table ID="Table1" runat="server" CssClass="header" GridLines="Vertical" Width="983px">
</asp:Table>
<%--<z>--%>
<div id="divGrid" runat="server" onscroll="SetDivPosition()" style="max-height:615px;width:100%;overflow-X:auto;overflow-Y:auto;">
<asp:GridView ID="gridEdit" GridLines="Vertical" runat="server" Width="100%"
ShowFooter="false" ShowHeader="false" AutoGenerateColumns="false"
Font-Size = "11pt" Font-Names = "Arial" style="color:Black;"
AlternatingRowStyle-BackColor="#CCDDFB"
RowStyle-BackColor="WhiteSmoke"
onkeydown="return setFocusOnSearch(event)"
OnRowCreated="gridEdit_RowCreated" OnRowDataBound="gridEdit_RowDataBound" >
<Columns>
<asp:TemplateField HeaderText="S.No.">
<ItemTemplate>
<%# ((GridViewRow)Container).RowIndex + 1%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle HorizontalAlign="Left" Font-Bold="false" />
<RowStyle CssClass="rowstyle"/>
</asp:GridView>
</div>
<%--</z>--%>
<table class="footer" id="tblfooter" runat="server">
<tr>
<td style="text-align:left;">
<asp:TextBox Enabled="false" ID="lblOrd" CssClass="footer" runat="server" Width="100%"></asp:TextBox>
</td>
<td style="text-align:right;">
<asp:TextBox Enabled="false" ID="lblTot" CssClass="footer" style="text-align:right;" runat="server" Width="100%"></asp:TextBox>
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:DropDownExtender runat="server" ID="DDE"
TargetControlID="txtDisplay"
DropDownControlID="DropPanel" />
<%--</ContentTemplate>
</asp:UpdatePanel>--%>
</div>
<%--Control designer end--%>
public partial class BssWebDataCombo : System.Web.UI.UserControl
{
internal Dictionary<string, int> _dcmbColWidth;
public Dictionary<string, int> dcmbColWidth
{
get
{
if (_dcmbColWidth == null)
{
_dcmbColWidth = new Dictionary<string, int>();
_dcmbColWidth.Add("S.No.", 7);
_dcmbColWidth.Add("ID", 4);
_dcmbColWidth.Add("Name", 35);
_dcmbColWidth.Add("Age", 14);
_dcmbColWidth.Add("City", 20);
_dcmbColWidth.Add("Contact", 20);
}
return _dcmbColWidth;
}
set { _dcmbColWidth = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "CallJS", "pageLoad();afterpostback();", true);
}
if (!Page.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("Name", typeof(String));
dt.Columns.Add("Age", typeof(String));
dt.Columns.Add("City", typeof(String));
dt.Columns.Add("Contact", typeof(String));
dt.Columns["ID"].AutoIncrement = true;
dt.Columns["ID"].AutoIncrementSeed = 1;
dt.Columns["ID"].AutoIncrementStep = 1;
dt.PrimaryKey = new DataColumn[] { dt.Columns["ID"] };
dt.Rows.Add(null, "Ashish Rathore", "27", "Dewas", "9826825190");
dt.Rows.Add(null, "Mohan Pawanr", "27", "Ujjain", "9826825111");
dt.Rows.Add(null, "Raja Mohan", "27", "Bhopal", "9826825111");
dt.Rows.Add(null, "Kamlesh", "27", "Dewas", "9826825111");
dt.Rows.Add(null, "Pawan", "27", "Indore", "9826825111");
dt.Rows.Add(null, "Mohit", "27", "Dewas", "9826825111");
dt.Rows.Add(null, "Sohan", "27", "Dewas", "9826825111");
if (gridEdit.Columns.Count > 0)
{
while (gridEdit.Columns.Count > 1)
{
gridEdit.Columns.RemoveAt(1);
}
}
foreach (DataColumn col in dt.Columns)
{
//Declare the bound field and allocate memory for the bound field.
BoundField bfield = new BoundField();
//Initalize the DataField value.
//bfield.DataField = col.ColumnName;
//Initialize the HeaderText field value.
bfield.HeaderText = col.ColumnName;
bfield.DataField = col.ColumnName;
//Add the newly created bound field to the GridView.
gridEdit.Columns.Add(bfield);
}
dt.DefaultView.Sort = dt.Columns[1].ColumnName;
gridEdit.DataSource = dt.DefaultView.ToTable();
gridEdit.DataBind();
lblTot.Text = "Records: " + dt.Rows.Count.ToString();
lblOrd.Text = "Order: " + dt.Columns[1].ColumnName;
}
if (gridEdit.Columns.Count > dcmbColWidth.Count)
{
gridEdit.Columns.RemoveAt(0);
}
TableRow tr = new TableRow();
int x = 0;
TableCell tc = new TableCell();
foreach (var dc in dcmbColWidth)
{
if (dc.Key != "ID")
{
tc = new TableCell();
tc.Text = dc.Key;
tc.Attributes.Add("width", dc.Value + "%");
tc.HorizontalAlign = HorizontalAlign.Left;
tr.Cells.Add(tc);
}
gridEdit.Columns[x].ItemStyle.Width = Convert.ToInt16((DropPanel.Width.Value * Convert.ToDouble(dc.Value)) / 100);
x++;
}
Table1.Rows.Add(tr);
gridEdit.Columns[1].Visible = false;
}
#region Record View (Common Gridview Events)
protected void gridEdit_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow && (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate))
{
e.Row.TabIndex = -1;
e.Row.Attributes["onclick"] = string.Format("javascript:SelectRow(this, {0});", e.Row.RowIndex);
e.Row.Attributes["ondblclick"] = string.Format("javascript:SelectValue(this, {0});", e.Row.RowIndex);
e.Row.Attributes["onkeydown"] = "javascript:return SelectSibling(event);";
e.Row.Attributes["onselectstart"] = "javascript:return false;";
//e.Row.Attributes["onblur"] = string.Format("javascript:SelectValue(this, {0});", e.Row.RowIndex);
}
}
#endregion
}
我的Web用户控件的Java脚本停止在多个实例上工作。 任何人都可以告诉我如何修改我的脚本以处理多个实例。