easyUI treegrid的使用

来源:互联网 发布:研祥集团待遇知乎 编辑:程序博客网 时间:2024/04/30 23:14
前段时间,实习时候接到一个任务,将原有后台处理留言的的所有的一级分类改版成一级分类二级分类,在试验了大半个月之后,终于用treetable勉强的实现了,上面的一章节已经说过了,但是项目经理说我那个实现的不能拖动排序,哎,人为刀俎,我为鱼肉,没办法,硬着头皮换,幸好组里有一个项目经理的帮忙实现了easyUI treegrid 现在将流程大致的步骤记录在案,以防遗忘。公司的项目是ssh三层框架,现在我对这个业务流程还是不太熟悉,准备这几天系统的看看怎么样实现的这个框架,然后再结合实际的案例做一个简单的demo,时间过的太快了,马上研究生就要开题了,我现在什么都没准备,要看看自然语言处理的一些方面的内容了,现在真是会的东西太少,要学的东西太多 首先我们改动的是后台处理分类的catalogAction 代码如下
/* * CatalogAction.java created on Apr 10, 2014 3:05:43 AM by Martin */package com.trs.space.comment.web.action.admin;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.Calendar;import java.util.Date;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import org.junit.runners.Parameterized.Parameters;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.servlet.ModelAndView;import com.trs.space.comment.ThreadContext;import com.trs.space.comment.domain.AdminUser;import com.trs.space.comment.domain.Catalog;import com.trs.space.comment.domain.CatalogFilter;import com.trs.space.comment.domain.Template;import com.trs.space.comment.manager.CatalogManager;import com.trs.space.comment.service.RightException;import com.trs.space.comment.service.RightService;import com.trs.space.comment.service.RightService.Right;import com.trs.space.comment.util.RequestUtil;/** * 总理留言分类管理 *  * @authorMartin */@Controllerpublic class CatalogAction {RightService rightService;CatalogManager catalogManager;@Autowiredpublic void setRightService(RightService rightService) {this.rightService = rightService;}@Autowiredpublic void setCatalogManager(CatalogManager catalogManager) {this.catalogManager = catalogManager;}@RequestMapping(value = "/catalogList",method = RequestMethod.GET)public ModelAndView view() throws RightException {rightService.assertRight(Right.SUGGEST_ADMIN);ModelAndView mav = new ModelAndView("catalogList");//取得所有留言分类的视图层return mav;  }@RequestMapping(value = "/catalogListItem",method = {RequestMethod.POST,RequestMethod.GET})@ResponseBody//得到所有的分类集合public String catalogList(HttpServletRequest request,HttpServletResponse response) throws RightException {rightService.assertRight(Right.SUGGEST_ADMIN);CatalogFilter filter = new CatalogFilter();filter.setLevel(0);SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");filter.sortBySortid(false);List<Catalog> list = catalogManager.listCatalog(filter);//int sum=list.size();//System.out.println(sum);for (Catalog catalog : list) {catalog.setCreatedTime(sdf.format(catalog.getCreateTime()));//将时间格式化catalog.setCreateTime(null);//原有的时间转化成json时设置为null}for (Catalog catalog : list) {if(catalog.getParentId()==null){     //得到所有的父类节点CatalogFilter filter1 = new CatalogFilter();filter1.setParentId(catalog.getId());//System.out.println(catalog.getId());filter1.sortBySortid(false);List<Catalog> childrenlist = catalogManager.listCatalog(filter1);//根据父类节点得到所有的子类节点if(childrenlist.size()>0){for (Catalog catalog1 : childrenlist) {catalog1.setCreatedTime(sdf.format(catalog1.getCreateTime()));catalog1.setCreateTime(null);}catalog.setState("closed");//与前台的easyUI一致性保持}else {catalog.setState("open");}catalog.setChildren(childrenlist);}}List<Catalog> result=new ArrayList<Catalog>();for (Catalog catalog : list) {if(catalog.getParentId()==null){result.add(catalog);}}//Map<String, Object> jsonResult = new HashMap<String, Object>();//jsonResult.put("total", sum);//jsonResult.put("rows", result);//Map<String, Object> foot = new HashMap<String, Object>(){//{//put("name","Total Persons:");//put("persons",7);//put("iconCls","icon-sum");//}//};//jsonResult.put("footer",foot);JSONArray jsonArray= JSONArray.fromObject(result);//将父类节点全部转换成json格式的response.setContentType("text/html;charset=UTF-8");try {response.getWriter().print(jsonArray);} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}return null;}@RequestMapping(value = "/catalogGet", method = RequestMethod.POST)@ResponseBodypublic String Getcatalog(@RequestParam(value = "id", required = true) Long id,HttpServletResponse response) throws RightException {rightService.assertRight(Right.SUGGEST_ADMIN);Catalog catalog = null;if (id != null) {catalog = catalogManager.getCatalog(id);} else {catalog = new Catalog();}try {response.getWriter().print(JSONArray.fromObject(catalog).toString());//子类节点转换成json格式的} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}return null;}@RequestMapping(value = "/catalogEdit", method = RequestMethod.POST)@ResponseBodypublic String catalogEdit( @RequestParam(value = "title" ,required =true) String title,@RequestParam(value = "sortid", required = true) String sortid,@RequestParam(value = "id", required = false) Long id,@RequestParam(value = "parentId",required=false) Long parentId,HttpServletRequest request) throws RightException {rightService.assertRight(Right.SUGGEST_ADMIN);Catalog catalog = null;//catalog = catalogManager.getCatalog(id);if (id != null && id.longValue() > 0) {catalog = catalogManager.getCatalog(id);} else {AdminUser adminUser = ThreadContext.getUser().getAdminUser();catalog = new Catalog();//catalog.setParentId(parentId);if (parentId != -1 && parentId.longValue() > 0) {catalog.setLevel(Integer.valueOf(1));catalog.setParentId(parentId);} else {catalog.setLevel(Integer.valueOf(0));}catalog.setCreateTime(new Date());catalog.setCreatorNick(adminUser.getNickName());catalog.setCreatorId(adminUser.getId());catalog.setStatus(Template.STATUS_NORMAL);}//System.out.println(title+","+id+","+sortid);catalog.setTitle(title);Integer sortId = RequestUtil.getParameterAsInt(request, "sortid", Integer.MIN_VALUE);if (Integer.MIN_VALUE == sortId) {sortId = getSecondFrom2014();}catalog.setSortid(sortId);SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式        catalog.setModifyTime(new Date());               try {catalogManager.saveCatalog(catalog);return "{\"result\": \"true\"}";} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}return "{\"result\": \"true\"}";}/* 删除节点*/@RequestMapping(value = "/catalogDelete",method=RequestMethod.POST)@ResponseBodypublic String catalogDelete(@RequestParam(value = "id", required = true) Long id) throws RightException {rightService.assertRight(Right.SUGGEST_ADMIN);CatalogFilter filter = new CatalogFilter();if (id != null) {filter.setParentId(id);//SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");filter.sortBySortid(false);List<Catalog> list = catalogManager.listCatalog(filter);//System.out.println(","+list.get(0).getId());if(list.size()>0){long[] ids= new long[list.size()];ids[list.size()-1] = id;for (int i=0;i<list.size();i++) {//就是这里ids[i]=list.get(i).getId();}catalogManager.deleteCatalog(ids);}else{long[] ids= new long[1];ids[0]=id;catalogManager.deleteCatalog(ids);}return "{\"result\": \"true\"}";}elsereturn "{\"result\": \"true\"}";}/* 更新排序*/@RequestMapping(value = "/updateCatalogList",method=RequestMethod.POST)@ResponseBodypublic String updateCatalogList(@RequestParam(value="srcId",required=true) Long srcId,@RequestParam(value="destId",required=true) Long destId) throws RightException {rightService.assertRight(Right.SUGGEST_ADMIN);System.out.println(srcId+","+destId);Catalog Begin = catalogManager.getCatalog(srcId);Catalog End = catalogManager.getCatalog(destId);if(Begin.getParentId()==End.getParentId()){//if(Begin.getParentId()==null){//同级父节点移动try {CatalogFilter filter1 = new CatalogFilter();filter1.setParentId(Begin.getParentId());//System.out.println(catalog.getId());filter1.sortBySortid(false);List<Catalog> childrenlist = catalogManager.listCatalog(filter1);{childrenlist.remove(Begin);Integer sortid=0;for(Catalog catalog:childrenlist){System.out.println(catalog.getSortid());//sortid=catalog.getSortid();if(catalog.getSortid()==End.getSortid()){sortid=catalog.getSortid()+1;Begin.setSortid(sortid);catalogManager.saveCatalog(Begin);sortid++;}else {catalog.setSortid(sortid);catalogManager.saveCatalog(catalog);sortid= sortid+1;}}}return "{\"result\": \"true\"}";} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}//return "{\"result\": \"true\"}";//}//else {////}//}else {//靓机电节点的移动}return "{\"result\": \"false\"}";}private int getSecondFrom2014() {Calendar cal = Calendar.getInstance();long now = cal.getTimeInMillis();cal.set(Calendar.YEAR, 2014);cal.set(Calendar.MONTH, 0);cal.set(Calendar.DATE, 1);cal.set(Calendar.HOUR_OF_DAY, 2014);cal.set(Calendar.MINUTE, 0);cal.set(Calendar.SECOND, 0);cal.set(Calendar.MILLISECOND, 0);long org = cal.getTimeInMillis();long sec = (now - org) / 1000;return (int) sec;}}

前台方面我们引入了easyUI treegrid 包,然后在此基础上改动 下面是 catalogList.jsp 页面

<%@page import="com.trs.space.comment.Constants"%><%@page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><%@include file="/WEB-INF/jsp/include/taglibs.jsp"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="../css/jquery.kiketable.colsizable.css"><link rel="stylesheet" type="text/css" href="../css/admin_base.css"><script language="javascript" type="text/javascript" charset="utf-8" src="../js/jquery-1.4.4.min.js"></script><script language="javascript" type="text/javascript" charset="utf-8" src="../js/jquery.event.drag-1.4.js"></script><script language="javascript" type="text/javascript" charset="utf-8" src="../js/jquery.kiketable.colsizable.js"></script><script language="javascript" type="text/javascript" charset="utf-8" src="../js/admin_base.js"></script><link rel="stylesheet" type="text/css" href="../css/treegrid/default/easyui.css"><link rel="stylesheet" type="text/css" href="../css/treegrid/icon.css"><link rel="stylesheet" type="text/css" href="../css/treegrid/treegrid.css"><script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/treegrid-dnd.js"></script><script type="text/javascript"> var data=[{"id":1,"name":"C","size":"","date":"02/19/2010","children":[{"id":2,"name":"Program Files","size":"120 MB","date":"03/20/2010","children":[{"id":21,"name":"Java","size":"","date":"01/13/2010","state":"closed","children":[{"id":211,"name":"java.exe","size":"142 KB","date":"01/13/2010"},{"id":212,"name":"jawt.dll","size":"5 KB","date":"01/13/2010"}]},{"id":22,"name":"MySQL","size":"","date":"01/13/2010","state":"closed","children":[{"id":221,"name":"my.ini","size":"10 KB","date":"02/26/2009"},{"id":222,"name":"my-huge.ini","size":"5 KB","date":"02/26/2009"},{"id":223,"name":"my-large.ini","size":"5 KB","date":"02/26/2009"}]}]},{"id":3,"name":"eclipse","size":"","date":"01/20/2010","children":[{"id":31,"name":"eclipse.exe","size":"56 KB","date":"05/19/2009"},{"id":32,"name":"eclipse.ini","size":"1 KB","date":"04/20/2010"},{"id":33,"name":"notice.html","size":"7 KB","date":"03/17/2005"}]}]}];  $(function(){    //初始化弹出对话框        $('#win').window('close');           $('#tt').treegrid({ // data:data,    url:'catalogListItem',    method:'post',    dataType:'json',    rownumbers: true,    singleSelect:true,idField: 'id',treeField: 'title',animate:true,    columns:[[         {field:'id',title:'ckc',checkbox:true},        {field:'title',title:'分类名称',width:400,align:'left',editor:'text'},         {field:'sortid',title:'排序值',width:100,align:'left',editor:'text'},        {field:'creatorNick',title:'创建者',width:100},            {field:'createdTime',title:'创建时间',width:220},        {field:'operate',title:'操作',width:220,        formatter: function(value,row,index){        var html='';        html+='<a onclick="showedit(\'编辑\','+row.id+')" >编辑 </a> ';        //html+=value+'<a onclick="editrow('+row+')" >编辑 </a> <a id="cancel" onclick="cancel()"></a>';        if(row.level==0){        html+=' <a href="#" onclick="Confirm(\'确认删除这个分类及其子类\','+row.id+')">删除</a> ';        html+='<a href="#" onclick="showedit(\'新建\','+row.id+')">新建子节点</a> ';//默认只有二级节点        }        else        html+=' <a href="#" onclick="Confirm(\'确认删除这个记录\','+row.id+')">删除</a> ';                return html;}        }    ]],      onLoadSuccess: function(row){//$(this).treegrid('enableDnd', row?row.id:null);    enableDnd($('#tt'));}});       });    function enableDnd(t) {    var nodes = t.treegrid('getPanel').find('tr[node-id]');    nodes.find('span.tree-hit').bind('mousedown.treegrid', function() {        return false;    });    nodes.draggable({        disabled: false,        revert: true,        cursor: 'pointer',        proxy: function(source) {            var p = $('<div class="tree-node-proxy tree-dnd-no"></div>').appendTo('body');            p.html($(source).find('.tree-title').html());            p.hide();            return p;        },        deltaX: 15,        deltaY: 15,        onBeforeDrag: function() {            $(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({ accept: 'no-accept' });        },        onStartDrag: function() {            $(this).draggable('proxy').css({                left: -10000,                top: -10000            });        },        onDrag: function(e) {            $(this).draggable('proxy').show();            this.pageY = e.pageY;        },        onStopDrag: function() {            $(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({ accept: 'tr[node-id]' });        }    }).droppable({        accept: 'tr[node-id]',        onDragOver: function(e, source) {            var pageY = source.pageY;            var top = $(this).offset().top;            var bottom = top + $(this).outerHeight();            $(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');            $(this).removeClass('row-append row-top row-bottom');            if (pageY > top + (bottom - top) / 2) {                if (bottom - pageY < 5) {                    $(this).addClass('row-bottom');                } else {                    $(this).addClass('row-append');                }            } else {                if (pageY - top < 5) {                    $(this).addClass('row-top');                } else {                    $(this).addClass('row-append');                }            }        },        onDragLeave: function(e, source) {            $(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');            $(this).removeClass('row-append row-top row-bottom');        },        onDrop: function(e, source) {            var action, point;            if ($(this).hasClass('row-append')) {                action = 'append';            } else {                action = 'insert';                point = $(this).hasClass('row-top') ? 'top' : 'bottom';            }            $(this).removeClass('row-append row-top row-bottom');           // alert(action + ":" + point);            // your logic code here            // do append or insert action and reload the treegrid data            var src  = $('#tt').treegrid('find', $(source).attr('node-id'));                var dest = $('#tt').treegrid('find', $(this).attr('node-id'));               // alert(src.title+","+dest.title);            $.ajax({            url: 'updateCatalogList',                dataType: 'json',                type:'post',                data: {                "srcId": src.id,                "destId": dest.id                },                success:function(data){                if(data.result)                {                $('#tt').treegrid('reload');                       }                }                        });                       }    });}                  function showedit(type,id){      $("#form")[0].reset();      $('#win').window('open');      if(type=='编辑'){           $.ajax({      url:'catalogGet?id='+id,      type:'post',          dataType:'json',          cache:false,          success:function(data){          $("#title").val(data[0].title);          $("#sortid").val(data[0].sortid);          $("#id").val(id);          }            });      }      else     {            $("#parentId").val(id);     }           }           //保存      function save(){      var title= $("#title").val();      var sortid=$("#sortid").val();      var id=$("#id").val();       var parentId=$("#parentId").val();        $.ajax({      url:'catalogEdit',      data:{"title":title,"sortid":sortid,"id":id,"parentId":parentId},      type:'post',          dataType:'json',      success:      function(data)      {             if(data.result){     $('#win').window('close');     $('#tt').treegrid('reload');              }          else         alert(data.result);          }           });      }      function Confirm(msg,id) {          $.messager.confirm("确认", msg, function (r) {              if (r) {              //请求            $.ajax({url:'catalogDelete?id='+id,            type:'post',                    dataType: 'json',                       success://                 function (data) {                    if(data){                      $('#tt').treegrid('reload');                    }                    else                    alert("faile");                                    }             });            }          });          return false;      }  </script><title>留言分类浏览</title></head><body><div id="win" title="新建/编辑分类" class="easyui-window" style="width:300px;height:180px;"><form id="form" style="padding:10px 20px 10px 40px;"><p>分类名称: <input id="title" name="title" type="text"></p><p>排序值: <input id="sortid" name="sortid" type="text"></p><input id="id" name="id" type="hidden"><input id="parentId" name="parentId" type="hidden"><div style="padding:5px;text-align:center;"><a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="save()">确定</a><a href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="javascript: $('#win').window('close');">取消</a></div><input id="id" name="id" type="hidden"></form></div><table id="head_table" cellpadding="0" cellspacing="0" ><tr><td id="head_where"><a href="./">后台管理</a> >> 留言分类浏览</td><td id="head_what"></td><td id="head_who"><%UserInfo info = (UserInfo) request.getSession().getAttribute(Constants.BIND_USER_INFO); %><%=info.getAdminUser().getNickName() %></td><td id="head_tree"><div class="tree_on"></div></td><td id="head_search"><form id="form_search" action="search"><input id="head_search_input" type="text" name="query"><input id="head_search_button" type="image" src="../imgs/head_search_button.gif" title="搜索"></form></td></tr></table><table id="main_table" cellpadding="0" cellspacing="0"><tr><td id="left_nav_td"><%@include file="include/left_navigate.jsp" %></td><td id="main_area"><div id="main_area_box"><div id="main_area_box_inner"><div class="tip_box"><div class="tip_head"><span class="tip_head_info">留言分类浏览</span></div><div class="tip_body"><div class="tip_body_info">浏览所有的留言分类。</div><div class="tip_body_link"><c:if test="${!empty parentId}"><a href="catalogList">返回父级分类</a></c:if><a href="#" onclick="showedit('新建',-1)">新建留言分类</a></div></div></div><%@include file="include/tips_warn_err.jsp" %><form action="" id="list_form" name="list_form" method="get"><div class="list_box"><table id="tt" class="easyui-treegrid" cellpadding="0" cellspacing="0" border="0" style="width100%;height:450px"></table></div></form></div></div></td></tr></table><%@include file="include/foot_version.jsp/" %></body></html>

其中还有一个编辑的页面的实现 catalogEdit.jsp 

<%@page import="com.trs.space.comment.Constants"%><%@page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><%@include file="/WEB-INF/jsp/include/taglibs.jsp"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="../css/admin_base.css" rel="stylesheet" type="text/css"><script language="javascript" type="text/javascript" charset="utf-8" src="../js/jquery-1.4.4.min.js"></script><script language="javascript" type="text/javascript" charset="utf-8" src="../js/admin_base.js"></script><title>添加/修改留言分类</title></head><body><table id="head_table" cellpadding="0" cellspacing="0" ><tr><td id="head_where"><a href="./">后台管理</a> >> 添加/修改留言分类</td><td id="head_what"></td><td id="head_who"><%UserInfo info = (UserInfo) request.getSession().getAttribute(Constants.BIND_USER_INFO); %><%=info.getAdminUser().getNickName() %></td><td id="head_tree"><div class="tree_on"></div></td><td id="head_search"><form id="form_search" action="search"><input id="head_search_input" type="text" name="query"><input id="head_search_button" type="image" src="../imgs/head_search_button.gif" title="搜索"></form></td></tr></table><table id="main_table" cellpadding="0" cellspacing="0"><tr><td id="left_nav_td"><%@include file="include/left_navigate.jsp" %></td><td id="main_area"><div id="main_area_box"><div id="main_area_box_inner"><div class="tip_box"><div class="tip_head"><span class="tip_head_info">添加/修改留言分类</span></div><div class="tip_body"><div class="tip_body_info">添加一个新的留言分类或者修改一个已有的留言分类。</div><div class="tip_body_link"><a href="catalogList?parentId=${parentId}">返回留言分类浏览</a></div></div></div><%@include file="include/tips_warn_err.jsp" %><form:form action="catalogEdit" id="list_form" commandName="catalog" method="post"><div class="form_box"><table class="form_table" cellpadding="0" cellspacing="0" border="0"><tr><td class="form_td_name_short">分类名称<font color=red>*</font></td><td class="form_td_edit"><form:input class="long_large" type="text" id="title" path="title" value=""/></td><td class="form_td_info"><div style="color: red" id="titleDiv"><form:errors path="title" cssClass="errorMsg"/>${titleError}</div></td></tr><tr><td class="form_td_name_short">排序值<font color=red></font></td><td class="form_td_edit"><form:input class="long_large" type="text" id="sortid" path="sortid" value=""/></td><td class="form_td_info"><div style="color: red" id="sortidDiv"><form:errors path="sortid" cssClass="errorMsg"/>${sortidError}</div></td></tr><tr><td></td><td class="form_td_button"><input type="submit" value="确认"><input type="reset"  value="清空"><input type="hidden" value="${parentId}" name="parentId"><input type="hidden" value="${catalog.id}" name="id"></td><td class="form_td_info"> </td></tr></table></div></form:form></div></div></td></tr></table><%@include file="include/foot_version.jsp/" %></body></html>


能够实现一级拖拽 二级隐藏一级二级拖拽了




0 0
原创粉丝点击