一.需求：

在点击添加按钮后，使用EasyUI的插件，将数据库中的数据异步查询显示到页面上

效果如下：

页面效果：

数据库数据：

二.功能实现：

2.1 前端部分

页面效果如下图

HTML和CSS部分内容：

<tr><td>商品类目:</td><td><a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a><input type="hidden" name="cid" style="width: 280px;"></input></td></tr><tr><td>商品标题:</td><td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td></tr><tr><td>商品卖点:</td><td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td></tr>

负责生成树形菜单的JS代码：

initItemCat : function(data){$(".selectItemCat").each(function(i,e){var _ele = $(e);if(data && data.cid){_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");}else{_ele.after("<span style='margin-left:10px;'></span>");}_ele.unbind('click').click(function(){$("<div>").css({padding:"5px"}).html("<ul>").window({width:'500',height:"450",modal:true,closed:true,iconCls:'icon-save',title:'选择类目',onOpen : function(){var _win = this;$("ul",_win).tree({//url请求，Control层对应地址url:'/item/cat/list',animate:true,onClick : function(node){if($(this).tree("isLeaf",node.target)){// 填写到cid中_ele.parent().find("[name=cid]").val(node.id);_ele.next().text(node.text).attr("cid",node.id);$(_win).window('close');if(data && data.fun){data.fun.call(this,node);}}}});},onClose : function(){$(this).window("destroy");}}).window('open');});});},

2.2 后端部分

1）使用一个JavaBean封装树形菜单中的信息

public class EasyUITreeResult implements Serializable{/**分类id*/long id;/**分类名称*/String text;/**是否有子节点的标识，close表示有子节点，open表示没有子节点*/String state;public long getId() {return id;}public void setId(long id) {this.id = id;}public String getText() {return text;}public void setText(String text) {this.text = text;}public String getState() {return state;}public void setState(String state) {this.state = state;}
}

2）Control层处理请求返回结果

@RequestMapping("/item/cat/list")
@ResponseBody
public List<EasyUITreeResult> getItemCat(@RequestParam(name = "id",defaultValue = "0")Long parentId){//进行数据库查询，返回数据List<EasyUITreeResult> list = itemCatService.getTbItemCat(parentId);//将查询出的数据返回给页面return list;}

使用EasyUI加载树形菜单相关推荐

jQuery-EasyUI异步加载树形菜单
为什么80%的码农都做不了架构师?>>> 1]把tree定义在一个空<ul>元素 <div><ul id="layout_west_tr ...
ZUI 动态加载树形菜单+动态打开Tab
appData数据: {"code": 0,"msg": "操作成功","data": [{"AppGUID& ...
BOS12——多对多添加方法，多对多页面需要字段问题（不多的话直接提供get方法），修改Realm中授权方法（查询数据库），缓存Java对象的方法，加载左侧菜单（ztree提供pId）...
1.多对多添加方法 @Override public void add(Role model, String functionIds) {// 1.先将角色保存到数据库roleDao.save(mod ...
Vue3 中如何加载动态菜单？
松哥之前写了两篇文章和大家分享了 TienChin 项目中的菜单数据问题,还没看过的小伙伴请戳这里: Vue 里,多级菜单要如何设计才显得专业? TienChin 项目动态菜单接口分析这两篇文章主要 ...
EasyUI加载外部页面需要使用html片段
最后总结,如果使用easyui中加载外部界面的组件,例如:panel,window,dailog,tabs等.请确保引入的界面是一个html片段.html片段正确的写法再次提醒不要出现<html ...
easyui加载后台数据笔记
一.直接加载本地数据 <table class="easyui-datagrid" style="width:400px;height:250px"dat ...
html 动态加载的菜单当菜单点击一下，打开接着又关闭
当菜单点击一下,打开接着又关闭有可能是jquery 加载了两遍认真检查一下代码
Vue + Spring Boot 项目实战（十五）：动态加载后台菜单
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.后端实现 1.表设计 2.pojo 3.菜单查询接口(树结构查询) 二.前端实现 1.后台页面设计 2.数据处理 3.添 ...
加载cad菜单（.mns .mnu .cuix文件）
加载菜单 bool PhdUtility::LoadCadMenu(const CString& strMenuFileName, const CString& strMenuGrou ...
Android RecyclerView设置分割线 / 下拉加载 / 选项菜单进行增加删除动画
首先看一下我的整个程序: 主类: package com.example.day02rk;import android.os.Bundle; import android.support.v4.con ...

使用EasyUI加载树形菜单

一.需求：

效果如下：

二.功能实现：

2.1 前端部分

2.2 后端部分

1）使用一个JavaBean封装树形菜单中的信息

2）Control层处理请求返回结果

使用EasyUI加载树形菜单相关推荐

最新文章

热门文章