Home >Web Front-end >JS Tutorial >Jquery easyui implements dynamic tree_jquery

Jquery easyui implements dynamic tree_jquery

WBOYOriginal: 2016-05-16 15:31:391375browse

In the previous article I introduced to you EasyUI in jquery to implement asynchronous tree. This article introduces to you jquery easyui to implement dynamic tree.

First, introduce the relevant js files into the jsp page
Add the process list to the body and splice the json data the day after tomorrow
Please see the code details below for specific content.

It is preferred to introduce relevant js into the jsp page

<link rel="stylesheet" type="text/css" href="<%=path %>/css/jquery_easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="<%=path %>/css/jquery_easyui/themes/icon.css">
 <script type="text/javascript" src="<%=path %>/js/jquery_easyui/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="<%=path %>/js/jquery_easyui/jquery.easyui.min.js"></script>

Add script

<script>
   $(function(){
   $('#tt2').tree({
    checkbox: false,
    url: '<%=path%>/formconfig/loadWfNodes.do',
    onBeforeExpand: function(node){
     $('#tt2').tree('options').url = '<%=path%>/formconfig/loadWfNodes.do&#63;wfId='+node.id;
    }
   });
  });
 </script>

Add

to body

<body> 
  <ul id="tt2">
  <li state="closed" id='0'><span>流程列表</span></li>
  </ul>
 </body>

Splicing json data in the background

package com.aegon_cnooc.oa.formconfig.action;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import com.aegon_cnooc.framework.base.action.BaseAction;
import com.aegon_cnooc.oa.formconfig.service.FormConfigService;
import com.aegon_cnooc.oa.ibatis.to.TuOafWfTO;
import com.aegon_cnooc.oa.ibatis.to.TuOafWfnodesTO;
import com.aegon_cnooc.util.StringUtil;
/**
 * 加载流程下的节点的名称
 * @Author: liuxinghui
 * @Date: 2011-9-8
 * @Version: 2.0
 * @Despcrition:
 */
public class LoadWfNodesAction extends BaseAction{
 private FormConfigService formConfigService;
 public ActionForward executeAction(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
  String wfId=request.getParameter("wfId");
  String jsonstr = "[";
  if(StringUtil.isNotEmpty(wfId)&&"0".equals(wfId)){
   List wfList=formConfigService.findWf();
   for(int i=0;i<wfList.size();i++){
    TuOafWfTO wfTo=(TuOafWfTO)wfList.get(i);
   jsonstr=jsonstr+
    "{\n" +
    "  \"id\":"+wfTo.getWfid()+",\n" + 
    "  \"text\":\"<a href='javaScript:void(0)' target='mainFrame'>"+wfTo.getWfname()+"</a>\",\n" +  
    "  \"state\":\"closed\"\n" + 
    " },";
   }
   int end=jsonstr.length()-1;//去掉最后一个逗号
   String json=jsonstr.substring(0,end);
   json=json+"]";
  response.setContentType("application/json;charset=gbk");
  response.setCharacterEncoding("gbk");
  PrintWriter pw = response.getWriter();
  pw.write(json);
  pw.flush();
  }else{
  List wfNodes=formConfigService.findWfNodesById(wfId);
   for(int i=0;i<wfNodes.size();i++){
    TuOafWfnodesTO wfNodesTo=(TuOafWfnodesTO)wfNodes.get(i);
   jsonstr=jsonstr+
    "{\n" +
    "  \"id\":"+wfNodesTo.getNodeid()+",\n" + 
    "  \"text\":\"<a href='" + request.getContextPath()+
    "/formconfig/loadGroupByWfIdAndNodeId.do&#63;wfId="+wfId+"&nodeId="+wfNodesTo.getNodeid()+"' target='mainFrame'>"+wfNodesTo.getGenstepname()+"("+wfNodesTo.getNodeid()+")</a>\",\n" +  
    "  \"state\":\"closed\"\n" + 
    " },";
   }
   int end=jsonstr.length()-1;//去掉最后一个逗号
   String json=jsonstr.substring(0,end);
   json=json+"]";
  response.setContentType("application/json;charset=gbk");
  response.setCharacterEncoding("gbk");
  PrintWriter pw = response.getWriter();
  pw.write(json);
  pw.flush();
  }
  return null;
 }
 public void setFormConfigService(FormConfigService formConfigService) {
  this.formConfigService = formConfigService;
 }
}

The following code is EasyUI Jquery dynamic loading tree, click on the node to load

<script type="text/javascript"> 
  $(function() { 
    $(document).ready(function() { 
      $.post("./test/tree.action", {}, function(json) { 
        $("#tt").tree({ 
          data : json.itemsList, 
          onClick : function(node) { 
            $.post("./test/tree.action", { 
              "id" : node.id 
            }, function(json) { 
              $('#tt').tree('append', { 
                parent : node.target, 
                data : json.data 
              }); 
            }, "json"); 
          } 
        }); 
      }, "json"); 
    }); 
  }); 
</script> 
</head> 
<body> 
  <ul id="tt"></ul> 
</body>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Verification code for jquery to determine password strength_jqueryNext article：Verification code for jquery to determine password strength_jquery

See more

Jquery easyui implements dynamic tree_jquery

Related articles