来源: 互联网  发布时间: 2014-02-18

jquery treeView工具 简单树形目录工具
zTree是不错的树形工具,功能强大异常,不过因此也带来一些问题,使用复杂,体型庞大.
这是zTree的官方网站喜欢的朋友可以多加关注 http://www.baby666.cn/hunter/zTree.html

zTree有很完善的版主手册,对于老手来说很方便,不过例子里没有附带说明,对于新手立即使用上有些问题.这里我举个最简单例子,用于新手立即使用,以后遇到更多应用时我也会把例子贴上来.




treeView.html

<TITLE> ZTREE DEMO </TITLE><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><linkrel="stylesheet"href="/blog_article/demoStyle/demo.css"type="text/css"><linkrel="stylesheet"href="/blog_article/zTreeStyle/zTreeStyle.css"type="text/css"><scripttype="text/javascript"src="/blog_article/jquery-1.4.2.js"></script><scripttype="text/javascript"src="/blog_article/jquery.ztree-2.6.js"></script><SCRIPTLANGUAGE="JavaScript">    showLine: true, //是否带有虚线      checkable: true //是否带有选择框  };  //数据内容      {"id":1, "pId":0, "name":"test1"},      {"id":11, "pId":1, "name":"test11"},      {"id":12, "pId":1, "name":"test12"},      {"id":111, "pId":11, "name":"test111"}  ];  $(document).ready(function(){  setting.isSimpleData = true;    //是否为简单数组数据 这里还可以用json数据  setting.treeNodeKey = "id";       setting.treeNodeParentKey = "pId";  //以那个下标标识父节点  var zTree = $("#tree").zTree(setting, zTreeNodes);  });  <ulid="tree"></ul>
把以上代码复制到html文件里就可以了,当然你必须把该导入的文件全部导入,至于这些文件去官网下就有了,至于数据内容就得自己想办法组成这样格式就行了,也可以用jquery异步请求json数据

php异步传输数据:



<TITLE> ZTREE DEMO </TITLE><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><linkrel="stylesheet"href="/blog_article/demoStyle/demo.css"type="text/css"><linkrel="stylesheet"href="/blog_article/zTreeStyle/zTreeStyle.css"type="text/css"><scripttype="text/javascript"src="/blog_article/jquery-1.4.2.js"></script><scripttype="text/javascript"src="/blog_article/jquery.ztree-2.6.js"></script><SCRIPTLANGUAGE="JavaScript">showLine: true,  async: true, //异步加载  asyncUrl: "asyncData/node.php", //获取节点数据的URL地址  asyncParam: ["name", "id"], //获取节点数据时，必须的数据名称，例如：id、name  asyncParamOther: ["test","true"], //其它参数 ( key, value 键值对格式)  asyncDataFilter : dataFilter, //异步加载数据函数名  };  var zNodes =[]; //先定义接收数据的数组  $(document).ready(function(){  var zTree = $("#tree").zTree(setting, zNodes);  });  function dataFilter(treeId, parentNode, childNodes) {  if (childNodes) {  for(var i =0; i<childNodes.length; i++) {  childNodes[i].name += "_filter";  }  }  return childNodes;  }  <ulid="tree"></ul>
node.php

<?php ?>  [<?php  if(array_key_exists( 'id',$_REQUEST)) {  }  if(array_key_exists('name',$_REQUEST)) {  }  if ($pId==null || $pId=="") $pId = "0";  if ($pName==null) $pName = "";  for ($i=1; $i<5; $i++) {  echo"{ id:'".$nId."', name:'".$nName."', isParent:".(($i%2)!=0?"true":"false")."}";  }  }  ?>] 
这是简单异步请求数据,这是原本zTree里的一个demo,我把这个和第一个例子改写了下,比原来的例子简单了许多,如果想要进一步的功能可以看下原来的例子,这个很简单就不多做说明了,又不懂就留言吧


zTree是不错的树形工具,功能强大异常,不过因此也带来一些问题,使用复杂,体型庞大.

这是zTree的官方网站喜欢的朋友可以多加关注 http://www.baby666.cn/hunter/zTree.html

zTree有很完善的版主手册,对于老手来说很方便,不过例子里没有附带说明,对于新手立即使用上有些问题.这里我举个最简单例子,用于新手立即使用,以后遇到更多应用时我也会把例子贴上来.




