asp.net利用json填充下拉框及js动态添加表格行、删除表格行的示例

来源：互联网发布：火车必备物品清单知乎编辑：程序博客网时间：2024/06/04 18:35

我就不多说了，还是自己看代码吧，其中json.js就是我前面写的一个小的json填充select的框架。具体参照：
http://blog.csdn.net/aspgreener/archive/2007/09/13/1783834.aspx<script type="text/javascript">google_ad_client = "pub-2048279401139630";google_ad_slot = "8856771542";google_ad_width = 728;google_ad_height = 90;document.write("<s"+"cript type='text/javascript' s"+"rc='http://pagead2.googlesyndication.com/pagead/show_ads"+"."+"js'></scr"+"ipt>");</script>

<%@ Page Language="C#" AutoEventWireup="true" Theme="MH2007" CodeFile="ApplyNewMM.aspx.cs"

Inherits="MM_ApplyNewMM" %>

<%@ Register Src="../Control/LineControl.ascx" TagName="LineControl" TagPrefix="uc1" %>

<%@ Register Src="../LDAP/SingleAp_Direct.ascx" TagName="SingleAp_Direct" TagPrefix="uc1" %>

.but-nor-right { BACKGROUND-IMAGE: url(/mh-2003/Modules/Web/Images/below_r_22.gif); WIDTH: 4px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 22px }

