jstree与Bootstrap-table结合案例

前言

最近俺找了个实习的工作，第一次来实习，带我的老师给安排了一个小任务，要把地域按树形结构显示出来。
最开始采用的是BootBtrap-Table-Treegird组件，但是数据量3000多条，渲染就要5、6分钟，时间太长了，PASS掉。
接下去就去找能不能使用异步加载的方式，可惜，官方地址说不支持异步加载。本着学习的态度又去找了大佬maskainv的文章，改造bootstrapTreeTable插件实现异步加载（文章地址在这，有兴趣的大佬可以看一看：改造bootstrapTreeTable插件实现异步加载）。
可能是我太菜了吧，不会用，然后又去看了大佬XKIND的文件，终于把共通文件 jquery.treegrid.extension.js改成了异步加载（同样，有兴趣的大佬可以看一看：【JavaScript】bootstrap-table-treegrid 异步加载实现）。
终于成功了，满心欢喜的去找老师，结果老师说你把共通文件改了，不能保证前面做的东西不受影响，不可能把前面的东西全部检查一遍。没办法，我只能回来改了。
最后，经过我在网上找了两天的内容，选择用jstree与Bootstrap-table结合实现这个功能。

实现效果

这是实现的效果：
左边的树状图，你点击每一个区域，右边表格会加载对应的区域及其下级区域

正文

数据库部分

数据库设计

先来看看数据库模型：

字段解释：code是区域编码，parentCode是父级区域编码（注：省级的父级区域编码为0），type呢是区域等级（分别是：0-省级，1-市级，2-区级（县级））。

数据库查询

这里我用了两个查询语句，第一个是查询出左边的树状图，第二个是查询出右边的表内容。
查询语句如下：

<select id="list" resultType="com.cirea.common.domain.AreaDO">
		select `code`,`parentCode`,`name`,`regionalismCode`,`type`,`province`,`city`,`area`,`areaCode`,`zipCode` from sys_area
        <where> type != 2
			<if test="code != null and code != ''"> and code = #{code} </if>
			<if test="parentcode != null and parentcode != ''"> and parentCode = #{parentcode} </if>
			<if test="name != null and name != ''"> and name = #{name} </if>
			<if test="regionalismcode != null and regionalismcode != ''"> and regionalismCode = #{regionalismcode} </if>
			<if test="type != null and type != ''"> and type = #{type} </if>
			<if test="province != null and province != ''"> and province = #{province} </if>
			<if test="city != null and city != ''"> and city = #{city} </if>
			<if test="area != null and area != ''"> and area = #{area} </if>
			<if test="areacode != null and areacode != ''"> and areaCode = #{areacode} </if>
			<if test="zipcode != null and zipcode != ''"> and zipCode = #{zipcode} </if>
		</where>
        <choose>
            <when test="sort != null and sort.trim() != ''">
                order by ${sort} ${order}
            </when>
			<otherwise>
                order by code
			</otherwise>
        </choose>
		<if test="offset != null and limit != null">
			limit #{offset}, #{limit}
		</if>
	</select>

	<select id="list2" resultType="com.cirea.common.domain.AreaDO">
		select `code`,`parentCode`,`name`,`regionalismCode`,`type`,`province`,`city`,`area`,`areaCode`,`zipCode` from sys_area
		<where> parentCode = #{parentCode} or code = #{parentCode} or name = #{name}
			<if test="code != null and code != ''"> and code = #{code} </if>
			<if test="parentcode != null and parentcode != ''"> and parentCode = #{parentcode} </if>
			<if test="name != null and name