asp.net 2.0 实现无限级无刷新二级联动

最新推荐文章于 2024-07-13 19:30:00 发布

mengxj85

最新推荐文章于 2024-07-13 19:30:00 发布

阅读量1.1k

点赞数

文章标签： asp.net function table string server xhtml

本文链接：https://blog.csdn.net/mengxj85/article/details/4237621

版权

昨天有一个网提友出这个需求，觉得以前实现过相似的，于是在睡前花一段时间做一个例子

主要用到JS和asp.net2.0的客户回调

html code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="table_dropdownlist.aspx.cs" Inherits="mytest_table_dropdownlist" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
<script type="text/javascript">
var step="";//step表示是第几级的联动
//异步回调
function callServer(input,str)//step表示是第几级的联动
{
    debugger;
    step = str;
//    var arg = step + input.value; //区别是哪一个层次的回调
    var arg=input.value;
    //删除原来的控件，在选择下拉框项时，先将该下拉框之后的所有联动控件删除
    DeleteTableCol();
    if(input.value != "0")//选择了有意义的值，在这里，下拉框里有一行是请选择，对应的value为0
    {
        //添加联动控件
        AddTableCol();
        var context= document.getElementById("ddl"+step);
        <%= ClientScript.GetCallbackEventReference(this, "arg", "receiveServerData", "context")%>;
    }
}
//接受服务器回传的数据
function receiveServerData(_serverResult, context)
{
context.length=0;
//如果回调值为空，说明上一级的回调没有子集了，则删除在触发回调时添加的控件
if(_serverResult.length == 0)
{
      DeleteTableCol();
}
else
{
      var arrData = _serverResult.split(",");
      for (var i = 0; i < arrData.length; i++)
      {
         var data = arrData[i].split("@");
         context.options[context.length] = new Option(data[1],data[0]);
       }
   }
}

//添加列
function AddTableCol()
{
    var tr=document.getElementById("mytr");
    newtd=tr.insertCell();
    newtd.id="td"+step;
    var id = "ddl"+step;
    var i = Number(step)+1;
    newtd.innerHTML="<select id=/""+id+"/" name='mySelect' style='width:100px;' οnchange='callServer(this,"+i+")'><option></option></select>";
    newtd.style.width="100px";
}

//删除列
function DeleteTableCol()
{
    var tdnum=document.getElementById("mytr").cells.length;
    var tr=document.getElementById("mytr");
    for (var i=tdnum-1; i>step; i--)
    {
        try{
            tr.deleteCell(i);
        }
        catch(e)
        {;}
    }
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="mytb">
            <tr id="mytr">
                <td><asp:DropDownList ID="ddl" runat="server" οnchange="callServer(this,0)">
                    </asp:DropDownList></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

C# code

public partial class mytest_table_dropdownlist : System.Web.UI.Page, ICallbackEventHandler
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            ddl.DataSource = DataAccess.ExecuteSelectCommand("select id,name from mytb where parentId=0");
            this.ddl.DataTextField = "MRSName";
            this.ddl.DataValueField = "MeetingRoomSubregionID";
            this.ddl.DataBind();
            this.ddl.Items.Insert(0, new ListItem("--请选择--", "0"));
        }
    }
    private string _serverResult = ""; // 用于保存回调内容
    public void RaiseCallbackEvent(string eventArgument)
    {
        DataTable mydt = DataAccess.ExecuteSelectCommand("select id, name from mytb where parentId=" + eventArgument + "");
        if (mydt != null)
        {
            if (mydt.Rows.Count != 0)
            {
                _serverResult = "0" + "@" + "--请选择--";
            }
            foreach (DataRow row in mydt.Rows)
            {
                if (_serverResult.Equals(string.Empty))
                {
                    _serverResult = row["id"] + "@" + row["name"].ToString();
                }
                else
                {
                    _serverResult = _serverResult + "," + row["id"] + "@" + row["name"].ToString();
                }
            }
        }
    }
    //返回数据结果
    public string GetCallbackResult()
    {
        return _serverResult;
    }
}

//数据库表结构如下

id ,name,parentId

后台取值

request.form["myselect"].tostring();

mengxj85

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
asp.net 2.0 实现无限级无刷新二级联动

昨天有一个网提友出这个需求，觉得以前实现过相似的，于是在睡前花一段时间做一个例子主要用到JS和asp.net2.0的客户回调html codehttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 无标题页var step="";//step表示是第几级
复制链接

扫一扫