ajax and table and dropdownlist

	<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);	
				}		
			}

 

你可能感兴趣的:(Ajax,J#,asp)