ztree添加子节点_My97Date和ztree使用

My97Date

下载

My97日期控件 下载 & 更新日志 My97Datepicker Download & Changelog​www.my97.net

引用

• 1、在使用该日期控件的文件中加入JS库(仅这一个文件即可,其他文件会自动引入,请勿删除或改名)
• 2、引用代码如下： <script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js"></script>
• 3、注:src="datepicker/WdatePicker.js" 请根据你的实际情况改变路径

示例：

日期转换器

修改pom文件添加commons-lang3的jar包坐标

<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
</dependency>

创建日期转换器

public class DateConverter implements Converter<String, Date> {

   public Date convert(String str) {
      String[] patterns = new String[]{
            "yyyy-MM-dd","yyyy-MM-dd hh:mm:ss","yyyy/mm/ss","yyyy/MM/dd hh:mm:ss",
            "MM-dd-yyyy","dd-MM-yyyy"};
      Date d = null;
      try {
         d=DateUtils.parseDate(str, patterns);
      } catch (ParseException e) {
         e.printStackTrace();
      }
      return d;
   }

}

在springmvc中配置日期转换器

<!-- 注解驱动 -->
<mvc:annotation-driven conversion-service="cs"/>

<!-- 日期转换器 -->
<bean id="cs" class="org.springframework.format.support.FormattingConversionServiceFactoryBean">
    <property name="converters">
        <list>
            <bean class="com.sxt.converter.DateConverter"></bean>
        </list>
    </property>
</bean>

ztree

api的使用

注意：切换成ie模式，并允许阻止内容

demo的使用

页面中引用

<link rel="stylesheet" href="${ctx }/components/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css" />
<script type="text/javascript" src="${ctx }/components/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx }/components/zTree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="${ctx }/components/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>

修改jRoleModule.jsp

<script type="text/javascript">
		var setting = {
			check: {
				enable: true //显示checkbox/radio
			},
			data: {
				simpleData: {
					enable: true//使用简单的数据模式
				}
			}
		};

		$(function(){
			$.ajax({
				url:'${ctx}/role/listModuleOfTreeBean',
				type:'post',
				data:{id:'${role.roleId}'},
				success:initzTree
			});
		});
		function initzTree(zNodes){
			/**
			 obj：显示zTree的dom节点
			 setting：树的配置信息
			 zNodes：树的节点数据
			 */
			$.fn.zTree.init($("#jTree"), setting, zNodes);
		}
		//获取所有选择的节点
		function submitCheckedNodes() {

			var nodes = new Array();//装选中的节点
			//获得选中的节点
			nodes = zTreeObj.getCheckedNodes(true);
			//选中的id
			var ids = new Array();
			//遍历选中的节点数组，并把节点对象的id属性装到ids数组中
			for (var i = 0; i < nodes.length; i++) {
				ids.push(nodes[i].id);
			}
			//把数组ids转换成1,2,3,4这种形式
			ids = ids.join(",");
			$("#moduleIds").val(ids);
		}
	</script>

ztree树需要的数据

修改ModulePMapper.xml

select module_id id,parent_id pid, name ,'true' open,'true' checked from module_p where module_id in (
	select module_id from role_module_p where ROLE_ID = '4028a1c34ec2e5c8014ec2ebf8430001'
)
UNION
select module_id id,parent_id pid, name ,'true' open,'false' checked from module_p where module_id not in (
	select module_id from role_module_p where ROLE_ID = '4028a1c34ec2e5c8014ec2ebf8430001'
)

运行效果