晨魅--学Struts1做easyui树形

开发环境:Windows7系统
开发工具:MyEclipse8.5,JDK1.7,MySQL5.0,Tomcat6.0
框架结构:Struts1和JDBC
浏览器:Chrome浏览器,不支持IE浏览器

学Struts1做easyui树形

学习Struts1框架,首先在MyEclipse里建一个web工程,在工程上右键, 在项目上右键选择-MyEclipse-->Add Strust Capabilities...,然后选择Struts1框架,如下图:


配置如下图:


点击finish,Struts1框架创建完成,在目录里就能看见Struts1配置文件了,接下来在这个配置文件里画架构图。


创建jsp


将其放在WEB-INF


建一个表单,右键-New-Form,表单不显示出图。form表单是和前台form表单里的元素相对应的,就像Javabean是和数据库字段一一对应的一样。


配置如下图


接下来建Action同表单建法。


配置如下图,勾选去掉


在jspaction中间连线,表示jsp发送请求时去找actionaction有一个表单对应。



Action收到请求后处理请求,然后跳转到下一个主页面jsp

建主页面jsp,然后在action和这个主页面jsp连线。

在主页面上做点击操作,需要在跳到一个jsp,所以需要在建一个actionjsp页。

登录不成功返回原页面,err ,下图中的name,在action里传值给jsp时,action里return mapping.findForward("err");括号内的内容要和下图中的name一致。


Web部分完成


以上是Struts1框架的基本搭建流程。

接下来用Struts1框架和JDBC做一个树形。

工程目录如下


struts-config.xml配置文件代码如下:

Action如果继承了DispatchAction类,就需要配置parameter="method",通过method去找action里的方法。
path="/login"和jsp里的请求路径.do前路径相对应如<form action="/strutsTree2/login.do">
type 指向action的路径,scope指定作用域,forward:指定转发的URL路径

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.3//EN" "http://struts.apache.org/dtds/struts-config_1_3.dtd">

<struts-config>
  <form-beans />
  <global-exceptions />
  <global-forwards />
  <action-mappings>
  	<action
      parameter="method"
      path="/mainAction"
      scope="request"
      type="com.chenmei.struts.action.MainAction"
      cancellable="true">
      <forward name="success" path="/index.jsp" />
    </action>

  </action-mappings>
  <message-resources parameter="com.chenmei.struts.ApplicationResources" />
</struts-config>

config.properties链接数据库的配置文件代码如下:

characterEncoding=utf-8避免JDBC操作出现乱码

driver=org.gjt.mm.mysql.Driver
url=jdbc:mysql://localhost:3306/test?characterEncoding=utf-8
uname=root
upass=123456
DbUtils链接数据库的工具类,代码如下:

package com.chenmei.struts.utils;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.Properties;

public class DbUtils {
	//给自己建一个静态的私有属性
	private static DbUtils dl;
	//建私有属性
	private static String driver;
	private static String url;
	private static String uname;
	private static String upass;
	
