23_使用dtree展示所有分类

使用dtree展示所有分类

• 步骤分析
• 代码实现

---

1）步骤分析

左边的dtree:

• 导入dtree.js
• 导入dtree.css
• 创建一个div,添加样式：class=“dtree”
• 在div中编写js
  • 创建一个树：d=new dTree(‘d’);
  • 添加根节点：d.add(当前节点id，父节点，显示名称，点击时要打开的连接，放上去显示的名称title，在哪个地方打开这个连接target)；
    注意：根节点的父节点id写-1
  • 添加其他节点
• 最后通过document.write(d)写到页面即可

分类信息添加

• 应在左边的dtree上添加链接(展示所有的分类信息:
  d.add(…，“store/adminCategory/findAll”,“mainFrame”)
• 创建adminCategoryservlet,编写findAll()
  将查询的结果list放入request中转发到/admin/category/list.jsp

---

2）代码实现

①在left.jsp中添加js

<script type="text/javascript">
		d = new dTree('d');
		d.add('01',-1,'系统菜单树');
		d.add('0102','01','分类管理','','','mainFrame');
		d.add('010201','0102','分类管理','${pageContext.request.contextPath}/adminCategory/findAll','','mainFrame');
		document.write(d);
	</script>

②完成AdminCategoryServlet

@WebServlet("/adminCategory/*")
public class AdminCategoryServlet extends HttpServlet{
   private static final long serialVersionUID = 788171461042516619L;
   
   private CategoryService categoryService=new CategoryServiceImpl();
   
   @Override
   protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   	//得到URI
   	String uri=request.getRequestURI();
   	//处理各个方法抛出的异常
   	try {
   		if(uri.endsWith("/findAll")) {
   			findAll(request,response);
   		}
   	} catch (Exception e) {
   		// TODO Auto-generated catch block
   		e.printStackTrace();
   		//抛出自定义异常
   		throw new MyException();
   	} 
   }
   private void findAll(HttpServletRequest request, HttpServletResponse response) throws Exception {
   	//1、调用categoryService查询所有分类信息返回值list
   	List<Category> list=categoryService.findAll();
   	//2、绑定转发
   	request.setAttribute("list", list);
   	request.getRequestDispatcher("/admin/category/list.jsp").forward(request, response);
   }
}

③在jsp页面展示数据

	<c:forEach var="c" items="${ list }" varStatus="vs">
		<tr onmouseover="this.style.backgroundColor = 'white'"
			onmouseout="this.style.backgroundColor = '#F5FAFE';">
			<td style="CURSOR: hand; HEIGHT: 22px" align="center"
				width="18%">
				${vs.count }
			</td>
			<td style="CURSOR: hand; HEIGHT: 22px" align="center"
				width="17%">
				${c.cname }
			</td>
			<td align="center" style="HEIGHT: 22px">
				<a href="${ pageContext.request.contextPath }/adminCategory">
					<img src="${pageContext.request.contextPath}/images/i_edit.gif" border="0" style="CURSOR: hand">
					
				</a>
			</td>
	
			<td align="center" style="HEIGHT: 22px">
				<a href="${ pageContext.request.contextPath }/adminCategory">
					<img src="${pageContext.request.contextPath}/images/i_del.gif" width="16" height="16" border="0" style="CURSOR: hand">
				</a>
			</td>
		</tr>
	</c:forEach>

④测试即可