运用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;
}
});

最后完成目录树构建：



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