treeView.html

<TITLE> ZTREE DEMO </TITLE><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><linkrel="stylesheet"href="/blog_article/demoStyle/demo.css"type="text/css"><linkrel="stylesheet"href="/blog_article/zTreeStyle/zTreeStyle.css"type="text/css"><scripttype="text/javascript"src="/blog_article/jquery-1.4.2.js"></script><scripttype="text/javascript"src="/blog_article/jquery.ztree-2.6.js"></script><SCRIPTLANGUAGE="JavaScript">    showLine: true, //是否带有虚线      checkable: true //是否带有选择框  };  //数据内容      {"id":1, "pId":0, "name":"test1"},      {"id":11, "pId":1, "name":"test11"},      {"id":12, "pId":1, "name":"test12"},      {"id":111, "pId":11, "name":"test111"}  ];  $(document).ready(function(){  setting.isSimpleData = true;    //是否为简单数组数据 这里还可以用json数据  setting.treeNodeKey = "id";       setting.treeNodeParentKey = "pId";  //以那个下标标识父节点  var zTree = $("#tree").zTree(setting, zTreeNodes);  });  <ulid="tree"></ul>
把以上代码复制到html文件里就可以了,当然你必须把该导入的文件全部导入,至于这些文件去官网下就有了,至于数据内容就得自己想办法组成这样格式就行了,也可以用jquery异步请求json数据

php异步传输数据:



<TITLE> ZTREE DEMO </TITLE><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><linkrel="stylesheet"href="/blog_article/demoStyle/demo.css"type="text/css"><linkrel="stylesheet"href="/blog_article/zTreeStyle/zTreeStyle.css"type="text/css"><scripttype="text/javascript"src="/blog_article/jquery-1.4.2.js"></script><scripttype="text/javascript"src="/blog_article/jquery.ztree-2.6.js"></script><SCRIPTLANGUAGE="JavaScript">showLine: true,  async: true, //异步加载  asyncUrl: "asyncData/node.php", //获取节点数据的URL地址  asyncParam: ["name", "id"], //获取节点数据时，必须的数据名称，例如：id、name  asyncParamOther: ["test","true"], //其它参数 ( key, value 键值对格式)  asyncDataFilter : dataFilter, //异步加载数据函数名  };  var zNodes =[]; //先定义接收数据的数组  $(document).ready(function(){  var zTree = $("#tree").zTree(setting, zNodes);  });  function dataFilter(treeId, parentNode, childNodes) {  if (childNodes) {  for(var i =0; i<childNodes.length; i++) {  childNodes[i].name += "_filter";  }  }  return childNodes;  }  <ulid="tree"></ul>
node.php

<?php ?>  [<?php  if(array_key_exists( 'id',$_REQUEST)) {  }  if(array_key_exists('name',$_REQUEST)) {  }  if ($pId==null || $pId=="") $pId = "0";  if ($pName==null) $pName = "";  for ($i=1; $i<5; $i++) {  echo"{ id:'".$nId."', name:'".$nName."', isParent:".(($i%2)!=0?"true":"false")."}";  }  }  ?>] 
这是简单异步请求数据,这是原本zTree里的一个demo,我把这个和第一个例子改写了下,比原来的例子简单了许多,如果想要进一步的功能可以看下原来的例子,这个很简单就不多做说明了,又不懂就留言吧


http://blog.163.com/gwbjx@126/blog/static/20910067201162005214342/

    

    来源: 互联网  发布时间: 2014-02-18

使用ActivityGroup时子视图的布局问题

http://syxc.sinaapp.com/?p=410

欢迎访问：http://syxc.sinaapp.com/

    

    来源: 互联网  发布时间: 2014-02-18

dwr实战演练(原创) 简单实例 入门学习dwr

学习配置dwr有几个步骤：
1、需要下载dwr的架包，在这篇文章的下面有下载，下载完放置到工程的lib目录下。
2、配置web.xml,这里面不用做任何修改，直接看下面的代码（把下面的代码放置在web.xml中）：

<!-- 配置dwr -->
  <servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>false</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

 

3、配置dwr.xml,要求和web.xml在同一个路径下,直接见代码：

