关于java:商品新增中类目的实现

工具栏菜单阐明

入门案例介绍

toolbar: [{          
                  iconCls: 'icon-help',
                  handler: function(){alert("点击工具栏")}      
                  },{
                  iconCls: 'icon-help',          
                  handler: function(){alert('帮忙工具栏')}      
                  },'-',{
                      iconCls: 'icon-save',
                      handler: function(){alert('保留工具栏')}
                  },{
                      iconCls: 'icon-add',
                      text:  "测试",
                      handler: function(){alert('保留工具栏')}
                  }]

表格中的图标款式

页面构造：

页面弹出框成果

$("#btn1").bind("click",function(){

            // 留神必须选中某个 div 之后进行弹出框展示
            $("#win1").window({
                title:"弹出框",
                width:400,
                height:400,
                modal:false   // 这是一个模式窗口，只能点击弹出框，不容许点击别处
            })
        })

树形构造展示

商品分类目录构造

阐明：个别的商品分类信息都是三级目录。
表设计：个别在展示父子级关系时，采纳 parent_id 的形式展示目录信息。

树形构造入门 –html 构造

<script type="text/javascript">
    /* 通过 js 创立树形构造 */
    $(function(){$("#tree").tree({
            url:"tree.json",        // 加载近程 JSON 数据
            method:"get",            // 申请形式  get
            animate:false,            // 示意显示折叠端口动画成果
            checkbox:true,            // 表述复选框
            lines:false,                // 示意显示连接线
            dnd:true,                // 是否拖拽
            onClick:function(node){    // 增加点击事件
                
                // 控制台
                console.info(node);
            }
        });
    })
</script>

树形构造入门 -JSON 串构造

一级树形构造的标识。
“[{“id”:“3”,“text”:“吃鸡游戏”,“state”:“open/closed”},{“id”:“3”,“text”:“吃鸡游戏”,“state”:“open/closed”}]”

VO 对象封装 -EasyUITree

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree implements Serializable {

    private Long id;        // 节点 ID 信息
    private String text;    // 节点的名称
    private String state;   // 节点的状态   open 关上  closed 敞开
}

商品分类展示

页面剖析

<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>

页面 JS 标识

页面 URL 标识：

编辑 ItemCatController

 /**
     * 业务需要: 用户通过 ajax 申请, 动静获取树形构造的数据.
     * url:  http://localhost:8091/item/cat/list
     * 参数: 只查问一级商品分类信息   parentId = 0
     * 返回值后果:  List<EasyUITree>
     */
    @RequestMapping("/list")
    public List<EasyUITree> findItemCatList(){

        Long parentId = 0L;
        return itemCatService.findItemCatList(parentId);
    }

编辑 ItemCatService

/**
     * 返回值:  List<EasyUITree> 汇合信息
     * 数据库查问返回值:  List<ItemCat>
     * 数据类型必须手动的转化
     * @param parentId
     * @return
     */
    @Override
    public List<EasyUITree> findItemCatList(Long parentId) {
        //1. 查询数据库记录
        QueryWrapper<ItemCat> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("parent_id", parentId);
        List<ItemCat> catList = itemCatMapper.selectList(queryWrapper);

        //2. 须要将 catList 汇合转化为 voList  一个一个转化
        List<EasyUITree> treeList = new ArrayList<>();
        for(ItemCat itemCat :catList){Long id = itemCat.getId();
            String name = itemCat.getName();
            // 如果是父级 应该 closed   如果不是父级 应该 open
            String state = itemCat.getIsParent()?"closed":"open";
            EasyUITree tree = new EasyUITree(id, name, state);
            treeList.add(tree);
        }
        return treeList;
    }

页面成果展示