	//建一个私有的构造方法,防止随意new它
	@SuppressWarnings("static-access")
	private DbUtils() throws Exception{
		//加载配置文件
		Properties p = new Properties();
		p.load(this.getClass().getClassLoader().getResourceAsStream("config.properties"));
		this.driver = p.getProperty("driver");
		this.url = p.getProperty("url");
		this.uname = p.getProperty("uname");
		this.upass = p.getProperty("upass");
		//加载驱动程序到虚拟机中
		Class.forName(this.driver);
	}
	//写一个公有方法,带返回对象,让外边可以new它
	public static synchronized DbUtils getInstance() throws Exception{
		if(dl == null){
			dl = new DbUtils();
		}
		return dl;
	}
	//连接数据库对象
	public Connection getConnection() throws Exception{
		Connection conn = DriverManager.getConnection(url, uname, upass);
		return conn;
	}
	
	
	//重载下面的方法
	public static void close(ResultSet rs, PreparedStatement ps){
		close(rs, ps, null);
	}
	public static void close(PreparedStatement ps){
		close(null, ps, null);
		}
	public static void close(Connection conn){
		close(null, null, conn);
	}
	//关闭资源方法
	public static void close(ResultSet rs, PreparedStatement ps, Connection conn){
		if(rs != null){
			try {
				rs.close();
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		if(ps != null){
			try {
				ps.close();
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		if(rs != null){
			try {
				rs.close();
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}
}
ResponseUtil用到了该类里的向页面传值方法和时间处理方法,代码如下:

//将结果集输出在页面
	public static void write(HttpServletResponse response,Object o)throws Exception{
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.println(o.toString());
		out.flush();
		out.close();
	}
public static String formatDate(Date date,String format){
		String result="";
		SimpleDateFormat sdf=new SimpleDateFormat(format);
		if(date!=null){
			result=sdf.format(date);
		}
		return result;
	}
对应数据库建了三个Javabean,分别是DeptBean,EmpBean和SalaryBean类,代码不列出了。

MainMode代码如下:

package com.chenmei.struts.mode;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import com.chenmei.struts.pojo.DeptBean;
import com.chenmei.struts.utils.DbUtils;
/**
 * 查询部门列表
 * 查询dept_id,作为第一层树的节点
 */
public class MainMode {
	public List<DeptBean> getDeptList(Connection conn){
		String sql = "select dept_id,name FROM  department";
		PreparedStatement ps = null;
		ResultSet rs = null;
		List<DeptBean> deptList = new ArrayList<DeptBean>();
		try {
			ps = conn.prepareStatement(sql);
			rs = ps.executeQuery();
			while(rs.next()){
				DeptBean deptBean=new DeptBean();
				deptBean.setDept_id(rs.getInt("dept_id"));
				deptBean.setName(rs.getString("name"));
				deptList.add(deptBean);
			}
		} catch (Exception e) {
			System.out.println("获取部门列表出错!");
			e.printStackTrace();
		}finally{
			DbUtils.close(rs, ps);
		}
		return deptList;
	}
	/**
	 * 查询月份,并根据employee_id过滤
	 * 查出数据后拼成jsonarray返回给action
	 */
	public JSONArray getMonthList(Connection conn, String deptId) {
		String sql="SELECT month FROM salary WHERE employee_id IN (SELECT employee_id FROM employee WHERE dept_id = ?) GROUP BY month";
		PreparedStatement ps = null;
		ResultSet rs = null;
		JSONArray jsonArray = new JSONArray() ;
		try {
			ps = conn.prepareStatement(sql);
			ps.setString(1, deptId);
			rs = ps.executeQuery();
			while(rs.next()){
				JSONObject jsonObject=new JSONObject();
				jsonObject.put("id", rs.getString(1));
				jsonObject.put("text", rs.getString(1));
				jsonObject.put("state", "close");
				jsonArray.add(jsonObject);
			}
		} catch (Exception e) {
			System.out.println("获取月份列表出错!");
			e.printStackTrace();
		}finally{
			DbUtils.close(rs, ps);
		}
		return jsonArray;
	}
	/**
	 * 查询总条数
	 */
	public int getSalaryCount(Connection conn, String month, String deptId){
		String sql = "SELECT COUNT(employee_id) FROM salary WHERE month = '"+month+"' AND employee_id IN (SELECT employee_id FROM employee WHERE dept_id = '"+deptId+"') ORDER BY month,employee_id";
		PreparedStatement ps = null;
		ResultSet rs = null;
		try{	
			ps=conn.prepareStatement(sql);
			rs=ps.executeQuery();
			if(rs.next()){
				return rs.getInt(1);
			}else{
				return 0;
			}
		}catch(Exception ex){
			System.out.println("获取合计条数失败");
			ex.printStackTrace();
		}
		finally{
			//DbUtils.close(rs, ps);//不能关闭,关闭报错
		}
		return 0;
	}
	/**
	 * 分页显示工资内容
	 */
	public JSONArray getSalaryList(Connection conn, String month, String deptId,
			int page, int rows) throws Exception {
		String sql="select sal.salary_id,sal.employee_id,sal.salary,sal.salary_add,sal.salary_total,sal.month,emp.dept_id,emp.name,emp.code from  salary AS sal "+ 
		" LEFT JOIN employee AS emp on emp.employee_id = sal.employee_id "+
		" where sal.month='"+month+"'  and sal.employee_id in (SELECT employee_id from employee where employee.dept_id='"+deptId+"'  ) group by sal.salary_id limit ?,? ";
		PreparedStatement ps = null;
		ResultSet rs = null;
		JSONArray jsonArray = new JSONArray() ;
		try{			
			ps=conn.prepareStatement(sql);
			ps.setInt(1, (page-1)*rows);
			ps.setInt(2, page*rows);
			rs=ps.executeQuery();
			//将查出的内容循环输出放入jsonArray返回给action
			while(rs.next()){
				JSONObject jsonObject=new JSONObject();
				jsonObject.put("salary_id",rs.getString(1));
				jsonObject.put("employee_id", rs.getString(2));
				jsonObject.put("salary", rs.getString(3));
				jsonObject.put("salary_add",rs.getString(4));
				jsonObject.put("salary_total", rs.getString(5));
				jsonObject.put("month", rs.getString(6));
				jsonObject.put("dept_id", rs.getString(7));
				jsonObject.put("name", rs.getString(8));
				jsonObject.put("code", rs.getString(9));
				jsonArray.add(jsonObject);
			}
		}catch(Exception ex){
			System.out.println("获取工资信息错误");
			ex.printStackTrace();
		}
		finally{
			DbUtils.close(rs, ps);
		}
		return jsonArray;
	}
	/* 第二种写法
	 public ResultSet getSalaryList(Connection conn, String month, String deptId,
			int page, int rows) throws Exception {
		String sql="select * from  salary AS sal "+ 
		" LEFT JOIN employee AS emp on emp.employee_id = sal.employee_id "+
		" where sal.month='"+month+"'  and sal.employee_id in (SELECT employee_id from employee where employee.dept_id='"+deptId+"'  ) group by sal.salary_id limit ?,? ";
		PreparedStatement ps = null;
		ResultSet rs = null;
		JSONArray jsonArray = new JSONArray() ;
		try{			
			ps=conn.prepareStatement(sql);
			ps.setInt(1, (page-1)*rows);
			ps.setInt(2, page*rows);
			rs=ps.executeQuery();
		}catch(Exception ex){
			System.out.println("获取工资信息错误");
			ex.printStackTrace();
		}
		finally{
			//DbUtils.close(rs, ps);
		}
		return rs;
	}*/
	
	public void addSalarySave(Connection conn,int dept_id, String name,String code,String salary,String month) {
		String sql="INSERT INTO employee (dept_id,name,code) VALUES(?,?,?)";
		String sql1="INSERT INTO salary (employee_id,salary,month) VALUES((SELECT employee_id FROM employee ORDER BY employee_id DESC LIMIT 1),?,?)";
		PreparedStatement ps = null;
		PreparedStatement ps1 = null;
		try {
			ps = conn.prepareStatement(sql);
			ps.setInt(1, dept_id);
			ps.setString(2, name);
			ps.setString(3, code);
			ps.executeUpdate();
			ps1 = conn.prepareStatement(sql1);
			ps1.setString(1, salary);
			ps1.setString(2, month);
			ps1.executeUpdate();
		} catch (Exception e) {
			System.out.println("向工资表添加内容出错!");
			e.printStackTrace();
		}finally{
			DbUtils.close(ps);
			DbUtils.close(ps1);
		}
	}
}
MainAction代码如下:

package com.chenmei.struts.action;

import java.io.PrintWriter;
import java.sql.Connection;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;

import com.chenmei.struts.mode.MainMode;
import com.chenmei.struts.pojo.DeptBean;
import com.chenmei.struts.utils.DbUtils;

public class MainAction extends DispatchAction {
	/**
	 * 第一层树
	 * 得到deptId
	 */
	public ActionForward getDeptList(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) throws Exception {
		response.setContentType("text/html;charset=utf-8");//设置发送到客户端的响应的内容类型
		Connection conn = null;
		try {
			conn = DbUtils.getInstance().getConnection();
			MainMode mainMode = new MainMode();
			List<DeptBean> deptList = mainMode.getDeptList(conn);
			conn.close();
			JSONArray jsonArray=new JSONArray();//拼jsonarray,按easyUI的API里给出的格式拼
			for(DeptBean bean:deptList){
				 JSONObject jsonObject =new JSONObject();
				 jsonObject.put("id",bean.getDept_id());
				 jsonObject.put("text",bean.getName());
				 jsonObject.put("state","closed");
				 jsonArray.add(jsonObject);
			} 
			PrintWriter out = response.getWriter();
			//out.println(jsonArray.toString());
			out.println(jsonArray);//将jsonarray输出到页面
			out.flush();//清空缓冲区数据
			out.close();
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			DbUtils.close(conn);
		}
		return null;
	}
	/**
	 * 第二层树
	 * 得到月份
	 */
	public ActionForward getMonthList(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		String deptId = request.getParameter("deptId");
		if(deptId == null){
			deptId = "";
		}
		Connection conn = null;
		try {
			conn = DbUtils.getInstance().getConnection();
			MainMode mainMode = new MainMode();
			JSONArray jsonArray = mainMode.getMonthList(conn, deptId);
			conn.close();
			//如果该方法在getWriter()方法被调用之前调用,那么响应的字符编码将仅从给出的内容类型中设置。该方法如果在getWriter()方法被调用之后或者在被提交之后调用,将不会设置响应的字符编码
			//下面的五句可以写在一个方法里,用时直接调用
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			out.println(jsonArray.toString());
			out.flush();
			out.close();
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			DbUtils.close(conn);
		}
		return null;
	}
	/**
	 * 点击月份显示工资列表
	 */
	public ActionForward getSalaryList(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) throws Exception {
		String month = request.getParameter("month");
		if (month==null){
			month="";
		}
		String deptId = request.getParameter("deptId");
		if (deptId==null){
			deptId="";
		}
		MainMode mainMode=new MainMode();
		Connection conn = null;
		try{
			//获取翻页信息
			int page=Integer.valueOf(request.getParameter("page")==null? "1":request.getParameter("page"));
			int rows=Integer.valueOf(request.getParameter("rows")==null? "20":request.getParameter("rows"));
			//向页面返回JSONObject
			JSONObject result = new JSONObject();
			//链接数据库
			conn = DbUtils.getInstance().getConnection();
			//获取总记录数
			int total = mainMode.getSalaryCount(conn,month,deptId);
			//调取mode里的JSONArray数据
			JSONArray jsonArray = mainMode.getSalaryList(conn, month, deptId, page, rows);
			//放到JSONObject里传到页面
			result.put("rows", jsonArray);
			result.put("total", total);	
			//向页面传值
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			out.println(jsonArray.toString());
			out.flush();
			out.close();
		}finally{
			conn.close();
		}
		return null;
	}
	
//	public ActionForward getSalaryList(ActionMapping mapping, ActionForm form,
//			HttpServletRequest request, HttpServletResponse response) throws Exception {
//		String month = request.getParameter("month");
//		if (month==null){
//			month="";
//		}
//		String deptId = request.getParameter("deptId");
//		if (deptId==null){
//			deptId="";
//		}
//		MainMode mainMode=new MainMode();
//		Connection conn = null;
//		try{
//			//获取翻页信息
//			int page=Integer.valueOf(request.getParameter("page")==null? "1":request.getParameter("page"));
//			int rows=Integer.valueOf(request.getParameter("rows")==null? "20":request.getParameter("rows"));
//			
//			JSONObject result = new JSONObject();
//			conn = DbUtils.getInstance().getConnection();
//			//获取总记录数
//			int total = mainMode.getSalaryCount(conn,month,deptId);
//			JSONArray jsonarray = ResponseUtil.formatRsToJsonArray(
//					mainMode.getSalaryList(conn,month,deptId,page,rows));
//			/*格式化jsonarray的,可以写到一个方法里
//				ResultSet rs = mainMode.getSalaryList(conn, month, deptId, page, rows);
//				ResultSetMetaData md=rs.getMetaData();
//				int num=md.getColumnCount();
//				JSONArray array=new JSONArray();
//				while(rs.next()){
//					JSONObject mapOfColValues=new JSONObject();
//					for(int i=1;i<=num;i++){
//						Object o=rs.getObject(i);
//						if(o instanceof Date){ //instanceof是一个运算符,返回布尔类型。格式是object instanceof class,这里是判断object类型的o是否是date类型,是返回true。
//							mapOfColValues.put(md.getColumnName(i), formatDate((Date)o, "yyyy-MM-dd"));
//						}else{
//							mapOfColValues.put(md.getColumnName(i), rs.getObject(i));					
//						}
//					}
//					array.add(mapOfColValues);
//				}
//			*/
//			result.put("rows", jsonarray);
//			result.put("total", total);	
//			//调向页面传值的方法
//			ResponseUtil.write(response, result);
//		}finally{
//			conn.close();
//		}
//		return null;
//	}
	/* 日期处理,可以写到一个方法里
		public static String formatDate(Date date,String format){
			String result="";
			SimpleDateFormat sdf=new SimpleDateFormat(format);
			if(date!=null){
				result=sdf.format(date);
			}
			return result;
	}*/
	
	//添加方法 
	public ActionForward addSalarySave(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) throws Exception {
		response.setContentType("text/html;charset=utf-8");//设置发送到客户端的响应的内容类型
		String name = request.getParameter("name");
		String code = request.getParameter("code");
		String salary = request.getParameter("salary");
		String month = request.getParameter("month");
		int dept_id = Integer.parseInt(request.getParameter("dept_id"));
		Connection conn = null;
		boolean result = false;
		try {
			conn = DbUtils.getInstance().getConnection();
			MainMode mainMode = new MainMode();
			mainMode.addSalarySave(conn, dept_id, name, code, salary, month);
			result = true;
			PrintWriter out = response.getWriter();
			out.println(result);//将jsonarray输出到页面
			out.flush();//清空缓冲区数据
			out.close();
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			DbUtils.close(conn);
		}
		return null;
	}			
}
index.jsp代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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="<%=basePath%>">
    
    <title>主页</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<!-- 注意引包的路径 -->
	<script src="/struts1_jdbc/js/jquery-1.11.2.min.js" language="javascript"></script>
	<!-- 引用easyui时最好引用easyui内部的jQuery,引用jQuery时要放在最上面 -->
	<script type="text/javascript" src="/struts1_jdbc/jquery-easyui-1.4.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/struts1_jdbc/jquery-easyui-1.4.1/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="/struts1_jdbc/jquery-easyui-1.4.1/themes/icon.css">
	<script type="text/javascript" src="/struts1_jdbc/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="/struts1_jdbc/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>

  </head>
  <style>
  	.gzb{
		text-align: center;
		background-color: #258ce9;
		color: #ffffff;
		font-size: 30px; 
		line-height: 44px;
		margin: 2px;
	}
	.buttons{
		background-color: #f3f3f3;
		height: 42px;
	}
	.ffyf{
		float: left; width: 140px;
    	line-height: 40px;
    	padding: 3px;
    	font-weight: bold;
	}
	.but{
  		float: left;
  		background-color: #1fb6bd;
  		border:none;
  		color:white;
  		margin: 4px 2px;
  		cursor: pointer;
  		width: 110px;
	    height: 30px;
	    border-radius: 10px;
	    line-height: 30px;
  	}
  	.black_overlay{ 
         display:block; 
         position: absolute; 
         top: 0%; 
         left: 0%; 
         width: 100%; 
         height: 100%; 
         background-color: black; 
         z-index:1001; 
         -moz-opacity: 0.28; 
         opacity:.28; 
         filter: alpha(opacity=28); 
     }
     .white_content12 {
			display: block;
			position: absolute;
			top: 138px;
			left: 238px;
			width: 80%;
			height: 242px;
			padding: 10px;
			background-color: white;
			z-index: 1002;
			overflow: auto;
			padding-top: 20px;
			padding-left: 10px;
			padding-right: 10px;
			border: 1px solid #000;
			display: none;
	 	}
	 	th{
  		background-color: #0884b3;
  		color:white;
  		height: 40px;
		}
		td{
			text-align: center;
		}
		input{
			text-align: center;
		}
  </style>
  
  <script type="text/javascript">
  /* 一层树样式显示,写一个URL就可以了。
  	$(function(){
	    $("#tree").tree({    
		    url:"/struts1_jdbc/mainAction.do?method=getDeptList"
		}); 
	  });
  */
  //多层树方法如下
  $(function(){
    $("#tree").tree({   
    	/*URL:struts1_jdbc是工程名,
    	  mainAction.do是struts-config文件下的path="/mainAction"设的路径以.do形式提交,
    	  method是struts-config文件下的parameter="method"定义的属性,通过它可以找到action里的方法,
    	  getDeptList是action里的方法,在action里写多个方法时需要继承DispatchAction类。
    	*/ 
	    url:"/struts1_jdbc/mainAction.do?method=getDeptList", 
	    //给第一层树添加onBeforeExpand事件,在节点展开之前触发,返回false可以取消展开操作。参数node具备属性id:绑定节点的标识值。text:显示的节点文本等等。看API
	    onBeforeExpand:function(node){
	    	//通过参数node获取节点ID,这里需要把它转成String形来判断ID长度(判断不是很好,ID是两位就不能判断了,这里仅做举例)
	    	var dept_id = node.id.toString();
	    	//判断获取到的ID,等于1说明是第一层树,当点击第一层树时调取这个事件,开始加载第二层树(多层树以此类推)
	    	if(dept_id.length==1){
	    		//选择树的ID,options是一个方法,里面有url属性,通过它里面的url属性请求action获得第二层树的数据
	    		$('#tree').tree('options').url="/struts1_jdbc/mainAction.do?method=getMonthList&deptId="+node.id;
	    		console.info($('#tree').tree('options'));//在控制台打印出options里都有那些属性
	    		//$("#deptId").val(node.id);//-----------
	    	}
	    },
	    onClick:function(node){ //给第二层树添加点击事件
	    	var parent_node = $("#tree").tree('getParent',node.target);//getParent获取父节点,'target'参数代表节点的DOM对象。
	    	$("#deptId").val(parent_node.id);//parent_node是获取父节点ID,也就是得到deptid
	    	//console.log($("#deptId").val(parent_node.id));//在控制输出,有实际赋值功能
	    	var month_id = node.id+"";//得到第二层树ID,并转成字符串
	    	//显示发放月份
	    	$("#month_id").html("发放月份:"+month_id);
	    	$("#monthId").val(month_id);
	    	if(month_id.indexOf("-")>0){//判断月份格式,就是判断第二层树节点
	    		//datagrid以表格形式展示数据
	    		$('#table_id').datagrid({
	    			pagination :true,//pagination :true控制是否显示分页,设成true显示分页栏
				    rownumbers :true,//当true时显示行号。默认false 
				    pageList:[20,100],//pageList:[10,20,30,50]用户可以改变页面大小。这里默认没页显示20条,最多100条。
				    pageSize : 20,//初始化的页面大小。默认20行 
				    url : "/struts1_jdbc/mainAction.do?method=getSalaryList&month="+node.id+"&deptId="+$("#deptId").val(),
				    fit : false,//当True时设置该面板尺寸适合于它的父容器。默认false。
				    fitColumns : true,//真正的自动展开/收缩列的大小,以适应网格的宽度,防止水平滚动。
				    remoteSort : false,//定义从服务器对数据进行排序。
				    columns : [[ 
			          {field :'xz', checkbox: 'true'},	//选择框	  sortable如果为true,则允许列使用排序。  
					  {field : 'name',title : '姓名', sortable : true,   width : 50 },
					  {field : 'code',title : '人员编号', sortable : true,width : 60},
					  {field : 'salary',title : '应发工资', sortable : true,width : 60},
					  {field : 'salary_add',title : '补发工资', sortable : true,   width : 60 },
		              {field : 'salary_total',title : '应发合计', sortable : true,   width : 50 },
		              {field : 'salary_id',hidden:true },
		              {field : 'employee_id',hidden:true }
			        ]],
			        //rowStyler是datagrid里的一个属性,有两个参数,返回样式。如下是设置隔行变色的
			        rowStyler: function(index,row){
						if (index %2 == 0){
							return 'background-color:#E6FBDE;color:balck;';
						}
					} 
	    		});
	    	}
	    }
	}); 
  });
  	//打开遮罩层
    function openAddWindow(target){
    	var dept_id = $('#deptId').val();
    	if(dept_id == ""){
    		alert("请先选择月份,在进行添加!");
    	}else{
    		var obj = $("#"+target);
			$("#fade").show();
			obj.show();
    	}
	}
	//关闭遮罩层
	function closeDiv(target){ 
		var obj = $("#"+target);
		$("#fade").hide();
		obj.hide();
	}
	//添加
	function saveAdd(){
		var inputs = $("#table_add tbody input");
    			var name = inputs.eq(0).val();
    			var code = inputs.eq(1).val();
    			var salary = inputs.eq(2).val();
    			var dept_id = $('#deptId').val();
    			var month = $('#monthId').val();
    	$.ajax({
    		url:"/struts1_jdbc/mainAction.do?method=addSalarySave",
			type:"post",
			data:{"name":name,"code":code,"salary":salary,"dept_id":dept_id,"month":month},
			dataType:"json",
    		success:function(result){
				alert("保存成功");
				$('#table_id').datagrid({
	    			pagination :true,//pagination :true控制是否显示分页,设成true显示分页栏
				    rownumbers :true,//当true时显示行号。默认false 
				    pageList:[20,100],//pageList:[10,20,30,50]用户可以改变页面大小。这里默认没页显示20条,最多100条。
				    pageSize : 20,//初始化的页面大小。默认20行 
				    url : "/struts1_jdbc/mainAction.do?method=getSalaryList&month="+month+"&deptId="+$("#deptId").val(),
				    fit : false,//当True时设置该面板尺寸适合于它的父容器。默认false。
				    fitColumns : true,//真正的自动展开/收缩列的大小,以适应网格的宽度,防止水平滚动。
				    remoteSort : false,//定义从服务器对数据进行排序。
				    columns : [[ 
			          {field :'xz', checkbox: 'true'},	//选择框	  sortable如果为true,则允许列使用排序。  
					  {field : 'name',title : '姓名', sortable : true,   width : 50 },
					  {field : 'code',title : '人员编号', sortable : true,width : 60},
					  {field : 'salary',title : '应发工资', sortable : true,width : 60},
					  {field : 'salary_add',title : '补发工资', sortable : true,   width : 60 },
		              {field : 'salary_total',title : '应发合计', sortable : true,   width : 50 },
		              {field : 'salary_id',hidden:true },
		              {field : 'employee_id',hidden:true }
			        ]],
			        //rowStyler是datagrid里的一个属性,有两个参数,返回样式。如下是设置隔行变色的
			        rowStyler: function(index,row){
						if (index %2 == 0){
							return 'background-color:#E6FBDE;color:balck;';
						}
					} 
	    		});
			},
			error:function(){
				alert("保存失败。");
			}
    	});
		$("#fade").hide();
		$("#div_add").hide();
	}
  </script>
  
  <body class="easyui-layout">
    <!-- 头部 -->
	<div data-options="region:'north'" style="height:50px">
		<div> <h3 class="gzb">工资表</h3> </div>
	</div>
	<!-- 底部
	<div data-options="region:'south',split:true" style="height:50px;"></div> -->
	<!-- 右侧
	<div data-options="region:'east',split:true" title="East" style="width:100px;"></div> -->
	<!-- 左侧 -->
	<div region="west" split="true" title="单位信息" style="width:310px;">
	 <!-- 树形 -->
	 <ul id="tree"></ul> 
	</div>
	<!-- 中间      按钮 -->
	<div region="center" iconCls="icon-ok">
		<div class="buttons">
			<div class="ffyf" id="month_id"></div>
			<div class="button"><button id="add" class="but" type="button" οnclick="openAddWindow('div_add')">添加</button></div>
			<div class="button"><button id="update" class="but" type="button" οnclick="openUpdateWindow('div_update')">修改工资</button></div>
			<div class="button"><button id="tzbf" class="but" type="button" οnclick="tzbf()">调整补发</button></div>
			<div class="button"><button id="del" class="but" type="button" οnclick="del()">删除</button></div>
		</div>
		<!-- 表格 -->
		<table id="table_id" class="easyui-datagrid" title="月份下人员工资列表" style="width:1600px;height:580px; " >
		<thead><tr></tr></thead>
	    </table>
	</div>
	<!-- 第二层窗口表格 -->
	<div id="div_add" class="white_content12">
	    <table id="table_add" >
	    	<thead>
	    		<tr>
		           <th>姓名</th>
		           <th>人员编号</th>
		           <th>应发工资</th>
	    		</tr>
	    	</thead>
	    	<tbody>
	    		<tr>
		    		<td><input type="text"></td>
		    		<td><input type="text"></td>
		    		<td><input type="text"></td>
	    		</tr>
	    	</tbody>
	    </table>
	    <div style="float:left; width:100%; text-align:center; padding-top:10px"> 
            <input id="saveAdd" type="button" οnclick="saveAdd()" value="确定" />
            <input type="button" value="关闭" οnclick="closeDiv('div_add')"/>
        </div>
    </div>
	<!-- 遮罩层 -->
	<div id="fade" class="black_overlay" style="display: none;"></div>  
	
	<input type="hidden" id="deptId" value=""/>
	<input type="hidden" id="monthId" value=""/>
  </body>
</html>
预览效果图:

源码下载链接:https://pan.baidu.com/s/1slwQNZB 密码 : q3sf

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值