select多级联动(级数可根据需求数据递增)

来源：互联网发布：linux设ip 编辑：程序博客网时间：2024/05/23 18:24

1、后台获取的数据格式为json格式数据。其格式如下:

{    "data": [        {            "id": "22",            "name": "亚洲",            "children": [                {                    "id": "23",                    "name": "韩国",                    "children": [                        {                            "id": "24",                            "name": "首尔",                            "children": []                        }                    ]                },                {                    "id": "45",                    "name": "中国",                    "children": [                        {                            "id": "46",                            "name": "北京",                            "children": []                        },                        {                            "id": "47",                            "name": "上海",                            "children": []                        },                        {                            "id": "50",                            "name": "深圳",                            "children": []                        }                    ]                },                {                    "id": "51",                    "name": "测试删名字很长很长很长很长很长很长",                    "children": [                        {                            "id": "53",                            "name": "测试空格输出",                            "children": []                        }                    ]                }            ]        },        {            "id": "25",            "name": "欧洲",            "children": [                {                    "id": "26",                    "name": "澳大利亚",                    "children": [                        {                            "id": "44",                            "name": "澳大利亚",                            "children": []                        }                    ]                },                {                    "id": "48",                    "name": "英国",                    "children": [                        {                            "id": "49",                            "name": "伦敦",                            "children": []                        }                    ]                }            ]        }    ],}

2.上面json数据通过可以通过ajax从后台数据提取组装，也可以js定义(不建议)，或者存为一个json文件。下面是页面的html代码和js代码：

页面只需要一个div即可：

<div class="category"></div>

js代码:

function createSelect(cityData) {if (cityData.length < 1) {return}var sele = document.createElement("select");sele.className = 'form-control';sele.add(new Option("-请选择-", -1));for (var i = 0; i < cityData.length; i++) {sele.add(new Option(cityData[i].name, cityData[i].id));}sele.onchange = function() {while (this != this.parentNode.lastChild) {this.parentNode.removeChild(this.parentNode.lastChild);}var i = this.selectedIndex;var cate = cityData[i - 1];if (i != 0 && cate.children) {createSelect(cate.children); // 递归调用}};$(".category").get(0).appendChild(sele);};

下面是项目中的一个从后台通过mybatis获取数据然后封装json的过程源码：

<resultMap id="RESULT_CASCADE_DESTINATION" class="com.ytr.trip.viewobject.CascadeDestinationVO" >  <result property="id" column="dest_id" javaType="java.lang.String" jdbcType="VARCHAR" />  <result property="name" column="dest_name" javaType="java.lang.String" jdbcType="VARCHAR" />  <result property="children" column="dest_id" select="destination.GET_CHILDREN_LIST"/><!-- 获取子节点 -->

  </resultMap>

<select id="GET-CASCADE_DESTINATION-LIST" resultMap="RESULT_CASCADE_DESTINATION"><![CDATA[SELECT * FROM destination dr WHERE  dr.level = 1 and team_id = #value# ]]></select><select id="GET_CHILDREN_LIST" resultMap="RESULT_CASCADE_DESTINATION"><![CDATA[SELECT * FROM destination dr WHERE  dr.parent_id = #value# ]]></select>

Dao层调用:

public List<CascadeDestinationVO> getCascadeDestinationList(Long teamId) {return getSqlMapClientTemplate().queryForList("destination.GET-CASCADE_DESTINATION-LIST", teamId);}//此处提示业务需要，传入了参数

获取的的list集合通过com.alibaba.fastjson;转成json即可.

阅读全文

0 0