开发环境:Windows7系统
开发工具:MyEclipse8.5,JDK1.7,MySQL5.0,Tomcat6.0
框架结构:Struts1和JDBC
浏览器:Chrome浏览器,不支持IE浏览器
学Struts1做easyui树形
学习Struts1框架,首先在MyEclipse里建一个web工程,在工程上右键,
在项目上右键选择-MyEclipse-->Add Strust Capabilities...,然后选择Struts1框架,如下图:
源码下载链接:https://pan.baidu.com/s/1slwQNZB 密码 : q3sf
配置如下图:
点击finish,Struts1框架创建完成,在目录里就能看见Struts1配置文件了,接下来在这个配置文件里画架构图。
创建jsp页
将其放在WEB-INF下
建一个表单,右键-New-Form,表单不显示出图。form表单是和前台form表单里的元素相对应的,就像Javabean是和数据库字段一一对应的一样。
配置如下图
接下来建Action同表单建法。
配置如下图,勾选去掉
在jsp和action中间连线,表示jsp发送请求时去找action,action有一个表单对应。
Action收到请求后处理请求,然后跳转到下一个主页面jsp
建主页面jsp,然后在action和这个主页面jsp连线。
在主页面上做点击操作,需要在跳到一个jsp,所以需要在建一个action和jsp页。
登录不成功返回原页面,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