ASP.NET MVC关于Ajax以及Jquery的无限级联动

---恢复内容开始---

第一次发表博文，发表博文的目的是巩固自己的技术，也能够共享给大家。写的不好的地方，希望大家多给给意见。老司机勿喷

 

数据结构（）

NewsTypeId 新闻ID，

NewsTypeName 新闻名称

NewsTypeParentId 父级ID

 

后台语言：ASP.NET MVC4

 

后台代码：

  /// <summary>

        /// JSON格式的List集合

        /// </summary>

        /// <returns></returns>

        public JsonResult FnNewsTypeList()

        {

            int NewsTypeParentId = -1;

            if (!string.IsNullOrEmpty(Request["NewsTypeParentId"]))

            {

                NewsTypeParentId = Convert.ToInt32(Request["NewsTypeParentId"]);

            }

            Maticsoft.BLL.NewsType NTbll = new Maticsoft.BLL.NewsType();

            StringBuilder strWhere = new StringBuilder();

            if (NewsTypeParentId != -1)

            {

                strWhere.AppendLine(" AND NewsTypeParentId ='" + NewsTypeParentId+"'");

            }

            List<Maticsoft.Model.NewsType> NTList = NTbll.NewsTypeList(strWhere.ToString());

            return Json(NTList);

        }

 

 

页面布局：

 <div class="form-group ">

     <label class="col-sm-3 control-label">所属类型：</label>

     <div class="col-sm-8" id="cat">

         <select id="NewsTypeParentId_0" onchange="FirstChange(0)" name="NewsTypeParentId" class="form-control" aria-describedby="firstname-error" aria-invalid="true">

             <option value="0">请选择</option>

             <option value="1">1</option>

         </select>

     </div>

 </div>

 

 

Jquery语言：

Jquery代码：

//页面第一次加载时，将父级为最高级的类型读取出来

<script>

 $(function () {

            $.ajax({

                type: "POST",

                url: "/NewsType/FnNewsTypeList",

                data: {

                    NewsTypeParentId: 0

                },

                dataType: "JSON",

                success: function (data) {

                    var SelectArray = new Array();

                    SelectArray.push("<option value=\"0\">请选择</option>")

                    for (var i = 0; i < data.length; i++) {

//使用Array拼接Html页面

                        SelectArray.push("<option value=\"");

                        SelectArray.push(data[i].NewsTypeId);

                        SelectArray.push("\">");

                        SelectArray.push(data[i].NewsTypeName);

                        SelectArray.push("</option>");

                    }

//寻找最高级分类追加数据

                    var SelectDom = $("[name=NewsTypeParentId]:eq(0)")

                    SelectDom.find("option").remove()

//Array 的 join 方法，将所有的Html内容连接

                    SelectDom.append(SelectArray.join(""))

                }

            })

           

        })

 

 

//下拉框发生改变触发的时间

ThisId 是当前所属Select的Id属性

ChildId 是当前Select的下一级的Select 的ID属性

 

FirstChange是当下拉框改变时执行的第一个事件

 function FirstChange(ThisId) {

            var ChildId= parseInt(ThisId) + 1;

            SecondChange(ThisId, ChildId)

        }

 

//SecondChange 是寻找被点击Select下的所有下N级Select，如果存在，则先移除所有下级Select

 

        function SecondChange(ThisId, ChildId) {

            $("#NewsTypeParentId_" + ThisId)

            var ParentVal = $("#NewsTypeParentId_" + ThisId).val();

            //while循环判断下一个select 是否存在，如存在则删除直到不存在为止

            doChildId= ChildId;

            do {

                if ($("#NewsTypeParentId_" + doChildId).length > 0) {

                    $("#NewsTypeParentId_" + doChildId).remove();

                    doChildId++;

                } else {

                    break;

                }

            } while (1)

            if (ParentVal != '') {

//当被点击的Select值存在时，这时已将其下属的所有Select清楚，重新调用数据进行生成

                NewsTypeParentId(ParentVal, ChildId);

            }

        }

//Ajax读取数据进行追加生成

        function NewsTypeParentId(ParentVal, ChildId) {

            if (ParentVal != 0) {

                $.ajax({

                    type: "POST",

                    url: "/NewsType/FnNewsTypeList",

                    data: {

                        NewsTypeParentId: ParentVal

                    },

                    dataType: "JSON",

                    success: function (data) {

//返回值data是JSON格式，当data存在数据时，表示存在下级，进行数据处理和Html生成

//Select的ID属性值为NewsTypeParentId_?  从第一级开始，依次为0,1,2,3,4...

                        if (data.length > 0) {

                            var SelectArray = new Array();

                            SelectArray.push("");

                            SelectArray.push("<select id=\"NewsTypeParentId_");

                            SelectArray.push(ChildId);

                            SelectArray.push("\" onchange=\"FirstChange(");

                            SelectArray.push(ChildId);

                            SelectArray.push(")\" name=\"NewsTypeParentId\" class=\"form-control\" ");

                            SelectArray.push("aria-describedby=\"firstname-error\" aria-invalid=\"true\">");

                            SelectArray.push("<option value=\"0\">请选择</option> ")

                            for (var i = 0; i < data.length; i++) {

                                SelectArray.push("<option value=\"");

                                SelectArray.push(data[i].NewsTypeId);

                                SelectArray.push("\">");

                                SelectArray.push(data[i].NewsTypeName);

                                SelectArray.push("</option> ");

                            }

                            SelectArray.push("</select>");

//最后将此Select追加至DIV末端

                            $("#cat").append(SelectArray.join(""))

                        }

                    }

                })

            }

        }

 

 

 

Jquery最后传参数添加数据时，做某些数据处理

//ParentVal是最后一级Select的值，当未选中任何项时，则选择上一级数据

 var ParentVal = $("[name=NewsTypeParentId]:last").val();

                if (ParentVal == 0) {

//寻找最后一个Select的索引

//将索引-1

                    var SelectIndex = $("[name=NewsTypeParentId]:last").index();

                    SelectIndex = SelectIndex - 1;

                    ParentVal = $("[name=NewsTypeParentId]:eq(" + SelectIndex + ")").val();

                }

</script>

---恢复内容结束---

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有