ajax and table and dropdownlist

最新推荐文章于 2021-08-05 17:35:41 发布

wfdoublext

最新推荐文章于 2021-08-05 17:35:41 发布

阅读量97

点赞数

分类专栏： javascript 文章标签： Ajax ASP J#

javascript 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一个基于 ASP.NET 的网页应用实例，该应用通过多层次的下拉列表实现数据筛选，并利用表格形式动态展示筛选后的结果。文章详细解释了各部分 HTML 结构及其对应的 JavaScript 交互逻辑。

	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
			<div id="divChoice">
				<div id="divOver">
					<div id="divCompany"><span class="title">支店</span>
						<asp:dropdownlist id="ddlBranch" runat="server" onchange="SelectChange(ddlArea)"></asp:dropdownlist></div>
					<div id="divArea"><span class="title">エリア</span>
						<asp:dropdownlist id="ddlArea" runat="server" onchange="SelectChange(ddlStore)"></asp:dropdownlist></div>
					<div id="divStore"><span class="title">店舗</span>
						<asp:dropdownlist id="ddlStore" runat="server"></asp:dropdownlist></div>
					<div id="divDivsion"><span class="title">DIV</span>
						<asp:dropdownlist id="ddlDiv" runat="server" onchange="SelectChange(ddlLine)"></asp:dropdownlist></div>
					<div id="divLine"><span class="title">ライン</span>
						<asp:dropdownlist id="ddlLine" runat="server"></asp:dropdownlist></div>
				</div>
				<div id="divDown">
					<div id="divButton"><BUTTON id="ButtonOK" onclick="showTable('no')" type="button">表 示</BUTTON>
					</div>
				</div>
			</div>
			<div id="divDgd">
								<div style="OVERFLOW:auto;WIDTH:1007px;HEIGHT:580px">
					<div id="result" style="DISPLAY:none">表示できるデータがありません。</div>
					<div id="waiting"><IMG alt="" src="Images/ajax-loader.gif"></div>
					<table id="dgtable">
					</table>
				</div>
						</form>
	</body>
</HTML>

function SelectChange(obj)//list select
			{
				var tag=document.activeElement.id;
				var tagvalue=document.activeElement.value;
				
				var ddlBranch=document.getElementById('ddlBranch');
				if(obj!=null)
				{
					LackDetailList.GetList(tag,tagvalue,ddlBranch.value,changvalue);
					
					function changvalue(res)
					{
						var listvalue=eval(res.value);
						var index=0;
						obj.innerHTML="";
						var newItem = document.createElement( "OPTION" );
								newItem.value ='0';
								newItem.text ='すべて';
								obj.add( newItem, index++ );
						for(var i=0;i<listvalue.Tables[0].Rows.length;i++)
						{
								var newItem = document.createElement( "OPTION" );
								newItem.value =listvalue.Tables[0].Rows[i].cd;
								newItem.text =listvalue.Tables[0].Rows[i].xname;
								obj.add( newItem, index++ );
						}
								
						if(document.activeElement.id=='ddlBranch')//branch is selected time
						{
							var ddlStore=document.getElementById('ddlStore');
							ddlStore.innerHTML="";
							 var toLength = 0;
							  var newItem = document.createElement( "OPTION" );
									newItem.value ='0';
									newItem.text ='すべて';
									ddlStore.add( newItem, toLength++ );
							for(var j=0;j<listvalue.Tables[1].Rows.length;j++)
							{
								 var newItem = document.createElement( "OPTION" );
									newItem.value =listvalue.Tables[1].Rows[j].cd;
									newItem.text =listvalue.Tables[1].Rows[j].xname;
									ddlStore.add( newItem, toLength++ );
							}						
						}	
					}
				}
				else
					return;
				
			}

function showTable(reasoncd)//表示button　onclick
			{
				
				var waiting =document.getElementById('waiting');
				var objtable =document.getElementById('dgtable');//HtmlのTabelのObject
				var result=document.getElementById('result');
				result.style.display="none";
				if(!objtable)
				{
					return;
				}
			waiting.style.display="";
			
			while(objtable.rows.length>0)
				{
					objtable.deleteRow(0);
				}
				var ddlBranch=document.getElementById('ddlBranch');
				var ddlArea=document.getElementById('ddlArea');
				var ddlStore=document.getElementById('ddlStore');
				var ddlDiv=document.getElementById('ddlDiv');
				var ddlLine=document.getElementById('ddlLine');
				var ddlDay=document.getElementById('ddlDay');
				var ddlWeek=document.getElementById('ddlWeek');
				var ddlMonth=document.getElementById('ddlMonth');
				var ddlLackReason=document.getElementById('ddlLackReason');
				var whichvalue;
				if(whichrad==1)//日別
					whichvalue=ddlDay.value;
				if(whichrad==2)//週別
					whichvalue=ddlWeek.value;
				if(whichrad==3)//月別
					whichvalue=ddlMonth.value;
				if(reasoncd!='no')//初始化の時
					LackDetailList.GetdgTable(whichrad,whichvalue,reasoncd,ddlBranch.value,ddlArea.value,ddlStore.value,ddlDiv.value,ddlLine.value,changeTable);
				else//表 示buttonを押す
					LackDetailList.GetdgTable(whichrad,whichvalue,ddlLackReason.value,ddlBranch.value,ddlArea.value,ddlStore.value,ddlDiv.value,ddlLine.value,changeTable);
				function changeTable(res)
				{
					var source=res.value;
					var objtable =document.getElementById('dgtable');
					if(source.Rows.length!=0)//表示できるデータがあります。
					{
						
						for(var i=0;i<source.Rows.length;i++)
						{
							
							var rows = objtable.rows;　
							var row = null;
							row  = objtable.insertRow();
							if(source.Rows[i].PRIORITY_TYP)
								//row.style.color='#0000ff';
								row.style.backgroundColor='#ff897f';
							
							var cells = row.cells;
							var cell0 = cells[0];		
							cell0 = row.insertCell();
							cell0.innerText=source.Rows[i].LACK_REASON;
							var cell1 = cells[1];		
							cell1 = row.insertCell();
							cell1.innerText=source.Rows[i].STORE_NM;
							var cell2 = cells[2];		
							cell2 = row.insertCell();
							cell2.innerText=source.Rows[i].JAN;
							var cell3 = cells[3];		
							cell3 = row.insertCell();
							cell3.innerText=source.Rows[i].ITEM_NM;
							var px,px;
							py=70+i*20;
							px=700;
							var strfun="showpop('"+source.Rows[i].BRAND_NM+"','"+source.Rows[i].SIZE_NM+"','"+source.Rows[i].COLOR_NM+"','"+source.Rows[i].VENDOR_CD+"',"+px+","+py+")";
							cell3.onmousemove=new Function(strfun);
							cell3.onmouseout=new Function('displaypop()');
							var cell4 = cells[4];		
							cell4 = row.insertCell();
							cell4.innerText=source.Rows[i].VENDOR_NM;
						}
						waiting.style.display="none";
					}
					//var ccc=document.getElementById("cc");

                                                                             //alert(ccc.selectedIndex);

					//alert(ccc.value);

					//alert(ccc.options[ccc.selectedIndex].text);						
					//alert(ccc.options.length);	
				}		
			}