晨魅--学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同表单建法。

配置如下图，勾选去掉

在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.Driverurl=jdbc:mysql://localhost:3306/test?characterEncoding=utf-8uname=rootupass=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返回给actionwhile(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"));//向页面返回JSONObjectJSONObject 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" onclick="openAddWindow('div_add')">添加</button></div><div class="button"><button id="update" class="but" type="button" onclick="openUpdateWindow('div_update')">修改工资</button></div><div class="button"><button id="tzbf" class="but" type="button" onclick="tzbf()">调整补发</button></div><div class="button"><button id="del" class="but" type="button" onclick="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" onclick="saveAdd()" value="确定" />            <input type="button" value="关闭" onclick="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