工具栏菜单阐明
入门案例介绍
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;
}
页面成果展示