关于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;
    }

页面成果展示