根据demo
jquery easyUI tree的树形格式的json形式为
[{
"id":1,
"text":"Folder1",
"iconCls":"icon-ok",
"children":[{
"id":2,
"text":"File1",
"checked":true
},{
"id":3,
"text":"Folder2",
"state":"open",
"children":[{
"id":4,
"text":"File3",
"attributes":{
"p1":"value1",
"p2":"value2"
},
"checked":true,
"iconCls":"icon-reload"
},{
"id": 8,
"text":"Async Folder",
"state":"closed"
}]
}]
},{
"text":"Languages",
"state":"closed",
"children":[{
"id":"j1",
"text":"Java"
},{
"id":"j2",
"text":"C#"
}]
}]
前台调用代码:
<%@ page language="java" contentType="text/html;charset=UTF-8"
errorPage=""%>
<%@ include file="/admin/CommonFiles/struts.jsp" %>
<html>
<head>
<title>信息发布平台</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${ctx}/admin/css/easyui.css"></link>
<script type="text/javascript" src="${ctx}/admin/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="${ctx}/admin/js/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="${ctx}/admin/style.css" type="text/css">
<script type="text/javascript">
$(function(){
$('#tt2').tree({
checkbox: true,
url: '${ctx}/ItemTree.do?method=createTree',
onClick:function(node){
$(this).tree('toggle', node.target);
var ss=node.attributes.cas.toString();//p1
alert('you click '+ss);
},
onContextMenu: function(e, node){
e.preventDefault();
$('#tt2').tree('select', node.target);
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
});
</script>
</head>
<body bgcolor="#EBF1FA" leftmargin="5" topmargin="5" marginwidth="0"
marginheight="0">
<ul id="tt2"></ul>
</body>
</html>
后台服务端的递归代码(遍历每一个节点):
/**
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward createTree(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
m_objsa = (SessionAdmin) request.getSession().getAttribute("amUser");
int parentid=NumberUtils.stringToInt(request.getParameter("xxxx"));
String state="";
String sel="";
List<TreeDto> list = new ArrayList<TreeDto>();
createTree(parentid,state,sel,list);
String str =JSONArray.fromObject(list).toString();
//返回结果到前台
response.getWriter().write(str);
response.getWriter().flush();
response.getWriter().close();
return null;
}
//显示树型主函数,递归,选择所属栏目用,sel已选中的ID,curitem当前栏目ID
//添加内容的时候,选择所属栏目
public List<TreeDto> createTree(int parentid,String state,String sel,List<TreeDto> list2) throws SQLException
{
// list2=new ArrayList<TreeDto>();
ArrayList<TreeDto> al = getPrivateSubItem(parentid);
if(al != null && !al.isEmpty())
{
int n = al.size();
for(int i = 0; i < n;i++)
{
TreeDto o = (TreeDto)al.get(i);
//不包含子菜单
if(!isHaveSubItem(o.getId()))
{
}else{
List<TreeDto> list333=new ArrayList<TreeDto>();
o.setChildren(createTree(o.getId(), state, sel,list333));
}
list2.add(o);
}
}
return al;
}
//检索
private ArrayList<TreeDto> getPrivateSubItem(int parentid) throws SQLException
{
m_strSql = new StringBuffer();
m_strSql.append("Select ID,Name From Item Where IsAuditing = 1");
m_strSql.append("And WebID = " + m_objsa.getWebID());
// if(!m_objsa.isWebSuperAdmin())
// m_strSql.append(" And '" + m_objsa.getItemPower() + "' Like '%' + CONVERT(varchar,ID) + '_0%'");
m_strSql.append(" And ParentID = " + parentid);
Connection conn = null;
PreparedStatement stmt = null;
ResultSet rs = null;
ArrayList<TreeDto> al = new ArrayList<TreeDto>();
try {
conn = this.getSqlSession().getConnection();
stmt = conn.prepareStatement(m_strSql.toString());
rs = stmt.executeQuery();
if(rs!=null){
while(rs.next())
{
TreeDto o = new TreeDto();
o.setId(rs.getInt("ID"));
o.setText(rs.getString("Name"));
al.add(o);
}
}
}catch(Exception se){
se.printStackTrace();
}finally{
DBUtils.close(rs, stmt, conn);
}
return al;
}
//判断是否具有子节点
private boolean isHaveSubItem(int parentid) throws SQLException
{
m_strSql = new StringBuffer();
m_strSql.append("Select Count(ID) as C From Item Where IsAuditing = 1 And WebID = " + m_objsa.getWebID());
m_strSql.append(" And ParentID = " + parentid);
Connection conn = null;
PreparedStatement stmt = null;
ResultSet rs = null;
try {
conn = this.getSqlSession().getConnection();
stmt = conn.prepareStatement(m_strSql.toString());
rs = stmt.executeQuery();
if(rs.next() && rs != null)
{
int i = rs.getInt("C");
rs.close();
return i > 0;
}
}catch(Exception se){
se.printStackTrace();
}finally{
DBUtils.close(rs, stmt, conn);
}
return false;
}
分享到:
相关推荐
jQuery EasyUI Tree常用于网站的导航菜单,例如在后台管理系统中,可以展示多级的权限菜单;在数据管理界面,可以展示分层的类别信息,如文件夹结构等。 总的来说,jQuery EasyUI Tree组件以其简洁的API和丰富的...
综上所述,jQuery EasyUI Tree组件的异步加载通过设置`async`和`loader`属性实现,配合后台接口,能有效地优化大数据量场景下的用户体验。在`easyui_demo`这个压缩包中,你可以找到一个完整的示例,帮助理解并实践这...
在后台系统开发中,jQuery EasyUI 可以与各种后端框架(如Spring MVC、Django、Express等)结合,实现前后端分离。通过Ajax请求,EasyUI 可以与后端API进行通信,获取和更新数据。 1. **数据交互**:使用 `$.ajax` ...
jQuery EasyUI 适用于企业级后台管理系统、数据展示界面、Web 应用的前端开发。它的组件丰富,样式统一,可以快速构建出具有专业外观的管理界面。 ### 5. 注意事项 - 考虑到性能,不要在不需要的地方过度使用组件...
1. 该框架的开发环境为EclipseJEE集成开发工具。... 前台展示页面使用了JQuery EasyUI的布局、列表和消息组件。 6. 系统实现了较为完善的用户模块,对用户数据实现了增、删、改、查、分页等的功能。
2. **数据绑定**:jQuery EasyUI 支持与后台数据源进行数据绑定,通过Ajax或JSONP实现异步加载,使页面内容动态更新,提高用户体验。例如,表格组件Grid可以直接与服务器端的数据接口进行交互,实现分页、排序、过滤...
### jQuery EasyUI tree 使用拖拽功能知识点 #### jQuery EasyUI介绍 jQuery EasyUI是一个基于jQuery的前端框架,它提供了一系列用户界面组件,例如对话框、表格、菜单、树形控件等,以帮助开发者更快地构建Web界面...
此外,jQuery EasyUI的文档通常包含了详细的API说明、示例代码以及常见问题解答,使得学习和使用变得更为容易。在项目中引入jQuery EasyUI,不仅可以提升开发效率,还能确保UI的统一性和专业性,从而提高用户体验。...
1. 数据绑定:EasyUI 提供了数据绑定功能,可以轻松地将后台数据与前端UI组件关联,实现数据的动态展示和更新。 2. 组件丰富:包括对话框(Dialog)、表格(Grid)、表单(Form)、菜单(Menu)、树形控件(Tree)...
jQuery EasyUI 是一款基于 jQuery 的前端开发框架,它简化了网页界面的构建,提供了丰富的组件和样式,使得开发者可以快速创建功能丰富的管理界面或者后台框架。这个框架深受开发者喜爱,尤其对于那些希望快速构建...
《jQuery EasyUI 1.4.5 API详解》 jQuery EasyUI 是一款基于 jQuery 的前端框架,它提供了丰富的用户界面组件,使得开发者可以快速构建出美观且功能强大的Web应用。在本文中,我们将深入探讨jQuery EasyUI 1.4.5...
总之,jQuery EasyUI v1.3.5官方API中文版是开发人员的重要参考资料,它不仅包含了所有组件的详细说明,还有丰富的示例代码,有助于快速上手并熟练掌握这个框架,从而提升开发效率,打造高质量的Web应用界面。
JQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的UI组件,使得开发者能够快速构建功能丰富的Web应用。这个离线包包含了JQuery EasyUI的完整版本,具体为1.3.0,这是一个相对较旧但仍然广泛使用的版本...
在"漂亮的jquery easyui后台框架代码"这个项目中,我们可以看到几个关键的文件和目录,它们构成了EasyUI后台模板的基础: 1. **index.html**:这是网站的入口文件,通常包含HTML结构和必要的JavaScript引用,用于...
jQuery EasyUI 是一款基于 jQuery 的前端开发框架,它提供了一系列的组件和插件,使得开发者可以轻松构建功能丰富且美观的后台管理界面。这个“漂亮的jquery easyui后台框架”正是利用了EasyUI的优势,为用户提供了...
- **EasyUI**:基于 jQuery 的轻量级框架,通过简单的 API 实现复杂的 UI 效果,提高开发效率。 2. **核心组件** - **对话框(dialog)**:用于创建弹出式窗口,可设置大小、位置、可拖动和关闭等功能,常用于...
EasyUI Tree是一款基于jQuery的轻量级用户界面库,它为开发者提供了丰富的树形结构组件。在标准的EasyUI Tree基础上,“easyui tree 改进版”进行了优化和增强,特别是加入了复选框选择功能,这使得用户在操作树形...
EasyUI是一款基于jQuery的UI库,它为开发者提供了丰富的组件和精美的界面设计,使得构建管理后台变得更加便捷。"EasyUI管理后台模板源码"是一个包含EasyUI框架用于创建后台管理系统的完整源代码包,可以帮助开发者...
jQuery EasyUI 包含了一系列预定义的CSS样式和JavaScript插件,这些插件主要基于jQuery库,实现了如对话框(dialog)、表单(form)、表格(datagrid)、菜单(menu)等常见的用户界面元素。通过简单的HTML标记和...
在这个“Jquery EasyUI的基础权限管理”主题中,我们将深入探讨如何利用EasyUI来实现后台权限控制,同时结合C#后端技术和SQL Server 2008数据库来构建一个完整的权限管理系统。 首先,EasyUI中的权限管理主要涉及...