Jquery easyui melaksanakan tree_jquery dinamik-tutorial js-php.cn

Jquery easyui melaksanakan tree_jquery dinamik

WBOY

Lepaskan： 2016-05-16 15:31:39

asal

1324 orang telah melayarinya

Dalam artikel sebelumnya saya memperkenalkan kepada anda EasyUI dalam jquery untuk melaksanakan pepohon tak segerak Artikel ini memperkenalkan kepada anda jquery easyui untuk melaksanakan pepohon dinamik.

Mula-mula, perkenalkan fail js yang berkaitan ke dalam halaman jsp
Tambahkan senarai proses pada badan dan sambung data json lusa
Sila lihat butiran kod di bawah untuk kandungan tertentu.

Adalah pilihan untuk memperkenalkan js yang berkaitan ke dalam halaman jsp

<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>

Salin selepas log masuk

Tambah skrip

<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>

Salin selepas log masuk

Tambahkan

pada badan

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

Salin selepas log masuk

Menyambung data json di latar belakang

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;
 }
}

Salin selepas log masuk

Kod berikut ialah pepohon pemuatan dinamik EasyUI Jquery, klik pada nod untuk memuatkan

<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>

Salin selepas log masuk