无刷新无限级菜单联动

关注

原创最新推荐文章于 2024-10-15 12:52:15 发布 437 阅读 AI 写同款· GEO 优化 ›

基于 tp5 layui select 四级联动可无限级联动 html 部分 <div class="layui-form-item layui-form-pane"> <label class="layui-form-label">城市联动</label> <div class="layui-input-inline" > <select name="province" lay-verify="required" lay-search="" lay. 阅读详情

功能：无刷新无限级菜单联动(原创：申请加精)

Asp.Net(C#)+AjaxPro+MSSQL(需引用AjaxPro.2.dll)

Infinite_Class.aspx

C# code


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Infinite_Class.aspx.cs" Inherits="Web.AJAXPro.Infinite_Class" %>

<!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>Infinite_Class无限级分类测试(作者QQ：241181876)--转载请注明出处</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <span id="select1"></span></div>
        <hr />
        <div id="test">ttt</div>
        <input type="button" value="设置值" onclick="iaocLianDong.SetValue(1,4,12,14,15,16,17,18,19);">
        <input type="button" value="取值" onclick="alert(iaocLianDong.GetValue());">
        <input type="button" value="读取第一个值" onclick="alert(document.getElementById('select1').childNodes[0].value)" />
        <script language="javascript" type="text/javascript" defer="defer">    
        //Infinite_Class无限级分类测试(作者QQ：241181876)--转载请注明出处   
        function CreateOption(i1,pid1,myWebClientID)
        {
            var myWebClientID = document.getElementById(myWebClientID);
            this.CreateNewOption = function(i,pid)
            {
                var arr = Web.AJAXPro.Infinite_Class.GetClassList(""+pid+"").value;
                while(myWebClientID.childNodes.length-1>=i)
                {
                    myWebClientID.removeChild(myWebClientID.childNodes[myWebClientID.childNodes.length - 1]);
                }
                var tmp;
                var created = false;
                for ( var j = 0; j < arr.Rows.length; j++)
                {
                    if (arr.Rows[j][arr.Columns[2].Name] == pid)
                    {
                        if (created==false)
                        {
                            created = true;
                            tmp = document.createElement("select");
                            tmp.setAttribute("id", "liandong_" + i);
                            //tmp.setAttribute("multiple", "multiple");//
                            tmp.options[tmp.length] = new Option("请选择", "-1");
                            tmp.onchange = function()
                            {
                                pp(parseInt(tmp.getAttribute("id").replace("liandong_",""))+1,tmp.value);
                            };
                            myWebClientID.appendChild(tmp);
                        }
                        tmp.options[tmp.options.length] = new Option(arr.Rows[j][arr.Columns[1].Name], arr.Rows[j][arr.Columns[0].Name]);
                    }
                }
            }
            var pp = this.CreateNewOption;
            
            this.GetValue = function()
            {
                var value = "";
                for (var i=0; i<myWebClientID.childNodes.length; i++)
                {
                    var obj = myWebClientID.childNodes[i];
                    for (var j=0; j<obj.options.length; j++)
                    {
                        if (obj.options[j].selected)
                        {
                            value += obj.options[j].value + ",";
                            break;
                        }
                    }
                }
              return value;
            }
            
            this.SetValue = function()
            {
                for (var i=0; i<arguments.length; i++)
                {
                    myWebClientID.childNodes[i].value = arguments[i];
                    this.CreateNewOption(i+1, arguments[i]);
                }
            }
            
            this.CreateNewOption(i1,pid1);
         }
        var iaocLianDong = new  CreateOption(0,0,"select1");
        </script>
    </form>
</body>
</html>

Infinite_Class.aspx.cs

C# code


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using BLL;
//Infinite_Class无限级分类测试(作者QQ：241181876)--转载请注明出处,感谢 小灰 提供指导
namespace Web.AJAXPro
{
    public partial class Infinite_Class : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(Infinite_Class));
        }

        [AjaxPro.AjaxMethod]
        public DataTable GetClassList(string pid)
        {
            SqlConnection conn = new SqlConnection("Server=.;DataBase=IAOC;uid=sa;pwd=");
            conn.Open();
            SqlCommand cmd = new SqlCommand("Select Cid,ClassName,pid from InfiniteClass Where pid=" + pid + " order by orderby desc", conn);
            DataTable dt = new DataTable("class");
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            sda.Fill(dt);
            conn.Close();
            return dt;
        }

    }
}

SQL测试环境

SQL code


use zdl_data
CREATE TABLE [dbo].[InfiniteClass](
    [cid] [int] IDENTITY(1,1) NOT NULL,
    [PID] [int] NULL,
    [ClassName] [nvarchar](50) NULL,
    [Orderby] [int] NULL,
)

insert into InfiniteClass(PID,ClassName,OrderBy) values(0,'a1',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(0,'b2',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(0,'c3',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(1,'a11',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(1,'a12',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(1,'a13',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(1,'a14',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(2,'b21',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(2,'b22',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(3,'c31',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(3,'c32',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(4,'a1111',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(4,'a1112',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(12,'a11111',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(14,'a111111',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(15,'a1111111',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(16,'a11111111',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(17,'a111111111',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(18,'a1111111111',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(8,'b211',1)
insert into InfiniteClass(PID,ClassName,OrderBy) values(20,'b2111',1)