运用jQuery通过AJAX向后台请求拼装json数据格式，并初始化目录树TreeView

最近项目中需要用到目录树结构，采用bootstrap-treeview插件，数据从后台请求。

插件依赖：

• jQuery
• Bootstrap

引入treeview插件：

<script src="static/onlineservice/js/plugins/bootstrap-treeview/bootstrap-treeview.js"></script>

treeview插件的数据结构：

var defaultData = [
    {
        text: 'Parent 1',
        nodes: [
            {
                text: 'Child 1',
                nodes: [
                    {
                        text: 'Grandchild 1',
                    },
                    {
                        text: 'Grandchild 2',
                    }
                ]
            },
            {
                text: 'Child 2',
            }
        ]
    },
    {
        text: 'Parent 2',
    },
    {
        text: 'Parent 3',
    },
    {
        text: 'Parent 4',
    },
    {
        text: 'Parent 5',
    }
];

为此，需要将后台查询的数据组装成同样的数据结构。

数据库结构：

以防控区分级为例，一共三级目录，每一级有一个父ID，第一级父ID为空，通过父ID可以找到它所对应的所有子级目录。

每个防控区对应一个FKQ_CODE，PID表示该防控区的父级FKQ_CODE。

Controller层代码：

前台传入防控区的等级

@RequestMapping(value = "/getFullFkq", method = RequestMethod.POST)
@ResponseBody
public JsonResult getFullFkq(int level) {

    JsonResult jsonResult = JsonResult.getInstance();
    String treeData = null;

    logger.debug("getFullFkq------------------------------");

    try {
        treeData = fkqService.getFullFkq(level);
        jsonResult.addParam("fkqEntityList", treeData);
        jsonResult.setSuccess(true);
    } catch (Exception e) {
        jsonResult.setSuccess(false);
    }

    return jsonResult;
}

Service层：

在该处拼装json字符串

/**
 * 根据等级获取所有防控区，并根据PID嵌套关系拼装json字符串
 * @param level
 * @return
 * @throws Exception
 */
public String getFullFkq(int level) throws Exception {
    logger.debug("getFkqByCondition:" + level);
    List<FkqEntity> fkqEntityList = (List<FkqEntity>) dao.findForList("com.yhdr.xn.FkqEntityMapper.selectByLevel", level);
    List<FkqEntity> nodes = null;
    String subNodes = "";
    for (FkqEntity fkqEntity1 : fkqEntityList) {
        subNodes += "{text:'" + fkqEntity1.getFkqName() + "',id:'" + fkqEntity1.getPid() + "',";
        String pid = fkqEntity1.getFkqId();
        nodes = getNodesByFId(pid);
        if (!nodes.isEmpty()) {
                subNodes += "nodes:[";
                for (FkqEntity fe : nodes) {
                    subNodes += "{text:'" + fe.getFkqName() + "',id:'" + fe.getFkqId() + "',";
                    if (!getNodesByFId(fe.getPid()).isEmpty()) {
                        subNodes += "nodes:[";
                        for (FkqEntity fee : getNodesByFId(fe.getPid())) {
                            subNodes += "{text:'" + fee.getFkqName() + "',id:'" + fee.getFkqId() + "'},";
                        }
                        subNodes += "],";
                    }
                    subNodes += "},";
                }
                subNodes += "],";
        }

        subNodes += "},";
    }
    logger.debug("subNodes:" + subNodes);

    return subNodes;
}

/**
 * 根据父ID查询子节点
 * @param pid
 * @return
 * @throws Exception
 */
public List<FkqEntity> getNodesByFId(String pid) throws Exception {
    logger.debug("getNodesByFId:" + pid);
    List<FkqEntity> subNodesList =(List<FkqEntity>) dao.findForList("com.yhdr.xn.FkqEntityMapper.getNodesByFId", pid);
    return subNodesList;
}

mybatis：

<select id="getNodesByFId" parameterType="java.lang.String" resultMap="BaseResultMap">
  select
  <include refid="Base_Column_List" />
  from t_yhdr_xn_bu_fkq t
  WHERE t.PID = #{pid, jdbcType=VARCHAR}
</select>

最后在前台读出返回参数之后再通过eval()函数解析json字符串：

$.ajax({
    url: "fkq/getFullFkq.do",
    type : "post",
    async : false,
    data : "level=1",
    dataType : "json",
    success : function (result) {
        idata = result.params.fkqEntityList;

        var json = eval('[' + idata + ']');
        console.log(json);

        $('#tree').treeview({
            levels: 1,
            selectedBackColor: "#31AEEE",
            data: json
        });

    },
    error : function (errorMsg) {
        idata = null;
    }
});

最后完成目录树构建：

本文主要为了记录自己所写过的一些代码片段，如果您看到有不正确的地方，还望纠正，非常感谢。