工具栏菜单阐明
入门案例介绍
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@AllArgsConstructorpublic 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; }