jqueryEasyUI treegrid简单实现

淡定情绪

浏览: 27048 次
性别:
来自: 北京

最近访客更多访客>>

shansheng

xuemo123

lancewoo

zonglezuo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jqueryEasyUI，treegrid

导入easyUi的工具包

在jsp页面引入

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Client Side Pagination in TreeGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/easyui/themes/icon.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/easyui/jquery.easyui.min.js"></script>
<style type="text/css">
    .easyui-accordion ul
    {
        list-style-type: none;
        margin: 0px;
        padding: 10px;
    }
    .easyui-accordion ul li
    {
        padding: 0px;
    }
    .easyui-accordion ul li a
    {
        line-height: 24px;
    }
    .easyui-accordion ul li div
    {
        margin: 2px 0px;
        padding-left: 10px;
        padding-top: 2px;
    }
    .easyui-accordion ul li div.hover
    {
        border: 1px dashed #99BBE8;
        background: #E0ECFF;
        cursor: pointer;
    }
    .easyui-accordion ul li div.hover a
    {
        color: #416AA3;
    }
    .easyui-accordion ul li div.selected
    {
        border: 1px solid #99BBE8;
        background: #E0ECFF;
        cursor: default;
    }
    .easyui-accordion ul li div.selected a
    {
        color: #416AA3;
        font-weight: bold;
    }
</style>

jsp页面的引用

<table title="Folder Browser" class="easyui-treegrid" style="width:auto; height:400px"
			data-options="
				url: '<%=request.getContextPath() %>/classify/findClassifyList1.do',
				method: 'get',
				rownumbers: true,
				idField: 'id',
				treeField: 'name',
				animate: true,
				showFooter:true
			">
			
			
			
		<thead>
			<tr>
				<th data-options="field:'name'" width="220">名称</th>
				<th data-options="field:'sort'" width="220" align="right">排序</th>
				<th data-options="field:'caozuo'" width="220" align="right">操作</th>
			</tr>
		</thead>
	</table>

后台数据处理

实体javabean

public class Classify {
    //分类id
	private int id;
	//上级分类id
	private int pid;
	//分类名称
	private String name;
	//排序
	private int sort;
	//层级关系
	private int level;
	//每个节点下面的所有子节点的总数
	private int childrenCount;
	//所有子节点的id
	private String childrenId;
	
	private String caozuo;
	
	private String state;
	
	public String getCaozuo() {
		return caozuo;
	}
	public void setCaozuo(String caozuo) {
		this.caozuo = caozuo;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public int getPid() {
		return pid;
	}
	public void setPid(int pid) {
		this.pid = pid;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getSort() {
		return sort;
	}
	public void setSort(int sort) {
		this.sort = sort;
	}
	public int getLevel() {
		return level;
	}
	public void setLevel(int level) {
		this.level = level;
	}
	public int getChildrenCount() {
		return childrenCount;
	}
	public void setChildrenCount(int childrenCount) {
		this.childrenCount = childrenCount;
	}
	public String getChildrenId() {
		return childrenId;
	}
	public void setChildrenId(String childrenId) {
		this.childrenId = childrenId;
	}
	public String getState() {
		return state;
	}
	public void setState(String state) {
		this.state = state;
	}

后台数据处理

@RequestMapping("/classify/findClassifyList1.do")
	public void findClassifyList1(Classify classify,HttpServletResponse response,HttpServletRequest request) throws IOException{
		String id = request.getParameter("id");
		if(id==null){
			id="0";
		}
		List<Classify> classifyList=classifyService.getTreeClassifyList(Integer.parseInt(id));
		List<Classify> classifyList2 = classifyService.getAllTreeClassifyList();
		for (Classify classify2 : classifyList) {
			String state = "open";
			if (hasChildNode2(classifyList2, classify2.getId())) {
				state = "closed";
			}
			classify2.setState(state);
			classify2.setCaozuo("[<a href='javascript:;' onclick='deleteClassifyById("+classify2.getId()+")' class='delete' val='78'>删除</a>]/[<a href='../classify/findClassifyById.do?id="+classify2.getId()+"'>编辑</a>]");
		}
		JSONArray a =JSONArray.fromObject(classifyList);
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		out.print(a);
		out.flush();
	}
	
	
	private boolean hasChildNode2(List<Classify> menuAllList, int menuId) {
		for (Classify menu : menuAllList) {
			if (menu.getPid() == menuId) {
				return true;
			}
		}
		return false;
	}

实现效果