zoukankan      html  css  js  c++  java
  • zTree的简单例子

    <%@ page language="java" pageEncoding="UTF-8" %>
    <%@ include file="/WEB-INF/views/include/taglib.jsp"%>
    <%@include file="/WEB-INF/views/include/message.jsp"%>
    <html>
        <head>
        <link href="${ctxStatic}/css/login.css" type="text/css" rel="stylesheet"/>
        <link rel="stylesheet" type="text/css" href="${ctxStatic}/css/sysStyle.css">
        <link rel="stylesheet" href="${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.css" type="text/css">
            <link type="text/css" rel="stylesheet" href="${ctxStatic}/css/treeSelect.css" />
        <script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="${ctxStatic}/js/list.js"></script>
        
        <script type="text/javascript" src="${ctxStatic}/My97DatePicker/WdatePicker.js"></script>
        <link rel="stylesheet" type="text/css" href="${ctxStatic}/My97DatePicker/skin/WdatePicker.css">
        <script type="text/javascript" src="${ctxStatic}/jquery-ztree/3.5.12/js/jquery.ztree.core-3.5.js"></script>
        <c:set var="zNodes" value="${zNodes}"/>
    <style type="text/css">
    .model{height: 300px;}
    .model_left{float:left;}
    .model_center textarea{width:60%; height:200px;float: left;}
    
                
    </style>
    <script type="text/javascript">
        
        //点击树状模板节点,获取模板内容
        var getContent=function(id){
            var content="";
            $.ajax({
            url: "${ctx}/sms-send/fortuneGroupSendCtrl/findContent?id="+id,
            type:"POST",
            async: false,
            success: function(data) {
                    if(data.content!=null&data.content!=""){
                        content = data.content;
                        document.getElementById("code").value=data.code;
                    }
                }
               }); 
               return content;
        }
        
        //重置
        function resetForm(){
    
            $("#q_chName").val("");
            $("#q_cusStatusCD").val("");
            $("#q_cusDeptName").val("");
            $("#q_cusManagerName").val("");
        }
        var myTreeSetting = {
                data: {
                    key: {
                        title:"t"
                    },
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    beforeClick: beforeClick,
                    onClick: onClick
                }
            };
            var tem="<c:out value='${zNodes}' escapeXml='false'/>";
            var array=eval(tem );
            
            
            function beforeClick(treeId, treeNode, clickFlag) {
                return (treeNode.click != false);
            }
            function onClick(event, treeId, treeNode, clickFlag) {
                //获取对应的模板内容
                var content = getContent(treeNode.id);
                document.getElementById("log").value=content;
            }
            $(document).ready(function(){
                $.fn.zTree.init($("#mytree"), myTreeSetting,array);
            });
        
        //短信发送
        function send(){
        
            var content =$("#log").val();
            var code =$("#code").val();
            var cols=document.getElementsByName('cols');
            if(null==cols||cols.length==0){
                alert('当前没有记录,无法进行操作!');
                return;
            }
            var flag='0';
            var ids='';
            var chk='0';
            var allsend =document.getElementById("allsend");
    //                 var allsend =$("#allsend");
            if(allsend.checked){
                chk='1';
                flag='1';
            }
                
            for(var i=0;null!=cols&&i<cols.length;i++){
                
                if(cols[i].checked){
                    flag='1';
                    ids+=cols[i].value+',';
                }
            }
            
            if('0'==flag){
                alert('请至少选择一条记录!');
                return;
            }
            
            if(""==content){
                alert("发送内容不能为空");
                return;
            }
            if(""==code){
                alert("发送内容不能为空");
                return;
            }
            if(confirm("确定发送吗?")) {
               $.ajax({
                    url: "${ctx}/sms-send/fortuneGroupSendCtrl/fortuneGroupSend.do",
                    type:"post",
                    data:{"chk":chk,"ids":ids,"code":code,"q_id":$("#q_id").val(),"q_chName":$("#q_chName").val(),"q_idNumber":$("#q_idNumber").val(),"q_cusStatusCD":$("#q_cusStatusCD").val(),"q_cusManagerName":$("#q_cusManagerName").val(),"q_cusDeptName":$("#q_cusDeptName").val(),"q_guishuStatus":$("#q_guishuStatus").val(),"q_dept":$("#q_dept").val(),"q_sourceType":$("#q_sourceType").val()},
                    success: function(map) {
                        if (map.success) {
                            $("#message").text("发送成功 "+map.count+" 条短信");
                        }else {
                            $("#message").text("发送失败");
                        }
                    }
                });            
                return true;
            }else{
                return false;
            }    
        }
            
        //清空全选按钮
        function clean(){
            var all= document.getElementById("checkbox"); 
            if(all.checked=true){
            all.checked=false;
            }
        }
    
    
    
    
    </script>
    </head>
         <body>
        
        <table>
            <tr>
            <td  rowspan="3" height="100%" valign="top">
           <div>
                <h3 class="lanmu_div">高级查询</h3>
    
              <div class="list_cont">
                  <form name="mainForm" id="queryMainForm" method="post" action="${ctx}/sms-send/fortuneGroupSendCtrl/query.do">
                      <div class="list_cont" style="padding-bottom:20px;">
                    <dl>
                        <dt>客户姓名:</dt>
                        <dd>
                               <input class="q_name" type="text" id="q_chName" name="q_chName" value="${baseQueryBean.q_chName }"> 
                            <input type="hidden" name="act" value="query"> 
                            <input type="hidden" name="busiId" value="searchSmsFortuneInfoSend">
                            <c:choose>
                              <c:when test="${fns:getUser().isCusManager==1}">
                                     <input type="hidden" name="q_id" id="q_id" value="${fns:getUser().id}">    
                              </c:when>
                              <c:otherwise>
                                     <input type="hidden" name="q_dept" id="q_dept" value="${fns:getUser().deptId}">
                              </c:otherwise>
                            </c:choose>
                            <input type="hidden" id="moduleId" name="q_modOperateId" value="${baseQueryBean.q_modOperateId}">                                            
                        </dd>
                    </dl>
                    <dl>
                        <dt>所属部门:</dt>
                        <dd>
                            <input class="q_name" type="text" id="q_cusDeptName" name="q_cusDeptName" value="${baseQueryBean.q_cusDeptName }" >
                        </dd>
                    </dl>
                    <dl>
                        <dt>客户类型:</dt>
                        <dd>
                            <exp:select cssClass="q_name" code="CUS_TYPE_CD" name="q_cusStatusCD" id="q_cusStatusCD" value="${baseQueryBean.q_cusStatusCD }" headerKey="" headerValue="--请选择--"/>
                        </dd>
                    </dl>
                    <dl>
                        <dt>客户经理:</dt>
                        <dd>
                            <input class="q_name" type="text" id="q_cusManagerName" name="q_cusManagerName" value="${baseQueryBean.q_cusManagerName }">
                        </dd>
                    </dl>
                    <dl>
                       <dt>数据来源:</dt>
                       <dd><exp:select code="SOURCE_TYPE" name="q_sourceType" id="q_sourceType" value="${baseQueryBean.q_sourceType}" headerValue="---请选择---" headerKey="" cssClass="q_name"></exp:select></dd>
                    </dl>                                
                        <div align="center">                                
                            <dl>
                                <dd>
                                    <input type="submit" class="btn" id="searchButton" value="查 询 " />&nbsp;&nbsp;&nbsp;
                                    <input type="button" class="btn" id="searchButton" value="重置 " onclick="resetForm();"/>
                                </dd>
                            </dl>
                        </div>
                    </div>
                  
                  
                     
                  </form>
              </div>
            </div>
            <div>
              <h3 class="lanmu_div">模块列表</h3>
              <div class="list_cont">
                 <table class="adv_query_list">
                    <tr class="search_title_show">
                        <td align="center" bgcolor="#C7D6EA" class="table_head"><input type="checkbox" id="checkbox" onclick="checkAll(this);"/></td>
                        <td align="center">序号</td>
                        <td align="center">客户编号</td>
                        <td align="center">客户姓名</td>
                        <td align="center">手机号</td>
                        <td align="center">客户类型</td>
                        <td align="center">客户经理</td>
                        <td align="center">创建时间</td>
                        <td align="center">所属部门</td>
                        <td align="center">创建人</td>
                        <td align="center">数据来源</td>    
                    </tr>
                    <c:forEach items="${pageInfo.searchResult}" var="it">
                        <tr align="center" class="tdbg">
                            <td><input type="checkbox" id="cols" name="cols" value="${it[0] }"  onclick="clean();"/></td>
                            <td>${it[11] }</td>
                            <td>${it[1] }</td>
                            <td><a href="${ctx}/crm-server/fortuneCusCtrl/queryCusDetail.do?id=${it[0] }">${it[2] }</a>
                            </td>
                            <td>${fn:substring(it[3],0,7) }****</td>
                            <td>${(it[4] eq 2 )?'储备客户':'客户'}</td>
                            <td>${it[5] }</td>
                            <td>${it[6] }</td>
                            <td>${it[7] }</td>
                            <td>${it[8] }</td>
                            <td>${(it[10] eq 1 )?'系统':'导入'}</td>
                        </tr>
                    </c:forEach>
                    </table>
                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>${pagination}</td>
                        </tr>
                    </table>
                
                   </div>
          </div>
          </td>
          </tr>
          </table> 
             <h3 class="lanmu_div">发送短信</h3>
                        <span style="color: red; font-size: 20" id="message"></span>
                        <div class="model">
                            <div class="model_left">
                                <ul id="mytree" class="ztree" style="margin-top: 0px;"></ul>
                            </div>
                            <div class="model_center">
                                <input  id = "code"  type="hidden" value="" />
                                <textarea id="log" wrap="virtual"     readonly="readonly"  ></textarea>
                            </div>
                             <div class="list_cont">
                                 <div>
                                     <dl>
                                         <dd style="margin-left: 5px; margin-top: 140px;" >
                                             <input id="allsend" type="checkbox" style="float:left;margin-top:2px "/><span style="float:left;">&nbsp;全部发送</span>
                                         </dd>
                                     </dl>
                                 </div>
                                 <div>
                                     <dl>
                                         <dd>
                                             <input value="发送短信" type="button" onclick="send();" class="btn" />
                                         </dd>
                                     </dl>
                                 </div>
                            </div>
                        </div>
        </body>
    </html>

    上面对应的jsp内容,下面是对应的service查询数据源

    /**
    	 * 获取所有模板及末班类型,以树形结构显示
    	 */
    	@SuppressWarnings({"unchecked", "rawtypes" })
    	public String getTree() 
    	{
    		StringBuilder str = new StringBuilder();
    		str.append("[ ");
    		//获取所有的模板类型
    		List list1= jdbcDao.queryData("select t.item_name ,t.item_code,t.id from UC_TYPE_DICTIONARY t where t. type_code = 'SMS_TEMPLATE_TYPE_CD'");
    		for(int i =0;i<list1.size();i++){
    			List list = (List) list1.get(i);
    			//获取此类型对应的所有的模板
    			List lst1 = jdbcDao.queryData("select t.id,t.name from SMS_TEMPLATE t where t.param_count = 0 and t.type = "+list.get(1));
    			str.append("{ id:"+"'"+ list.get(2).toString()+"'");
    			str.append(", name:");
    			str.append("'"+list.get(0).toString()+"'");
    			if(lst1.size()==0){
    				if(i==(list1.size()-1)){
    					str.append(", isParent:true}");
    				}else{
    					str.append(", isParent:true},");
    				}
    			}else{
    				str.append(", children:[");
    			
    			//获取模板类型的数量
    			//int t = jdbcDao.getTotalCount("select t.id from UC_TYPE_DICTIONARY t where t. type_code = 'SMS_TEMPLATE_TYPE_CD'");
    					for(int k =0;k<lst1.size();k++){
    						List lst= (List) lst1.get(k);
    						str.append("{ id:");
    						str.append("'"+lst.get(0).toString()+"'");
    						str.append(", name:");
    						str.append("'"+lst.get(1)+"'");
    						
    						if(i==(list1.size()-1) && k==(lst1.size()-1)){
    							str.append("}");
    						}else{
    							str.append("},");
    						}
    					}
    					if(i==(list1.size()-1)){
    						str.append("]}");
    					}else{
    						str.append("]},");
    					}
    			}
    		
    			}
    		str.append(" ]");
    		return str.toString();
    	}
    	
    	
    	/**
    	 * 获取短信模板的内容
    	 */
    	@SuppressWarnings("rawtypes")
    	@Override
    	public List<String> findContent(String id) {
    			List<String> templateList = new ArrayList<String>();
    			List list= jdbcDao.queryData("select t.content,t.code from SMS_TEMPLATE t where t.id= "+id);
    			for(int i = 0;i<list.size();i++){
    				List lst = (List) list.get(i);
    				templateList.add(lst.get(0).toString());
    				templateList.add(lst.get(1).toString());
    			}
    			return templateList;
    	}
    	
    	
    

      这个是控制层,controller层

    完事了

        @RequestMapping(value = "query")
        public String query(@ModelAttribute SmsFortuneInfoCtrlQueryVO smsFortuneCtrlQueryVO, HttpServletRequest request, Model model) throws Exception{
            CommonQueryUtils utils=new CommonQueryUtils();
            utils.execute(smsFortuneCtrlQueryVO,model);        
            String zNodes= fortuneGroupSendService.getTree();
            model.addAttribute("zNodes", zNodes);
            return "sms-server/send/fortuneGroupSend_list";
        }
        
        /*
         * 获取短信模板的内容
         */
        @RequestMapping(value = "findContent")
        @ResponseBody
        public Map<String, Object> findContent(@RequestParam String id,Model model){
            List<String> templateList = fortuneGroupSendService.findContent(id);
            Map<String, Object> map = new HashMap<String, Object>();
            if(templateList!=null&templateList.size()>0){
                map.put("content", templateList.get(0).toString());
                map.put("code", templateList.get(1).toString());
            }
            return map;
        }
        

  • 相关阅读:
    创建授权SQL mysql数据库命令
    [mysql] 无法通过insert 创建用户ERROR 1364 (HY000): Field 'ssl_cipher' doesn't have a default value
    MySql 用户管理 中添加用户,新建数据库,用户授权,删除用户,修改密码(注意每行后边都跟个;表示一个命令语句结束):
    mysql 导出数据到文件数据异常 ERROR 1290 (HY000): The MySQL server is running with the --secure-file-priv option so it cannot execute this statement
    tab切换 js制作 index和this的应用
    mysql中 where in 用法详解
    Mysql Join语法解析与性能分析
    Java 导入导出Excle表格 两种方式
    SQLyog 快捷键
    DnCNN-Beyond a Gaussian Denoiser: Residual Learning of Deep CNN for Image Denoising
  • 原文地址:https://www.cnblogs.com/puqiuxiaomao/p/3686033.html
Copyright © 2011-2022 走看看