KenDoui实现无限级导航菜单

来源：互联网发布：android软件开发工具包编辑：程序博客网时间：2024/06/06 12:54

这导航菜单花费了好多时间，在此记录下来，希望对有需要的朋友提供一些帮助，好了废号不多说。。。。。

第一步，创建数据库

第二步，编写jsp页面代码

<body>

<ul id="menu"></ul>

</body>
<script type="text/javascript">
//1.创建一个空菜单
var menu = $("#menu").kendoMenu({}).data("kendoMenu");
//2.创建一个数据源
var ds = new kendo.data.DataSource({
transport : {//传输读取方式
read : {
url : "<%=basePath %>kendomenu/findMenu.spring",
dataType : "json"
}

},
schema : {
data : function(data) {
//4.将得到的数据源添加到菜单中
menu.append(data);
}
}
});
//3.手动触发数据源的read
ds.read();
</script>

第三步：编写后台代码，我这用的是ssm框架弄的

1、接口的方法就2个

2、Mapper.xml

3、dao层

4、alldao类也贴出来吧，里面其实就是一个管理到的一个总类，方便进行调用

第四、sercice层

allservice类

第五、controller层

@Controller
@RequestMapping("kendomenu")
public class KendoMenuAction {
@Autowired
private AllService allservice;

@RequestMapping("findMenu")
public String findAllMenu(HttpServletResponse response) throws IOException {
JSONArray jsonArray = new JSONArray();
// 查询所有菜单
List<kendoMenu> list = allservice.getKendoMenuService().findAllMenus();
for (int i = 0; i < list.size(); i++) {
JSONObject jsonObject = new JSONObject();
kendoMenu kendoMenu = list.get(i);
if (kendoMenu.getItems().doubleValue() == 0) {

jsonObject.put("id", kendoMenu.getId());
jsonObject.put("items", kendoMenu.getItems());
jsonObject.put("text", kendoMenu.getText());
jsonObject.put("url", kendoMenu.getUrl());
// 获得子节点
List<kendoMenu> chid = getChild(list.get(i).getId());
if (chid != null && chid.size() != 0) {
jsonObject.put("items", chid);
}
jsonArray.add(jsonObject);
}

}

// 输出信息到页面
response.setContentType("application/json;charset=UTF-8");
response.getWriter().println(jsonArray.toString());
return null;
}

// 根据父节点id获得相应的子节点
public List<kendoMenu> getChild(BigDecimal itmes) {
JSONArray jsonArrayChid = new JSONArray();

List<kendoMenu> list = allservice.getKendoMenuService().getNodeById(itmes); // 查询该父节点的所有子节点

for (int i = 0; i < list.size(); i++) {
JSONObject jsonObjectChid = new JSONObject();
kendoMenu kendoMenu2 = list.get(i);
jsonObjectChid.put("id", kendoMenu2.getId());

jsonObjectChid.put("it", kendoMenu2.getItems());// 这名称不能写items因为kendoui会当做这个父节点下有子节点
jsonObjectChid.put("text", kendoMenu2.getText());
jsonObjectChid.put("url", kendoMenu2.getUrl());

List<kendoMenu> chid2 = getChild(list.get(i).getId());// 在次查询该子节点下是否还有子节点
if (chid2 != null && chid2.size() != 0) {// 非空判断，不判断会多添加一个空的items
jsonObjectChid.put("items", chid2);
}
jsonArrayChid.add(jsonObjectChid);
}

return jsonArrayChid;

}
}

到此就完成了，实现的菜单如下

0 0