.but-nor-bg { PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-SIZE: 9pt; BACKGROUND-IMAGE: url(/mh-2003/Modules/Web/Images/below_bg_22.gif); PADDING-BOTTOM: 0px; CURSOR: hand; COLOR: #333333; PADDING-TOP: 2px; BACKGROUND-REPEAT: repeat-x; TEXT-ALIGN: center }

</style>

function addfile()

{

var iNum;

iNum=parseInt(Form1.ImageNumber.value);

strAdd = "";

if (iNum!="NaN"&&iNum>0)

{

for (i=0;i<iNum;i++)

{

j=i+1;

strAdd += "<table width='100%' border=0 cellpadding=2 cellspacing=1>";

strAdd += "<tr><td><div align='center'>文件" + j + "：</td><td><input name='uploadfile" + i + "' type='file' id='uploadfile" + i + "' size='30'></td></tr>";

strAdd += "</table>";

}

window.document.getElementById("UploadImages").innerHTML=strAdd;

}

else

{

alert("请输入图片数！");

Form1.ImageNumber.value="";

Form1.ImageNumber.focus();

}

//alert(Form1.ImageNumber.value);

}

</script>

</head>

//<!CDATA[

window.onerror=function()

{

window.status="";

return true;

}

window.onload=function()

{

json.addOptions("NewProdArea0","PARENT_ID",7);

var no = $("proNo");

no.value="1";

}

function ResetDDL(obj)

{

if(obj.selectedIndex==0)

{

window.alert("请选择您需要的操作!");

this.focus();

return;

}

bool=confirm('您确定执行此操作吗?');

if(!bool)

{

obj.selectedIndex=0;

}

var json = new _json.Tree();

json.root = "<%=ROOT%>";

json.JSON = <%=JSON%>

json.optionText = "CATALOG_NAME";

json.optionValue = "ID";

var i = 1;

function AddNewLine()

{

var row, cell;

var cur,newrow;

var insertHTML;

var o = document.getElementById("tableNew");

var no = $("proNo");

cur = o.rows.length;

if(no.value=="")

no.value = "1";

if(i==49) return;

newrow = o.insertRow(cur);

cell = newrow.insertCell(0);

cell.align = "center";

insertHtml = "<select name='NewProdArea"+ i +"' onchange="javascript:if(this.selectedIndex==0){removeOptions('NewProdType"+ i +"');}else{json.optionValue = 'CATALOG_NAME';json.addOptions('NewProdType"+ i +"','PARENT_ID',this.value);}" id='NewProdArea"+ i +"'>";

insertHtml += "<option selected='selected' value='区域选择'>区域选择</option>";

insertHtml += "</select>";

cell.innerHTML = insertHtml;

cell = newrow.insertCell(1);

cell.align = "center";

insertHtml = "<select name='NewProdType"+ i +"' id='NewProdType"+ i +"'>";

insertHtml += "<option selected='selected' value='产品类型'>产品类型</option>";

insertHtml += "</select>";

cell.innerHTML = insertHtml;

cell = newrow.insertCell(2);

cell.align = "center";

insertHtml = "<input name='MMApplyProdModel"+ i +"' type='text' id='MMApplyProdModel"+ i +"' style='width:40px;' />";

cell.innerHTML = insertHtml;

cell = newrow.insertCell(3);

cell.align = "center";

insertHtml = "<input name='MMApplyORPProductNum"+ i +"' type='text' id='MMApplyORPProductNum"+ i +"' style='width:40px;' />";

cell.innerHTML = insertHtml;

cell = newrow.insertCell(4);

cell.align = "center";

insertHtml = "<select name='MMType"+ i +"' id='MMType"+ i +"'>";

insertHtml += "<option selected='selected' value='真机'>真机</option>";

insertHtml += "<option value='模型'>模型</option>";

insertHtml += "</select>";

cell.innerHTML = insertHtml;

cell = newrow.insertCell(5);

insertHtml = "<input name='MMApplyProviderName"+ i +"' type='text' value='<%=USER_NM%>' id='MMApplyProviderName"+ i +"' style='width:40px;' />";

cell.align = "center";

cell.innerHTML = insertHtml;

cell = newrow.insertCell(6);

cell.align = "center";

insertHtml = "<input name='MMApplyProvierPhoneNumber"+ i +"' type='text' value='<%=USER_COMPTEL%>' id='MMApplyProvierPhoneNumber"+ i +"' style='width:66px;' />";

cell.innerHTML = insertHtml;

cell = newrow.insertCell(7);

cell.align = "center";

insertHtml = "<input name='MMApplyProviderDept"+ i +"' type='text' value='<%=USER_DEPT%>' id='MMApplyProviderDept"+ i +"' style='width:50px;' />";

cell.innerHTML = insertHtml;

cell = newrow.insertCell(8);

cell.align = "center";

insertHtml = "<input name='MMApplyProviderDate"+ i +"' type='text' id='MMApplyProviderDate"+ i +"' onFocus='javascript:calendar();' style='width:80px;' />";

cell.innerHTML = insertHtml;

cell = newrow.insertCell(9);

cell.align = "center";

insertHtml = "<input name='MMApplySabPrincipal"+ i +"' type='text' id='MMApplySabPrincipal"+ i +"' style='width:40px;' />";

cell.innerHTML = insertHtml;

cell = newrow.insertCell(10);

cell.align = "center";

insertHtml = "<input name='MMApplySecPrincipal"+ i +"' type='text' id='MMApplySecPrincipal"+ i +"' style='width:40px;' />";

cell.innerHTML = insertHtml;

cell = newrow.insertCell(11);

insertHtml = "<input name='delRow"+ i +"' type='button' id='delRow"+ i +"' value='删除' style='width:40px;' onclick="javascript:if(confirm('确定要删除吗？')){delRow("+i+");}" />";

cell.innerHTML = insertHtml;

json.optionValue = "ID";

json.addOptions("NewProdArea"+ i,"PARENT_ID",7);

i++;

no.value = i;

}

function get_Element(the_ele,the_tag)

{

the_tag = the_tag.toLowerCase();

if(the_ele.tagName.toLowerCase()==the_tag)

return the_ele;

while(the_ele=the_ele.offsetParent)

{

if(the_ele.tagName.toLowerCase()==the_tag)

return the_ele;

}

return(null);

}

function delRow(rowIndex)

{

var o = document.getElementById("tableNew");

var no = $("proNo");

var the_cell;

the_cell = get_Element(event.srcElement,"td");

var index=the_cell.parentElement.rowIndex;

if(the_cell==null)

return;

if(o.rows.length==1)

return;

o.deleteRow(index);

i++;

}

function chkNew()

{

var row, cell;

var rowscount,cellscount;

var cur;

var flag = true;

var o = document.getElementById("tableNew");

rowscount = o.rows.length;

cellscount=11;

for(var i=0;i<rowscount;i++)

{

if($("NewProdArea"+ i).selectedIndex==0)

{

alert("请选择展区！");

flag = false;

$("NewProdType"+ i).focus();

removeOptions("NewProdType"+ i);

break;

}

if($("NewProdType"+ i).selectedIndex==0)

{

alert("请选择展区！");

flag = false;

$("NewProdType"+ i).focus();

break;

}

if($("MMApplyProdModel"+ i).value=="")

{

alert("产品型号不能为空！");

flag = false;

$("MMApplyProdModel"+ i).focus();

break;

}

if($("MMApplyProdModel"+ i).value=="")

{

alert("产品型号不能为空！");

flag = false;

$("MMApplyProdModel"+ i).focus();

break;

}

if($("MMApplyORPProductNum"+ i).value=="")

{

alert("数量不能为空！");

flag = false;

$("MMApplyORPProductNum"+ i).focus();

break;

}

else

{

if(isNaN($("MMApplyORPProductNum"+ i).value))

{

alert("请输入数字！");

$("MMApplyORPProductNum"+ i).value = "";

flag = false;

$("MMApplyORPProductNum"+ i).focus();

break;

}

if($("MMApplyProviderName"+ i).value=="")

{

alert("提供人姓名不能为空！");

flag = false;

$("MMApplyProviderName"+ i).focus();

break;

}

if($("MMApplyProvierPhoneNumber"+ i).value=="")

{

alert("联系电话不能为空！");

flag = false;

$("MMApplyProvierPhoneNumber"+ i).focus();

break;

}

if($("MMApplyProviderDept"+ i).value=="")

{

alert("所属部门不能为空！");

flag = false;

$("MMApplyProviderDept"+ i).focus();

break;

}

if($("MMApplySabPrincipal"+ i).value=="")

{

alert("SAB负责人不能为空！");

flag = false;

$("MMApplySabPrincipal"+ i).focus();

break;

}

if($("MMApplySecPrincipal"+ i).value=="")

{

alert("SEC负责人不能为空！");

flag = false;

$("MMApplySecPrincipal"+ i).focus();

break;

}

return flag;

}

function removeOptions(obj)

{

var o = $(obj);

var ln = o.length;

while(ln--)

{

o.options[ln] = null;

}

o.options.add(new Option("产品类型","产品类型"));

}

function $(strObj)

{

if(strObj=="")

return;

return document.getElementById(strObj);

}

//]]>

</script>

<body>

<div>

<asp:Wizard ID="MMApply" runat="server" ActiveStepIndex="0" Height="297px" Width="900px"

DisplayCancelButton="True" DisplaySideBar="False" CancelButtonImageUrl="/MH/images/tem_cancle.gif"

CancelButtonType="Image" StartNextButtonImageUrl="/MH/images/next.gif" StartNextButtonType="Image"

StepNextButtonImageUrl="/MH/images/next.gif" StepNextButtonType="Image" StepPreviousButtonImageUrl="/MH/images/prev.gif"

StepPreviousButtonType="Image" OnNextButtonClick="MMApply_NextButtonClick" OnActiveStepChanged="MMApply_ActiveStepChanged"

OnPreviousButtonClick="MMApply_PreviousButtonClick">

<asp:WizardStep runat="server" Title="applynew" StepType="Start">

<tr>

</tr>

</table>

<uc1:LineControl ID="Line01" runat="server" />

<tr>

</td>

</tr>

<tr>

<tr>

样机查询</td>

</tr>

</table>

<tr>

</td>

</tr>

</table>

<tr>

条件搜索：</td>

<tr>

<asp:DropDownList ID="ddlProdArea" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlProdArea_SelectedIndexChanged">

</asp:DropDownList>

<asp:RequiredFieldValidator ID="rfvProdArea" runat="server" ControlToValidate="ddlProdArea"

ErrorMessage="*" InitialValue="区域选择"></asp:RequiredFieldValidator>

</td>

<asp:DropDownList ID="ddlProdType" runat="server">

<asp:ListItem Value="0">产品类别</asp:ListItem>

</asp:DropDownList>

</td>

<td>

 </td>

</tr>

</table>

</td>

</tr>

<tr>

申请信息：</td>

 </td>

</tr>

<tr>

申请部门：</td>

<td>

 <asp:Label ID="lblProviderDept" runat="server" SkinID="labelinput01Skin"></asp:Label>

</td>

</td>

</td>

<td>

</td>

</tr>

<tr>

申请人：</td>

<td>

 <asp:Label ID="lblProviderName" runat="server" SkinID="labelinput01Skin"></asp:Label>

</td>

</td>

</td>

<td>

</td>

</tr>

<tr>

联系电话：</td>

<td>

 <asp:TextBox ID="txtProviderPhoneNum" runat="server" Width="232px"></asp:TextBox>

</td>

E-mail：</td>

<td>

 <asp:Label ID="lblProviderEmail" runat="server" SkinID="labelinput01Skin"></asp:Label>

</td>

</tr>

<tr>

</td>

</td>

<td>

</td>

</td>

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:WizardStep>

<asp:WizardStep runat="server" Title="prodlist" StepType="Step">

<tr>

</tr>

</table>

<uc1:LineControl ID="line02" runat="server" />

<tr>

</td>

</tr>

<tr>

<tr>

产品列表</td>

</tr>

</table>

<tr>

</td>

</tr>

</table>

<tr>

<asp:GridView ID="gvProdList" runat="server" AutoGenerateColumns="False" OnRowDataBound="gvProdList_RowDataBound"

OnDataBound="gvProdList_DataBound">

<asp:BoundField DataField="ITEMS_ID" HeaderText="ID"></asp:BoundField>

<asp:TemplateField HeaderText="展区">

<asp:Label ID="lblPROD_AREA" runat="server" Text='<%# Eval("PROD_AREA") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="PROD_TYPE" HeaderText="类型" />

<asp:BoundField DataField="PROD_MODEL" HeaderText="型号" />

<asp:BoundField DataField="PROD_NUM" HeaderText="数量" />

<asp:BoundField DataField="MM_TYPE" HeaderText="样机类型" />

<asp:BoundField DataField="PROVIDER_NAME" HeaderText="提供人" />

<asp:BoundField DataField="PROVIDER_PHONE_NUM" HeaderText="联系电话" />

<asp:BoundField DataField="PROVIDER_DEPT" HeaderText="部门" />

<asp:TemplateField HeaderText="入库时间">

<asp:Label ID="lblPROVIDE_DATE" runat="server" Text='<%# Convert.ToDateTime(Eval("PROVIDE_DATE")).ToString("yyyy-MM-dd") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="SAB_PRINCIPAL" HeaderText="SAB负责人" />

<asp:BoundField DataField="SEC_PRINCIPAL" HeaderText="SEC负责人" />

<asp:BoundField DataField="PROD_STATUS" HeaderText="样机状态" />

<asp:TemplateField HeaderText="操作">

<asp:DropDownList ID="OP" OnSelectedIndexChanged="ddlOP_SelectedIndexChanged" runat="server">

</asp:DropDownList>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

</td>

</tr>

</table>

</asp:WizardStep>

<asp:WizardStep runat="server" Title="op" StepType="Step">

<tr>

</tr>

</table>

<uc1:LineControl ID="line03" runat="server" />

<tr>

</td>

</tr>

<tr>

<tr>

状态报告</td>

</tr>

</table>

<tr>

您好!<br>

<asp:Label ID="lblOP" runat="server" Text="请选择您需要从展厅放入库房产品数量"></asp:Label>

<asp:TextBox ID="txtORPProdNum" runat="server" Width="26px"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvNum" runat="server" ControlToValidate="txtORPProdNum"

ErrorMessage="*"></asp:RequiredFieldValidator>

<asp:RegularExpressionValidator ID="revNum" runat="server" ControlToValidate="txtORPProdNum"

ErrorMessage="请输入正整数" ValidationExpression="^[1-9]d{0,8}"></asp:RegularExpressionValidator>

<asp:Panel ID="panelReturnDate" runat="server" Height="50px" Width="300px" Visible="False">

<asp:Label ID="lblPreReturnDate" runat="server" Text="预计归还的日期"></asp:Label>

<asp:TextBox ID="txtPreReturnDate" onfocus="javascript:calendar();" runat="server"

Width="121px"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvReturnDate" runat="server" ErrorMessage="*" ControlToValidate="txtPreReturnDate"></asp:RequiredFieldValidator>

</asp:Panel>

<br />

</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:WizardStep>

<asp:WizardStep runat="server" Title="addnew" StepType="Step">

<tr>

</tr>

</table>

<uc1:LineControl ID="line04" runat="server" />

<tr>

</td>

</tr>

<tr>

<tr>

产品列表</td>

</tr>

</table>

<tr>

</td>

</tr>

</table>

<table id="tableNew" width="900" border="0" align="center" cellpadding="0" cellspacing="1"

bgcolor="#ffffff">

<tbody>

展区</td>

产品类型</td>

产品型号</td>

数量</td>

样机类型</td>

提供人姓名</td>

联系电话</td>

所属部门</td>

入库时间</td>

SAB负责人</td>

SEC负责人</td>

操作</td>

</tr>

</select>

</td>

</select>

</td>

</td>

</td>

</select>

</td>

<input name='MMApplyProviderName0' type='text' id='MMApplyProviderName0' value="<%=USER_NM%>" style='width: 40px;' />

</td>

<input name='MMApplyProvierPhoneNumber0' type='text' id='MMApplyProvierPhoneNumber0' value="<%=USER_COMPTEL%>"

style='width: 66px;' />

</td>

<input name='MMApplyProviderDept0' type='text' id='MMApplyProviderDept0' value="<%=USER_DEPT%>" style='width: 50px;' />

</td>

</td>

</td>

</td>

<td>

</td>

</tr>

</tbody>

</table>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

</td>

</tr>

</table>

</asp:WizardStep>

<asp:WizardStep runat="server" StepType="Step" Title="setpath">

<uc1:LineControl ID="line05" runat="server" />

<tr>

标题:

<asp:TextBox ID="txtTitle" SkinID="input01Skin" runat="server"></asp:TextBox>

<asp:Label ID="lblTitle" runat="server" SkinID="labelinput01Skin" Visible="False"></asp:Label>

</td>

</tr>

<tr>

正文:

<asp:TextBox ID="txtContent" runat="server" Height="79px" TextMode="MultiLine" Width="471px"></asp:TextBox>

<asp:Label ID="lblContent" runat="server" SkinID="labelinput01Skin"></asp:Label>

</div>

</td>

</tr>

<tr>

<td>

<uc1:SingleAp_Direct ID="SingleApDirect1" runat="server"></uc1:SingleAp_Direct>

</tr>

<!--

<tr>

<td>

附件上传:<input type="text" maxlength="1" size="1" name="ImageNumber" id="Text1"><input

type="button" value="SetNum" id="SetNum" onclick="addfile()"></td>

</tr>

-->

<tr>

<td>

</td>

</tr>

<tr>

 </td>

</tr>

</table>

</asp:WizardStep>

<asp:WizardStep runat="server" StepType="Complete" Title="finish">

<tr>

</tr>

</table>

<uc1:LineControl ID="line06" runat="server" />

<tr>

</td>

</tr>

<tr>

<br />

<tr>

您好！<br>

<br>

您的申请已经提交完成，谢谢！<br>

<br>

我们会用邮件通知您申请结果。</td>

</tr>

</table>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</asp:WizardStep>

</WizardSteps>

</asp:Wizard>

</div>

</form>

</body>

</html>