<?xml version="1.0" encoding="UTF-8"?>   
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">  
<dwr>  
<allow> <!--此处将pojos包下的所有javaBean转换为javascript对象使用-->  
<convert match="DwrPackage.POJO.User" converter="bean"></convert> 
<!-- javascript的对象是user,create=“new”是DWR自己创建UserDelegate这个类的实例，其他的还有spring方式，通过与IOC容器Spring进行集成 -->  
<create javascript="user" creator="new">  
<param name="class" value="DwrPackage.Service.UserService"></param> 
<!-- include表示客户端可以通过user调用服务器对象的方法,如果不写,则表示可调用这个类的所有方法.可写可不写--> 
<include method="isLogin"/> 
<include method="getUserBy"/> 
<!-- <exclude method="getUserBy"/>   --> 
</create>  
</allow>  
</dwr> 

 
4、服务器端业务逻辑代码，为了方便测试，我写的很简洁，包括两个一个pojo，一个service,相信大家都懂,直接见代码：

***User.java*** 
package DwrPackage.POJO; 

/** 
* 配置一个pojo-User 
* 
* @class User 
* @description 
* @author 李智慧 
* @copyRight copyright(c) 2011 广东南航易网通电子商务有限公司,Rights Reserved 
* @time Dec 14, 2011 5:12:53 PM 
*/ 
public class User { 
public String userName; 
public int age; 
public String address; 
public char sex; 

public String getUserName() { 
return userName; 
} 

public void setUserName(String userName) { 
this.userName = userName; 
} 

public int getAge() { 
return age; 
} 

public void setAge(int age) { 
this.age = age; 
} 

public String getAddress() { 
return address; 
} 

public void setAddress(String address) { 
this.address = address; 
} 

public char getSex() { 
return sex; 
} 

public void setSex(char sex) { 
this.sex = sex; 
} 

public User(String userName, int age, String address, char sex) { 
super(); 
this.userName = userName; 
this.age = age; 
this.address = address; 
this.sex = sex; 
} 

} 

 

***UserService.java*** 
package DwrPackage.Service; 

import DwrPackage.POJO.User; 

/** 
* 配合dwr，模拟业务逻辑层操作 
* 
* @class UserService 
* @description 
* @author 李智慧 
* @copyRight copyright(c) 2011 广东南航易网通电子商务有限公司,Rights Reserved 
* @time Dec 14, 2011 5:16:16 PM 
*/ 
public class UserService { 
/** 
* 测试的时候，只要有username不为空，就返回已经登录状态。 
* 
* @param userName 
* @return 
*/ 
public boolean isLogin(String userName) { 
if (userName == null || "".equals(userName)) { 
return false; 
} else { 
return true; 
} 
} 

/** 
* 获取某个用户，这里是测试，返回固定的值。 
* 
* @return 
*/ 
public User getUserBy(int id) { 
User user = null; 
if (id == 1) { 
user = new User("admin", 20, "广东省广州市", 'M'); 
} else if (id == 2) { 
user = new User("nieke", 22, "广东省深圳市", 'F'); 
} 
return user; 
} 
} 

 

5、前台页面，这里我使用的是jsp页面，见代码：
要导入三个js，两个是基本环境，一个是user.js和配置文件中的名称一致。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
<%   
String path = request.getContextPath();   
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
%>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
<base href="/blog_article/<%=basePath%>/index.html"> 
<title>HelloWorld! Applet</title>  
<script src="/blog_article/<%=request.getContextPath() %>/dwr/interface/user.js" type="text/javascript"></script> 
<script src="/blog_article/<%=request.getContextPath() %>/dwr/util.js" type="text/javascript"></script> 
<script src="/blog_article/<%=request.getContextPath() %>/dwr/engine.js" type="text/javascript"></script> 
<script> 
function dwrTest(){ 
var userName=dwr.util.getValue("userName"); 
user.getUserBy(1,callBack); 
} 
function callBack(str){ 
var userName = str.address; 
alert(userName); 
} 
</script> 
</head> 
<body> 
<input type="text" name="userName" /> 
<input type="button" value="测试DWR功能" name="bt" id="bt" onclick="dwrTest()"/> 
</body>  
</html>  

 
说明：一共5个步骤，本人已经测试成功，相信大家也能配置成功搭建好平台。
到这里dwr的简单实例实战就结束了，是不是很简单？可以开始你们的征途啦……
如果还有不清楚的，欢迎联系本人伊妹儿:lizhihui19871127@163.com.