EASYUI

EasyUI 简介

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的

所有的 EasyUI 插件

jQuery easyui提供了一个完整的组件的集合，包括强大的DataGrid，树网格，面板。用户可以使用他们一起，或者只是用一些组件，组合和构建他想要的跨浏览器的网页应用。
Menu 菜单
Menubutton 菜单按钮
Splitbutton 分割按钮
Layout 布局
Accordion 折叠面板
Panel 面板
Tabs 标签页/选项卡
Progressbar 进度条
Tooltip 提示框
Searchbox 搜索框
Resizable 可调整尺寸
Pagination 分页
Droppable 可放置
Easyloader 加载器
Draggable 可拖动
Tree 树
Propertygrid 属性网格
Datagrid 数据网格
Messager 消息框
Dialog 对话框
Numberbox 数字框
Datebox 日期框
Datetimebox 日期时间框
Calendar 日历
Spinner 微调器
Numberspinner 数值微调器
Timespinner 时间微调器
Slider 滑块Window 窗口
Combogrid 组合网格
Combo 组合
Combobox 组合框
Combotree 组合树
Form 表单
Validatebox 验证框
Treegrid 树形网格
Parser 解析器
Linkbutton 链接按钮

EasyUI官网：

官网：http://www.jeasyui.com
中文版：http://www.jeasyui.net

EasyUI下载：

官网下载地址：http://www.jeasyui.com/download/index.php

EasyUI文档：

官网英文文档：http://www.jeasyui.com/documentation/index.php
中文版chm文档下载：http://pan.baidu.com/s/1pL6O7hD

EasyUI数据表格DataGrid

需要引入：

 <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="themes/icon.css">    <script type="text/javascript" src="jquery.min.js"></script>    <script type="text/javascript" src="jquery.easyui.min.js"></script>

目录结构：需要引入标红的文件

crud例子：

@Controllerpublic class StudentController {    @Autowired    StudentService service;    /**     * 查询的方法     * @param sname学生姓名     * @param page 当前页     * @param rows 每页显示多少行     * @return     */    @ResponseBody    @RequestMapping("/queryStudent")    public PageTools queryStudent(String sname,Integer page,Integer rows){        return service.queryStudent(sname,page,rows);    }    /**     * 删除学生     */    @ResponseBody    @RequestMapping(value="/deleteStudent/{sid}",method=RequestMethod.DELETE)    public Result deleteStudent(@PathVariable String sid,Integer page,Integer rows){        /*  //删除一行        Result rt=new Result();        rt.setCode(1);        try {            //检测异常            //String str=null;            //str.toString();            service.deleteStudent(Integer.parseInt(sid));        } catch (Exception e) {            rt.setCode(0);            rt.setMessage(e);        }        return rt;*/        // 删除多行        Result rt = new Result();        rt.setCode(1);        String[] str=sid.split(",");        try {            //检测异常            /*String str=null;            str.toString();*/            for(int i=0;i<str.length;i++){                //删除                service.deleteStudent(Integer.parseInt(str[i]));            }        } catch (Exception e) {            //删除失败            rt.setCode(0);            rt.setMessage(e);               }        return rt;    }    /**     * 修改学生信息     */    @ResponseBody    @RequestMapping(value="/updateStudent/{sid}",method=RequestMethod.PUT)    public Result updateStudent(@PathVariable Integer sid,Student student,Integer page,Integer rows){        student.setSid(sid);        Result rt=new Result();        rt.setCode(1);        try {            service.updateStudent(student);        } catch (Exception e) {            rt.setCode(0);            rt.setMessage(e);        }        return rt;    }    /**     *添加学生信息     */    @ResponseBody    @RequestMapping(value="/saveStudent",method=RequestMethod.POST)    public Result saveStudent(Student student,MultipartFile  myImage){        Result rt=new Result();        rt.setCode(1);        try {            //获取文件名            String fileName=myImage.getOriginalFilename();            File destFile=new File("E:\\myImages\\"+fileName);            myImage.transferTo(destFile);            service.saveFood(student);        } catch (Exception e) {            rt.setCode(0);            rt.setMessage(e);        }        return rt;    }}

dao层

public interface StudentMapper {    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    @SelectProvider(type=StudentSqlProvider.class, method="countByExample")    long countByExample(StudentExample example);    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    @DeleteProvider(type=StudentSqlProvider.class, method="deleteByExample")    int deleteByExample(StudentExample example);    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    @Delete({        "delete from student",        "where sid = #{sid,jdbcType=INTEGER}"    })    int deleteByPrimaryKey(Integer sid);    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    @Insert({        "insert into student (sid, sname, ",        "gid, sex, age, ",        "address)",        "values (#{sid,jdbcType=INTEGER}, #{sname,jdbcType=VARCHAR}, ",        "#{gid,jdbcType=INTEGER}, #{sex,jdbcType=INTEGER}, #{age,jdbcType=INTEGER}, ",        "#{address,jdbcType=VARCHAR})"    })    int insert(Student record);    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    @InsertProvider(type=StudentSqlProvider.class, method="insertSelective")    int insertSelective(Student record);    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    @SelectProvider(type=StudentSqlProvider.class, method="selectByExample")    @Results({        @Result(column="sid", property="sid", jdbcType=JdbcType.INTEGER, id=true),        @Result(column="sname", property="sname", jdbcType=JdbcType.VARCHAR),        @Result(column="gid", property="gid", jdbcType=JdbcType.INTEGER),        @Result(column="sex", property="sex", jdbcType=JdbcType.INTEGER),        @Result(column="age", property="age", jdbcType=JdbcType.INTEGER),        @Result(column="address", property="address", jdbcType=JdbcType.VARCHAR)    })    List<Student> selectByExampleWithRowbounds(StudentExample example, RowBounds rowBounds);    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    @SelectProvider(type=StudentSqlProvider.class, method="selectByExample")    @Results({        @Result(column="sid", property="sid", jdbcType=JdbcType.INTEGER, id=true),        @Result(column="sname", property="sname", jdbcType=JdbcType.VARCHAR),        @Result(column="gid", property="gid", jdbcType=JdbcType.INTEGER),        @Result(column="sex", property="sex", jdbcType=JdbcType.INTEGER),        @Result(column="age", property="age", jdbcType=JdbcType.INTEGER),        @Result(column="address", property="address", jdbcType=JdbcType.VARCHAR)    })    List<Student> selectByExample(StudentExample example);    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    @Select({        "select",        "sid, sname, gid, sex, age, address",        "from student",        "where sid = #{sid,jdbcType=INTEGER}"    })    @Results({        @Result(column="sid", property="sid", jdbcType=JdbcType.INTEGER, id=true),        @Result(column="sname", property="sname", jdbcType=JdbcType.VARCHAR),        @Result(column="gid", property="gid", jdbcType=JdbcType.INTEGER),        @Result(column="sex", property="sex", jdbcType=JdbcType.INTEGER),        @Result(column="age", property="age", jdbcType=JdbcType.INTEGER),        @Result(column="address", property="address", jdbcType=JdbcType.VARCHAR)    })    Student selectByPrimaryKey(Integer sid);    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    @UpdateProvider(type=StudentSqlProvider.class, method="updateByExampleSelective")    int updateByExampleSelective(@Param("record") Student record, @Param("example") StudentExample example);    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    @UpdateProvider(type=StudentSqlProvider.class, method="updateByExample")    int updateByExample(@Param("record") Student record, @Param("example") StudentExample example);    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    @UpdateProvider(type=StudentSqlProvider.class, method="updateByPrimaryKeySelective")    int updateByPrimaryKeySelective(Student record);    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    @Update({        "update student",        "set sname = #{sname,jdbcType=VARCHAR},",          "gid = #{gid,jdbcType=INTEGER},",          "sex = #{sex,jdbcType=INTEGER},",          "age = #{age,jdbcType=INTEGER},",          "address = #{address,jdbcType=VARCHAR}",        "where sid = #{sid,jdbcType=INTEGER}"    })    int updateByPrimaryKey(Student record);}public class StudentSqlProvider {    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public String countByExample(StudentExample example) {        SQL sql = new SQL();        sql.SELECT("count(*)").FROM("student");        applyWhere(sql, example, false);        return sql.toString();    }    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public String deleteByExample(StudentExample example) {        SQL sql = new SQL();        sql.DELETE_FROM("student");        applyWhere(sql, example, false);        return sql.toString();    }    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public String insertSelective(Student record) {        SQL sql = new SQL();        sql.INSERT_INTO("student");        if (record.getSid() != null) {            sql.VALUES("sid", "#{sid,jdbcType=INTEGER}");        }        if (record.getSname() != null) {            sql.VALUES("sname", "#{sname,jdbcType=VARCHAR}");        }        if (record.getGid() != null) {            sql.VALUES("gid", "#{gid,jdbcType=INTEGER}");        }        if (record.getSex() != null) {            sql.VALUES("sex", "#{sex,jdbcType=INTEGER}");        }        if (record.getAge() != null) {            sql.VALUES("age", "#{age,jdbcType=INTEGER}");        }        if (record.getAddress() != null) {            sql.VALUES("address", "#{address,jdbcType=VARCHAR}");        }        return sql.toString();    }    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public String selectByExample(StudentExample example) {        SQL sql = new SQL();        if (example != null && example.isDistinct()) {            sql.SELECT_DISTINCT("sid");        } else {            sql.SELECT("sid");        }        sql.SELECT("sname");        sql.SELECT("gid");        sql.SELECT("sex");        sql.SELECT("age");        sql.SELECT("address");        sql.FROM("student");        applyWhere(sql, example, false);        if (example != null && example.getOrderByClause() != null) {            sql.ORDER_BY(example.getOrderByClause());        }        return sql.toString();    }    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public String updateByExampleSelective(Map<String, Object> parameter) {        Student record = (Student) parameter.get("record");        StudentExample example = (StudentExample) parameter.get("example");        SQL sql = new SQL();        sql.UPDATE("student");        if (record.getSid() != null) {            sql.SET("sid = #{record.sid,jdbcType=INTEGER}");        }        if (record.getSname() != null) {            sql.SET("sname = #{record.sname,jdbcType=VARCHAR}");        }        if (record.getGid() != null) {            sql.SET("gid = #{record.gid,jdbcType=INTEGER}");        }        if (record.getSex() != null) {            sql.SET("sex = #{record.sex,jdbcType=INTEGER}");        }        if (record.getAge() != null) {            sql.SET("age = #{record.age,jdbcType=INTEGER}");        }        if (record.getAddress() != null) {            sql.SET("address = #{record.address,jdbcType=VARCHAR}");        }        applyWhere(sql, example, true);        return sql.toString();    }    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public String updateByExample(Map<String, Object> parameter) {        SQL sql = new SQL();        sql.UPDATE("student");        sql.SET("sid = #{record.sid,jdbcType=INTEGER}");        sql.SET("sname = #{record.sname,jdbcType=VARCHAR}");        sql.SET("gid = #{record.gid,jdbcType=INTEGER}");        sql.SET("sex = #{record.sex,jdbcType=INTEGER}");        sql.SET("age = #{record.age,jdbcType=INTEGER}");        sql.SET("address = #{record.address,jdbcType=VARCHAR}");        StudentExample example = (StudentExample) parameter.get("example");        applyWhere(sql, example, true);        return sql.toString();    }    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public String updateByPrimaryKeySelective(Student record) {        SQL sql = new SQL();        sql.UPDATE("student");        if (record.getSname() != null) {            sql.SET("sname = #{sname,jdbcType=VARCHAR}");        }        if (record.getGid() != null) {            sql.SET("gid = #{gid,jdbcType=INTEGER}");        }        if (record.getSex() != null) {            sql.SET("sex = #{sex,jdbcType=INTEGER}");        }        if (record.getAge() != null) {            sql.SET("age = #{age,jdbcType=INTEGER}");        }        if (record.getAddress() != null) {            sql.SET("address = #{address,jdbcType=VARCHAR}");        }        sql.WHERE("sid = #{sid,jdbcType=INTEGER}");        return sql.toString();    }    /**     * This method was generated by MyBatis Generator.     * This method corresponds to the database table student     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    protected void applyWhere(SQL sql, StudentExample example, boolean includeExamplePhrase) {        if (example == null) {            return;        }        String parmPhrase1;        String parmPhrase1_th;        String parmPhrase2;        String parmPhrase2_th;        String parmPhrase3;        String parmPhrase3_th;        if (includeExamplePhrase) {            parmPhrase1 = "%s #{example.oredCriteria[%d].allCriteria[%d].value}";            parmPhrase1_th = "%s #{example.oredCriteria[%d].allCriteria[%d].value,typeHandler=%s}";            parmPhrase2 = "%s #{example.oredCriteria[%d].allCriteria[%d].value} and #{example.oredCriteria[%d].criteria[%d].secondValue}";            parmPhrase2_th = "%s #{example.oredCriteria[%d].allCriteria[%d].value,typeHandler=%s} and #{example.oredCriteria[%d].criteria[%d].secondValue,typeHandler=%s}";            parmPhrase3 = "#{example.oredCriteria[%d].allCriteria[%d].value[%d]}";            parmPhrase3_th = "#{example.oredCriteria[%d].allCriteria[%d].value[%d],typeHandler=%s}";        } else {            parmPhrase1 = "%s #{oredCriteria[%d].allCriteria[%d].value}";            parmPhrase1_th = "%s #{oredCriteria[%d].allCriteria[%d].value,typeHandler=%s}";            parmPhrase2 = "%s #{oredCriteria[%d].allCriteria[%d].value} and #{oredCriteria[%d].criteria[%d].secondValue}";            parmPhrase2_th = "%s #{oredCriteria[%d].allCriteria[%d].value,typeHandler=%s} and #{oredCriteria[%d].criteria[%d].secondValue,typeHandler=%s}";            parmPhrase3 = "#{oredCriteria[%d].allCriteria[%d].value[%d]}";            parmPhrase3_th = "#{oredCriteria[%d].allCriteria[%d].value[%d],typeHandler=%s}";        }        StringBuilder sb = new StringBuilder();        List<Criteria> oredCriteria = example.getOredCriteria();        boolean firstCriteria = true;        for (int i = 0; i < oredCriteria.size(); i++) {            Criteria criteria = oredCriteria.get(i);            if (criteria.isValid()) {                if (firstCriteria) {                    firstCriteria = false;                } else {                    sb.append(" or ");                }                sb.append('(');                List<Criterion> criterions = criteria.getAllCriteria();                boolean firstCriterion = true;                for (int j = 0; j < criterions.size(); j++) {                    Criterion criterion = criterions.get(j);                    if (firstCriterion) {                        firstCriterion = false;                    } else {                        sb.append(" and ");                    }                    if (criterion.isNoValue()) {                        sb.append(criterion.getCondition());                    } else if (criterion.isSingleValue()) {                        if (criterion.getTypeHandler() == null) {                            sb.append(String.format(parmPhrase1, criterion.getCondition(), i, j));                        } else {                            sb.append(String.format(parmPhrase1_th, criterion.getCondition(), i, j,criterion.getTypeHandler()));                        }                    } else if (criterion.isBetweenValue()) {                        if (criterion.getTypeHandler() == null) {                            sb.append(String.format(parmPhrase2, criterion.getCondition(), i, j, i, j));                        } else {                            sb.append(String.format(parmPhrase2_th, criterion.getCondition(), i, j, criterion.getTypeHandler(), i, j, criterion.getTypeHandler()));                        }                    } else if (criterion.isListValue()) {                        sb.append(criterion.getCondition());                        sb.append(" (");                        List<?> listItems = (List<?>) criterion.getValue();                        boolean comma = false;                        for (int k = 0; k < listItems.size(); k++) {                            if (comma) {                                sb.append(", ");                            } else {                                comma = true;                            }                            if (criterion.getTypeHandler() == null) {                                sb.append(String.format(parmPhrase3, i, j, k));                            } else {                                sb.append(String.format(parmPhrase3_th, i, j, k, criterion.getTypeHandler()));                            }                        }                        sb.append(')');                    }                }                sb.append(')');            }        }        if (sb.length() > 0) {            sql.WHERE(sb.toString());        }    }}

entity层

/** * 返回状态对象的类 * @author Administrator * */public class Result {    /**     * 定义代码     * 0表示失败     * 1表示成功     */    private int code;    /**     * 定义失败的消息     */    private String message;    public int getCode() {        return code;    }    public void setCode(int code) {        this.code = code;    }    public String getMessage() {        if(message!=null&&message.length()>1000){            return message.substring(0,1000);        }        return message;    }    public void setMessage(Exception msg) {        ByteArrayOutputStream baos=new ByteArrayOutputStream();        msg.printStackTrace(new PrintStream(baos));        this.message =new String( baos.toByteArray());    }}public class Student {    /**     *     * This field was generated by MyBatis Generator.     * This field corresponds to the database column student.sid     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    private Integer sid;    /**     *     * This field was generated by MyBatis Generator.     * This field corresponds to the database column student.sname     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    private String sname;    /**     *     * This field was generated by MyBatis Generator.     * This field corresponds to the database column student.gid     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    private Integer gid;    /**     *     * This field was generated by MyBatis Generator.     * This field corresponds to the database column student.sex     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    private Integer sex;    /**     *     * This field was generated by MyBatis Generator.     * This field corresponds to the database column student.age     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    private Integer age;    /**     *     * This field was generated by MyBatis Generator.     * This field corresponds to the database column student.address     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    private String address;    /**     * This method was generated by MyBatis Generator.     * This method returns the value of the database column student.sid     *     * @return the value of student.sid     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public Integer getSid() {        return sid;    }    /**     * This method was generated by MyBatis Generator.     * This method sets the value of the database column student.sid     *     * @param sid the value for student.sid     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public void setSid(Integer sid) {        this.sid = sid;    }    /**     * This method was generated by MyBatis Generator.     * This method returns the value of the database column student.sname     *     * @return the value of student.sname     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public String getSname() {        return sname;    }    /**     * This method was generated by MyBatis Generator.     * This method sets the value of the database column student.sname     *     * @param sname the value for student.sname     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public void setSname(String sname) {        this.sname = sname == null ? null : sname.trim();    }    /**     * This method was generated by MyBatis Generator.     * This method returns the value of the database column student.gid     *     * @return the value of student.gid     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public Integer getGid() {        return gid;    }    /**     * This method was generated by MyBatis Generator.     * This method sets the value of the database column student.gid     *     * @param gid the value for student.gid     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public void setGid(Integer gid) {        this.gid = gid;    }    /**     * This method was generated by MyBatis Generator.     * This method returns the value of the database column student.sex     *     * @return the value of student.sex     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public Integer getSex() {        return sex;    }    /**     * This method was generated by MyBatis Generator.     * This method sets the value of the database column student.sex     *     * @param sex the value for student.sex     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public void setSex(Integer sex) {        this.sex = sex;    }    /**     * This method was generated by MyBatis Generator.     * This method returns the value of the database column student.age     *     * @return the value of student.age     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public Integer getAge() {        return age;    }    /**     * This method was generated by MyBatis Generator.     * This method sets the value of the database column student.age     *     * @param age the value for student.age     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public void setAge(Integer age) {        this.age = age;    }    /**     * This method was generated by MyBatis Generator.     * This method returns the value of the database column student.address     *     * @return the value of student.address     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public String getAddress() {        return address;    }    /**     * This method was generated by MyBatis Generator.     * This method sets the value of the database column student.address     *     * @param address the value for student.address     *     * @mbg.generated Fri Dec 08 19:07:43 CST 2017     */    public void setAddress(String address) {        this.address = address == null ? null : address.trim();    }}

service层

@Servicepublic class StudentServiceImpl implements StudentService {    @Autowired    StudentMapper sm;    /**     * 查询学生     */    public PageTools queryStudent(String sname,Integer page,Integer rows){        if(sname==null){            sname="";        }        //发起sql语句查询总记录数        StudentExample se=new StudentExample();        se.createCriteria().andSnameLike("%"+sname+"%");        int totalCount=(int)sm.countByExample(se);        PageTools pt=new PageTools(page, totalCount, rows);        RowBounds rb=new RowBounds( pt.getStartIndex()-1, rows);        List<Student> list=sm.selectByExampleWithRowbounds(se, rb);        pt.setRows(list);        return pt;    }    /**     * 获取总行数     */    public int queryStudentCount(StudentExample se){        int totalCount=(int)sm.countByExample(se);        return totalCount;    }    /**     *通过id删除学生     */    public void deleteStudent(Integer sid) {        sm.deleteByPrimaryKey(sid);    }    /**     * 修改学生信息     */    public void updateStudent(Student student) {        sm.updateByPrimaryKey(student);    }    /**     * 添加学生信息     */    public void saveFood(Student student) {        sm.insert(student);    }}public interface StudentService {    /**     * 查询方法     * @param sname学生姓名     * @param page 当前页     * @param rows 每页显示多少行     * @return     */    public abstract PageTools queryStudent(String sname,Integer page,Integer rows);    /**     * 通过id删除学生     * @param sid 学生id     */    public  abstract void deleteStudent(Integer sid);    /**     * 修改学生信息     * @param student 学生对象     */    public abstract void updateStudent(Student student);    /**     * 添加学生信息     * @param student 学生对象     */    public abstract void saveFood(Student student);}

分页

public class PageTools {    /**     * 构造参数     * @param curPage 页面传入的当前页     * @param totalCount 数据库查询的总条数     * @param pageCount 每页显示的条数     */    public PageTools(Integer curPage,Integer totalCount,Integer pageCount){        this.curPage=curPage;        this.pageCount=pageCount==null?this.pageCount:pageCount;        this.total=totalCount;        //上一页        this.prePage=(curPage==1?1:curPage-1);        //总页数        this.totalPage=totalCount%this.pageCount==0?totalCount/this.pageCount:totalCount/this.pageCount+1;        //下一页        this.nextPage=(curPage==totalPage)?totalPage:(curPage+1);        this.startIndex=(curPage-1)*this.pageCount+1;        this.endIndex=curPage*this.pageCount;    }    public Integer getStartIndex() {        return startIndex;    }    public void setStartIndex(Integer startIndex) {        this.startIndex = startIndex;    }    public Integer getEndIndex() {        return endIndex;    }    public void setEndIndex(Integer endIndex) {        this.endIndex = endIndex;    }    /**     * 开始位置     * curPage pageCount(每页显示的条数)    start-end     *  1           10                  1-10     *                               *                                  start=(curPage-1)*pageCount+1      *                                  end= curPage*pageCount     */    private Integer startIndex;    /**     * 结束位置     */    private Integer endIndex;    /**     * 当前页（动态由页面传递的）     */    private Integer curPage;    /**     * 每页显示的条数 （默认10条）     */    private Integer pageCount=10;    /**     * 上一页     * prePage=(curPage==1?1:curPage-1)     *      * 举例     * 第二页    上一页 1     * 3       上一页 2     */    private Integer prePage;    /**     * 下一页     *     * nextPage=(curPage==totalpage)?totalpage:(curPage+1)     * 举例     * 当前页      总页数   下一页     *      * 1      3    2     * 2      3    3     * 3      3    3     */    private Integer nextPage;    /**     * 总页数     * totalpage=(totalCount%pageCount==0?totalCount/pageCount:totalCount/pageCount+1)     * pageCount（每页显示的条数）   totalCount（总条数）  totalpage（分总页数）     * 10                       21              3     */    private Integer totalPage;    /**     * 总条数（从数据库查询）     */    private Integer total;    /**     * 存储最终取出的条数     */    private List rows;    public Integer getCurPage() {        return curPage;    }    public void setCurPage(Integer curPage) {        this.curPage = curPage;    }    public Integer getPageCount() {        return pageCount;    }    public void setPageCount(Integer pageCount) {        this.pageCount = pageCount;    }    public Integer getPrePage() {        return prePage;    }    public void setPrePage(Integer prePage) {        this.prePage = prePage;    }    public Integer getNextPage() {        return nextPage;    }    public void setNextPage(Integer nextPage) {        this.nextPage = nextPage;    }    public Integer getTotalPage() {        return totalPage;    }    public void setTotalpage(Integer totalpage) {        this.totalPage = totalpage;    }    public Integer getTotal() {        return total;    }    public void setTotal(Integer total) {        this.total = total;    }    public List getRows() {        return rows;    }    public void setRows(List rows) {        this.rows = rows;    }    public void setTotalPage(Integer totalPage) {        this.totalPage = totalPage;    }}

crud.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>crud.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="themes/icon.css">    <script type="text/javascript" src="jquery.min.js"></script>    <script type="text/javascript" src="jquery.easyui.min.js"></script>    <style type="text/css">        body{            font-size:14px;        }    </style>    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <script type="text/javascript">        function sexFormatter(value,row,index){            if(value==1){                return '女';            }else{                return '男';            }        }        //查询方法        function queryForm(){            var stuName=$("#stuId").textbox('getValue');            $('#dg').datagrid('load',{                //ajax的请求路径：queryStudent?sname=stuName                //easyui所有的方法调用有规则:                //控件对象.控件名称('方法名','方法参数')                sname:stuName            });        }        //修改方法        function  updateForm(){            //获取当前选择中的行             var selectedRow=$("#dg").datagrid("getSelected");            //获取选中行的sid            var sid=selectedRow.sid;            $('#ff').form('submit', {            url: 'updateStudent/'+sid,            success: function(msg){            msg=JSON.parse(msg);             if(msg.code==1){                     $.messager.alert('提示消息','修改成功！');                       queryForm();                       $("#w").window('close');                   }else{                      $.messager.alert('错误消息',msg.message);                   }             }        });         }        //添加方法         function saveForm(){            $('#tt').form('submit', {            url: 'saveStudent/',            success: function(msg){            msg=JSON.parse(msg);             if(msg.code==1){                     $.messager.alert('提示消息','添加成功！');                       queryForm();                       $("#t").window('close');                   }else{                      $.messager.alert('错误消息',msg.message);                   }             }        });          }         //添加重置按钮         function clearForm(){            $('#tt').form('clear');        }        //删除方法   $('#ff').form('load',selectedRow);自动选中行填充         $(function(){           //设置data-options           $("#dg").datagrid({               rownumbers:true,               toolbar:[               {                  iconCls: 'icon-add',                  text:'添加',                  onClick:function(){                       $("#t").window('open');                  }                },                {                  iconCls: 'icon-edit',                  text:'修改',                  onClick:function(){                      var selectedRow=$("#dg").datagrid("getSelected");                      if(selectedRow==null){                        $.messager.alert('提示消息','请选择一行数据');                        return;                      }                      $("#w").window('open');                      $('#ff').form('load',selectedRow);                  }                },                {                  iconCls: 'icon-remove',                  text:'删除',                  onClick:function(){                     /*   //获取当前选择中的行                      var selectedRow=$("#dg").datagrid("getSelected");                     if(selectedRow==null){                       $.messager.alert('提示消息','请选择一行数据');                       return;                     }                     //获取选中行的sid                     var sid=selectedRow.sid;                     //发起ajax到后台去删除数据                     $.ajax({                        url:'deleteStudent/'+sid,                        method:'POST',                        dataType:'json',                        data:'_method=delete',                        success:function(msg){                           if(msg.code==1){                               $.messager.alert('提示消息','删除成功！');                                 queryForm();                           }else{                              $.messager.alert('错误消息',msg.message);                           }                        }                     });*/                    //获取当前选择中的行                      var selectedRow=$("#dg").datagrid("getSelections");                     if(selectedRow==null){                       $.messager.alert('提示消息','请选择你要删除的行');                       return;                     }                       //获取学生编号的字符串形式                    var sId ="";                    for(var i=0;i<selectedRow.length;i++){                        if(sId==""){                            sId=selectedRow[i].sid;                        }else{                            sId+=','+selectedRow[i].sid;                        }                    }                    //发起ajax到后台去删除数据                    $.ajax({                        url:'deleteStudent/'+sId,                        method:'POST',                        data:'_method=delete',                        dataType:'json',                        success: function(msg){                            if(msg.code==1){                                $('#dg').datagrid('clearSelections');                                $.messager.alert('提示消息','删除成功！');                                //删除成功后再查询一遍                                queryForm();                            }else{                                //弹出异常信息                                    $.messager.alert('错误消息',msg.message);                                                                  }                        }                    });                          }                }              ]           })        })    </script>  </head>  <body>  <!--    singleSelect:true 单选 （false:多选）    collapsible:true 可折叠的按钮    formatter:(格式化器)函数    pagination:true 用于显示分页    rownumbers:true 显示行数   -->    学生姓名： <input id="stuId" class="easyui-textbox" type="text" name="stuName" data-options="required:true"></input>    <a href="javascript:void(0)" class="easyui-linkbutton" style="width:  50px" onclick="queryForm()">查询</a>    <div style="height: 4px"></div>    <table id="dg" class="easyui-datagrid" title="学生信息表" style="width:700px;height:250px"            data-options="singleSelect:true,collapsible:true,url:'queryStudent',method:'get',pagination:true,rownumbers:true">        <thead>            <tr>                <th data-options="field:'sid',width:80">学生编号</th>                <th data-options="field:'sname',width:100">学生姓名</th>                <th data-options="field:'sex',width:80,align:'right',formatter: sexFormatter">性别</th>                <th data-options="field:'age',width:80,align:'right'">年龄</th>                <th data-options="field:'address',width:250">所在地址</th>            </tr>        </thead>    </table>    <!-- 修改的窗口        closed:true 一开始隐藏     -->    <div id="w" class="easyui-window" title="修改学生信息" data-options="iconCls:'icon-edit',closed:true" style="width:330px;height:300px;padding:5px;">        <div class="easyui-layout" data-options="fit:true">            <form id="ff" method="post">            <input type="hidden" name="_method" value="put"/>            <table cellpadding="5">                <tr>                    <td>学生姓名:</td>                    <td><input class="easyui-textbox" type="text" name="sname" data-options="required:true"></input></td>                </tr>                <tr>                    <td>性别:</td>                    <td>                        <select class="easyui-combobox" name="sex" style="width:165px">                        <option value="0">男</option>                        <option value="1">女</option>                        </select>                    </td>                </tr>                <tr>                    <td>年龄:</td>                    <td><input class="easyui-textbox" type="text" name="age" data-options="required:true"></input></td>                </tr>                <tr>                    <td>所在地址:</td>                    <td><input class="easyui-textbox" name="address" data-options="multiline:true" style="height:60px"></input></td>                </tr>            </table>        </form>            <div style="text-align:center;padding:5px">                  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="updateForm()">修改</a>                  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="updateForm()">重置</a>            </div>        </div>    </div>    <!--添加的窗口        closed:true 一开始隐藏        enctype="multipart/form-data"用于文件上传     -->    <div id="t" class="easyui-window" title="添加学生信息" data-options="iconCls:'icon-edit',closed:true" style="width:330px;height:300px;padding:5px;">        <div class="easyui-layout" data-options="fit:true">            <form id="tt"  method="post" enctype="multipart/form-data"/>            <table cellpadding="5">                <tr>                    <td>学生姓名:</td>                    <td><input class="easyui-textbox" type="text" name="sname" data-options="required:true"></input></td>                </tr>                <tr>                    <td>性别:</td>                    <td>                        <select class="easyui-combobox" name="sex" style="width:165px">                        <option value="0">男</option>                        <option value="1">女</option>                        </select>                    </td>                </tr>                <tr>                    <td>年龄:</td>                    <td><input class="easyui-textbox" type="text" name="age" data-options="required:true"></input></td>                </tr>                <tr>                    <td>所在地址:</td>                    <td><input class="easyui-textbox" name="address" data-options="multiline:true" style="height:60px"></input></td>                </tr>                <tr>                    <td>学生照片:</td>                    <td><input class="easyui-filebox" name="myImage" data-options="prompt:'请选择你的图片文件'" style="width:98%"></td>                </tr>            </table>        </form>            <div style="text-align:center;padding:5px">                  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="saveForm()">添加</a>                  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>            </div>        </div>    </div>  </body></html>

spring.xml<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"     xmlns:p="http://www.springframework.org/schema/p"    xmlns:tx="http://www.springframework.org/schema/tx"     xmlns:aop="http://www.springframework.org/schema/aop"    xmlns:mvc="http://www.springframework.org/schema/mvc"     xmlns:context="http://www.springframework.org/schema/context"    xsi:schemaLocation="http://www.springframework.org/schema/beans         http://www.springframework.org/schema/beans/spring-beans.xsd        http://www.springframework.org/schema/context         http://www.springframework.org/schema/context/spring-context.xsd        http://www.springframework.org/schema/tx        http://www.springframework.org/schema/tx/spring-tx-4.2.xsd        http://www.springframework.org/schema/aop        http://www.springframework.org/schema/aop/spring-aop-4.1.xsd        http://www.springframework.org/schema/mvc        http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd    ">    <!--spring是bean的容器（service+dao处理） 扫描 -->    <context:component-scan base-package="com.et">    <!-- 排除注解 -->    <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>    </context:component-scan>    <context:property-placeholder location="classpath:/jdbc.properties" />    <!-- 所有数据库操作的源头实现子接口DataSource        DriverManagerDataSource （请求产生一个连接 用完关闭 连接要重用 这样的机制叫连接池）    -->    <!-- 数据源只是为了获取连接池-->    <bean id="dataSource"        class="com.alibaba.druid.pool.DruidDataSource">        <property name="url" value="${url}"></property>        <property name="username" value="${username1}"></property>        <property name="password" value="${password2}"></property>        <property name="driverClassName" value="${driverClass}"></property>        <!-- 默认初始化的连接个数 -->        <property name="initialSize" value="1"></property>        <!--最大允许的连接个数 -->        <property name="maxActive" value="200"></property>        <!-- 最大的等待人数 -->        <property name="maxIdle" value="100"></property>        <!-- 监控sql 开启sql统计功能 -->        <property name="filters" value="stat"></property>    </bean>    <!-- 通过spring集成mybatis  -->    <!-- 配置session工厂 -->     <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">        <!-- 注入连接的数据源 -->        <property name="dataSource" ref="dataSource"></property>    </bean>    <bean id="sessionTemplate" class="org.mybatis.spring.SqlSessionTemplate">        <!-- 构造器注入工厂 -->        <constructor-arg index="0" ref="sqlSessionFactory"></constructor-arg>    </bean>    <!-- 扫描mybatis的接口映射 (*..* 任意多层次的包两个以上的包) -->    <bean id="scannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer">        <property name="basePackage" value="com.*.dao"></property>    </bean>    <!-- 事务管理器 -->    <bean id="tm" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">        <!-- 提交连接事务 -->        <property name="dataSource" ref="dataSource"></property>    </bean>    <!-- 通知   并将事务管理器关联 -->    <tx:advice id="txAdvice" transaction-manager="tm">        <tx:attributes>            <tx:method name="save*" propagation="REQUIRED"/>            <tx:method name="delete*" propagation="REQUIRED"/>            <tx:method name="update*" propagation="REQUIRED"/>            <!-- 只读 -->            <tx:method name="*" read-only="true"/>        </tx:attributes>    </tx:advice>    <!-- 事务(*(返回值) com.*.service.*（类或接口）.*(方法)(..)任意参数) -->    <aop:config>        <!--定义切点 -->        <aop:pointcut expression="execution(* com.*.service.*.*(..))" id="myPointCut"/>        <!--关联切点和事务的管理器 -->        <aop:advisor advice-ref="txAdvice" pointcut-ref="myPointCut"/>    </aop:config></beans>

mymvc.xml<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"     xmlns:p="http://www.springframework.org/schema/p"    xmlns:tx="http://www.springframework.org/schema/tx"     xmlns:aop="http://www.springframework.org/schema/aop"    xmlns:mvc="http://www.springframework.org/schema/mvc"     xmlns:context="http://www.springframework.org/schema/context"    xsi:schemaLocation="http://www.springframework.org/schema/beans         http://www.springframework.org/schema/beans/spring-beans.xsd        http://www.springframework.org/schema/context         http://www.springframework.org/schema/context/spring-context.xsd        http://www.springframework.org/schema/tx        http://www.springframework.org/schema/tx/spring-tx-4.2.xsd        http://www.springframework.org/schema/aop        http://www.springframework.org/schema/aop/spring-aop-4.1.xsd        http://www.springframework.org/schema/mvc        http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd    ">    <!--springmvc控制层处理+视图层 扫描 -->    <context:component-scan base-package="com.et">    <!-- 排除注解 -->        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Service"/>        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Repository"/>    </context:component-scan>    <!--默认的交给spring处理 -->    <mvc:default-servlet-handler/>    <!-- 文件上传 --><bean id="multipartResolver"            class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean><context:property-placeholder location="classpath:/jdbc.properties" />    <!-- 引用返回对象 响应json -->    <mvc:annotation-driven>        <mvc:message-converters>            <!-- 配置返回字节数组解析成json的消息转换器 -->            <bean class="org.springframework.http.converter.ByteArrayHttpMessageConverter">                <property name="supportedMediaTypes">                    <list>                    <!-- 设置响应支持的类型 -->                        <value>text/html;charset="UTF-8"</value>                        <!-- 设置请求body支持的类型 -->                        <value>application/x-www-form-urlencoded</value>                    </list>                </property>            </bean>            <!-- 配置返回对象解析成json的消息转换器 -->            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">                <property name="supportedMediaTypes">                    <list>                    <!-- 设置响应支持的类型 -->                        <value>text/html;charset="UTF-8"</value>                        <!-- 设置请求body支持的类型 -->                        <value>application/x-www-form-urlencoded</value>                    </list>                </property>            </bean>        </mvc:message-converters>    </mvc:annotation-driven></beans>

web.xml<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5"     xmlns="http://java.sun.com/xml/ns/javaee"     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  <welcome-file-list>    <welcome-file>index.jsp</welcome-file>  </welcome-file-list>   <!--     ================================================        spring配置    ================================================   -->    <!-- spring配置文件位置 -->     <context-param>        <param-name>contextConfigLocation</param-name>        <param-value>classpath:spring.xml</param-value>     </context-param>       <!-- 配置监听 -->    <listener>        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>    </listener>    <!--     ================================================        springmvc配置    ================================================   -->    <filter>        <filter-name>Filter</filter-name>        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>        <init-param>            <param-name>encoding</param-name>            <param-value>UTF-8</param-value>        </init-param>        <init-param>            <param-name>forceEncoding</param-name>            <param-value>true</param-value>        </init-param>    </filter>    <filter-mapping>        <filter-name>Filter</filter-name>        <url-pattern>/*</url-pattern>    </filter-mapping>     <!-- 请求method支持put和delete必须添加过滤器 支持rest风格-->    <filter>        <filter-name>myFilter</filter-name>        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>    </filter>    <filter-mapping>        <filter-name>myFilter</filter-name>        <url-pattern>/*</url-pattern>    </filter-mapping>  <!-- springmvc的核心配置 -->    <servlet>        <servlet-name>springmvc</servlet-name>        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>        <!-- 指定springmvc的配置文件名称 -->        <init-param>            <param-name>contextConfigLocation</param-name>            <param-value>/WEB-INF/mymvc.xml</param-value>        </init-param>        <load-on-startup>1</load-on-startup>    </servlet>    <servlet-mapping>        <servlet-name>springmvc</servlet-name>        <url-pattern>/</url-pattern>    </servlet-mapping>    <!-- 启用druid的监控功能 -->    <servlet>        <servlet-name>mydruid</servlet-name>        <servlet-class>com.alibaba.druid.support.http.StatViewServlet</servlet-class>        <init-param>            <param-name>loginUsername</param-name>            <param-value>admin</param-value>        </init-param>        <init-param>            <param-name>loginPassword</param-name>            <param-value>admin</param-value>        </init-param>        <load-on-startup>1</load-on-startup>    </servlet>    <servlet-mapping>        <servlet-name>mydruid</servlet-name>        <url-pattern>/druid/*</url-pattern>    </servlet-mapping></web-app>

pom.xml<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">  <modelVersion>4.0.0</modelVersion>  <groupId>EasyUi</groupId>  <artifactId>EasyUi</artifactId>  <version>0.0.1-SNAPSHOT</version>  <packaging>war</packaging>  <name/>  <description/>  <dependencies>  <!-- springmvc的配置-->    <dependency>        <groupId>org.springframework</groupId>        <artifactId>spring-webmvc</artifactId>        <version>4.2.0.RELEASE</version>    </dependency>    <!-- 事务的配置 -->    <dependency>        <groupId>org.springframework</groupId>        <artifactId>spring-aop</artifactId>        <version>4.2.0.RELEASE</version>    </dependency>    <dependency>        <groupId>org.springframework</groupId>        <artifactId>spring-tx</artifactId>        <version>4.2.0.RELEASE</version>    </dependency>    <dependency>        <groupId>org.springframework</groupId>        <artifactId>spring-jdbc</artifactId>        <version>4.2.0.RELEASE</version>    </dependency>    <!-- 事务的配置 -->        <dependency>            <groupId>aopalliance</groupId>            <artifactId>aopalliance</artifactId>            <version>1.0</version>        </dependency>        <dependency>            <groupId>org.aspectj</groupId>            <artifactId>aspectjweaver</artifactId>            <version>1.8.12</version>        </dependency>    <!-- (druid)连接池的配置 -->    <dependency>      <groupId>com.alibaba</groupId>      <artifactId>druid</artifactId>      <version>1.1.5</version>    </dependency>    <!-- 文件上传 -->    <dependency>        <groupId>commons-fileupload</groupId>        <artifactId>commons-fileupload</artifactId>        <version>1.3.3</version>    </dependency>    <!-- mybatis集成spring -->    <dependency>      <groupId>org.mybatis</groupId>      <artifactId>mybatis-spring</artifactId>      <version>1.2.3</version>    </dependency>      <!-- 配置mybatis -->    <dependency>      <groupId>org.mybatis</groupId>      <artifactId>mybatis</artifactId>      <version>3.2.8</version>    </dependency>        <!-- 添加jacson的json解析库  -->    <dependency>      <groupId>com.fasterxml.jackson.core</groupId>      <artifactId>jackson-core</artifactId>      <version>2.6.0</version>    </dependency>    <!-- log4j日志配置 -->    <dependency>      <groupId>org.slf4j</groupId>      <artifactId>slf4j-log4j12</artifactId>      <version>1.7.5</version>    </dependency>    <dependency>      <groupId>org.codehaus.jackson</groupId>      <artifactId>jackson-core-asl</artifactId>      <version>1.9.12</version>    </dependency>    <dependency>      <groupId>com.fasterxml.jackson.core</groupId>      <artifactId>jackson-annotations</artifactId>      <version>2.6.0</version>    </dependency>    <dependency>      <groupId>com.fasterxml.jackson.core</groupId>      <artifactId>jackson-databind</artifactId>      <version>2.6.0</version>    </dependency>    <dependency>      <groupId>org.codehaus.jackson</groupId>      <artifactId>jackson-mapper-asl</artifactId>      <version>1.9.12</version>    </dependency>    <!-- mysql的配置 -->    <dependency>        <groupId>mysql</groupId>        <artifactId>mysql-connector-java</artifactId>        <version>5.1.26</version>    </dependency>    <dependency>      <groupId>org.apache.openejb</groupId>      <artifactId>javaee-api</artifactId>      <version>5.0-1</version>      <scope>provided</scope>    </dependency>    <dependency>      <groupId>javax.faces</groupId>      <artifactId>jsf-api</artifactId>      <version>1.2_04</version>      <scope>provided</scope>    </dependency>    <dependency>      <groupId>javax.servlet</groupId>      <artifactId>jstl</artifactId>      <version>1.2</version>      <scope>provided</scope>    </dependency>    <dependency>      <groupId>javax.servlet.jsp</groupId>      <artifactId>jsp-api</artifactId>      <version>2.1</version>      <scope>provided</scope>    </dependency>    <dependency>      <groupId>javax.faces</groupId>      <artifactId>jsf-impl</artifactId>      <version>1.2_04</version>      <scope>provided</scope>    </dependency>  </dependencies></project>

布局Layout

布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。

创建布局（Layout）

1、通过标记创建布局（Layout）。

添加 'easyui-layout' class 到 <div> 标记。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">    <!-- 北（导航栏只能设置高度） 一般不会设置宽度-->    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div></div>

后台一般不需要南和东

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>布局Layout</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">     <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="themes/icon.css">    <script type="text/javascript" src="jquery.min.js"></script>    <script type="text/javascript" src="jquery.easyui.min.js"></script>    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <script type="text/javascript">        function urlClick(){            //判断title= '学生管理' tab页是否存在            var ifExist=$('#myTable').tabs("exists","学生管理");            //判断不存在的时候添加选项卡            if(!ifExist){                // 添加一个选项卡面板  closable:true可关闭的   scrolling="no"去除滚动条                $('#myTable').tabs('add',{                    title: '学生管理',                    closable:true,                    selected:true,                    content:'<iframe frameborder=0 width=100% height=100% src="crud.html" scrolling="no"></iframe>'                });            }            // 选择一个选项卡面板            $('#myTable').tabs("select","学生管理");        }    </script>  </head>  <body>    <div style="margin:1px ;padding:1px"></div>    <div class="easyui-layout" style="width:100%;height:100%">    <!-- 北（导航栏只能设置高度） 一般不会设置宽度-->        <div data-options="region:'north'" style="height:10%;background:url(top.png)no-repeat; background-size:100%;">            <div style="height: 80%"></div>            <div style="text-align: right;width: 95%"><a href="#" style="text-decoration: none;">安全退出</a></div>        </div>        <div data-options="region:'west',split:true" title="导航菜单" style="width:17%;">            <div class="easyui-accordion" style="width:500px;height:400px;">                <div title="权限管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">                    <a href="#"  style="text-decoration: none;"><img src="themes/icons/man.png"/>用户管理</a><br/>                    <a href="javascript:urlClick()" style="text-decoration: none;"><img src="themes/icons/man.png" style="margin-top: 10px;">学生管理</a></font>                </div>                <div title="系统设置" data-options="iconCls:'icon-setup'" style="padding:10px;">                </div>            </div>        </div>        <div data-options="region:'center',iconCls:'icon-ok'">        <!-- 添加选项卡的空件 -->            <div id="myTable" class="easyui-tabs" style="width:100%;height:100%">                <!-- 添加选项卡                    data-options="closable:true" 可关闭的标签页                 -->                <div title="欢迎使用" style="padding:10px">                    <img src="h.jpg" style="width:100%;height:100%">                </div>            </div>        </div>    </div>  </body></html>

2、在整个页面上创建布局（Layout）

<body class="easyui-layout">    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div></body>

3、创建嵌套布局。
请注意，内部布局的西区面板是折叠的。

<body class="easyui-layout">    <div data-options="region:'north'" style="height:100px"></div>    <div data-options="region:'center'">        <div class="easyui-layout" data-options="fit:true">            <div data-options="region:'west',collapsed:true" style="width:180px"></div>            <div data-options="region:'center'"></div>        </div>    </div></body>

EasyUI Tree 树

@Controllerpublic class DeptController {    @Autowired    DeptService service;    /**     * 查询的方法     */    @ResponseBody    @RequestMapping("/queryDept")    public List<TreeNode> queryDept(Integer id){        if(id==null){            id=0;        }        return service.queryDept(id);    }}@Controllerpublic class EmpController {    @Autowired    EmpService  service;    /**     * 查询的方法     */    @ResponseBody    @RequestMapping("/queryEmp")    public PageTools queryEmp(Integer id,String ename,Integer page,Integer rows){        return service.queryEmp(id,ename, page, rows);    }    /**     * 修改员工信息     */    @ResponseBody    @RequestMapping(value="/updateEmp/{id}",method=RequestMethod.PUT)    public Result updateEmp(@PathVariable Integer id,Emp emp,Integer page,Integer rows){        emp.setId(id);        Result rt=new Result();        rt.setCode(1);        try {            service.updateEmp(emp);        } catch (Exception e) {            rt.setCode(0);            rt.setMessage(e);        }        return rt;    }    /**     *添加员工信息     */    @ResponseBody    @RequestMapping(value="/saveEmp",method=RequestMethod.POST)    public Result saveEmp(Emp emp){        Result rt=new Result();        rt.setCode(1);        try {               service.saveEmp(emp);        } catch (Exception e) {            rt.setCode(0);            rt.setMessage(e);        }        return rt;    }    /**     * 删除学生     */    @ResponseBody    @RequestMapping(value="/deleteEmp/{id}",method=RequestMethod.DELETE)    public Result deleteEmp(@PathVariable String id,Integer page,Integer rows){    //删除一行        Result rt=new Result();        rt.setCode(1);        try {            //检测异常            //String str=null;            //str.toString();            service.deleteEmp(Integer.parseInt(id));        } catch (Exception e) {            rt.setCode(0);            rt.setMessage(e);        }        return rt;    }}

@Servicepublic class DeptServiceImpl implements DeptService {    @Autowired    DeptMapper dm;    /**     * 查询部门表     */    public List<TreeNode> queryDept(Integer pid){        //发起sql语句查询总记录数        DeptExample se=new DeptExample();        se.createCriteria().andPidEqualTo(pid);        List<Dept> list=dm.selectByExample(se);        List<TreeNode> deptList=new ArrayList<TreeNode>();        for (Dept d : list) {            TreeNode tn=new TreeNode();            tn.setId(d.getId());            tn.setText(d.getDname());            //判断当前节点下是否存在子节点            if(queryDept(d.getId()).size()==0){                tn.setState("open");            }            deptList.add(tn);        }        return deptList;    }public interface DeptService {    /**     * 查询方法     */    public List<TreeNode> queryDept(Integer pid);}

public interface EmpService {    /**     * 查询方法     */    public abstract PageTools queryEmp(Integer id,String ename,Integer page,Integer rows);    /**     * 修改员工信息     */    public abstract void updateEmp(Emp emp);    /**     * 添加员工信息     */    public abstract void saveEmp(Emp emp);    /**     * 通过id删除员工     */    public  abstract void deleteEmp(Integer id);}@Servicepublic class EmpServiceImpl implements EmpService {    @Autowired    EmpMapper em;    public PageTools queryEmp(Integer id,String ename,Integer page,Integer rows){        if(ename==null){            ename="";        }        //发起sql语句查询总记录数        EmpExample se=new EmpExample();        Criteria criteria = se.createCriteria();        criteria.andEnameLike("%"+ename+"%");        if(id!=null){            criteria.andDeptidEqualTo(id);        }        int totalCount=(int)em.countByExample(se);        PageTools pt=new PageTools(page, totalCount, rows);        RowBounds rb=new RowBounds( pt.getStartIndex()-1, rows);        List<Emp> list=em.selectByExampleWithRowbounds(se, rb);        pt.setRows(list);        return pt;    }    /**     * 获取总行数     */    public int queryEmpCount(EmpExample se){        int totalCount=(int)em.countByExample(se);        return totalCount;    }    /**     * 修改员工信息     */    public void updateEmp(Emp emp) {        em.updateByPrimaryKey(emp);    }    /**     * 添加员工信息     */    public void saveEmp(Emp emp) {        em.insert(emp);    }    /**     * 通过id删除员工     */    public void deleteEmp(Integer id) {        em.deleteByPrimaryKey(id);      }   }

省略entity dao层

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Basic Tree - jQuery EasyUI Demo</title>    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="../themes/icon.css">    <script type="text/javascript" src="../jquery.min.js"></script>    <script type="text/javascript" src="../jquery.easyui.min.js"></script>    <script type="text/javascript">        //查询方法        $(function(){            $("#tt").tree({                onSelect:function(node){                    //获取部门id                    var id=node.id;                    $("#dg").datagrid("load",{                        id:id                    });                }            });        });        //查询方法        function queryForm(){            var eName=$("#eId").textbox('getValue');            $('#dg').datagrid('load',{                //easyui所有的方法调用有规则:                //控件对象.控件名称('方法名','方法参数')                ename:eName            });        }        //修改方法        function  updateForm(){            //获取当前选择中的行             var selectedRow=$("#dg").datagrid("getSelected");            //获取选中行的sid            var id=selectedRow.id;            $('#ff').form('submit', {            url: '../updateEmp/'+id,            success: function(msg){            msg=JSON.parse(msg);             if(msg.code==1){                     $.messager.alert('提示消息','修改成功！');                       queryForm();                       $("#w").window('close');                   }else{                      $.messager.alert('错误消息',msg.message);                   }             }        });         }        //添加方法         function saveForm(){                $('#add').form('submit', {                url: '../saveEmp/',                success: function(msg){                 msg=JSON.parse(msg);                 if(msg.code==1){                         $.messager.alert('提示消息','添加成功！');                           queryForm();                           $("#t").window('close');                       }else{                          $.messager.alert('错误消息',msg.message);                       }                 }            });          }         //添加重置按钮         function clearForm(){            $('#add').form('clear');        }        //删除方法   $('#ff').form('load',selectedRow);自动选中行填充         $(function(){           //设置data-options           $("#dg").datagrid({               rownumbers:true,               toolbar:[               {                  iconCls: 'icon-add',                  text:'添加',                  onClick:function(){                       $("#t").window('open');                  }                },                {                  iconCls: 'icon-edit',                  text:'修改',                  onClick:function(){                      var selectedRow=$("#dg").datagrid("getSelected");                      if(selectedRow==null){                        $.messager.alert('提示消息','请选择一行数据');                        return;                      }                      $("#w").window('open');                      $('#ff').form('load',selectedRow);                  }                },                {                  iconCls: 'icon-remove',                  text:'删除',                  onClick:function(){                     //获取当前选择中的行                      var selectedRow=$("#dg").datagrid("getSelected");                     if(selectedRow==null){                       $.messager.alert('提示消息','请选择一行数据');                       return;                     }                     //获取选中行的sid                     var id=selectedRow.id;                     //发起ajax到后台去删除数据                     $.ajax({                        url:'../deleteEmp/'+id,                        method:'POST',                        dataType:'json',                        data:'_method=delete',                        success:function(msg){                           if(msg.code==1){                               $.messager.alert('提示消息','删除成功！');                                 queryForm();                           }else{                              $.messager.alert('错误消息',msg.message);                           }                        }                     });                  }                }              ]           })        })    </script></head><body> <!-- 不能设置100%是设置该属性data-options="fit:true" -->  <div class="easyui-layout" style="width:100%;height:100%" data-options="fit:true">        <div data-options="region:'west',split:true" title="部门管理" style="width:15%">            <!-- tree树 -->            <ul id="tt" class="easyui-tree" data-options="url:'../queryDept'"> </ul>         </div>            <div data-options="region:'center',title:'员工管理'" stytle="padding:1px;margin:1px">                员工姓名： <input id="eId" class="easyui-textbox" type="text" name="ename" data-options="required:true"></input>                <a href="javascript:void(0)" class="easyui-linkbutton" style="width:  50px" onclick="queryForm()">查询</a>                <table id="dg" class="easyui-datagrid" title="员工信息表" style="width:700px;height:400px"                data-options="singleSelect:false,collapsible:true,url:'../queryEmp',method:'get',pagination:true,rownumbers:true">                <thead>                    <tr>                        <th data-options="field:'id',width:80">员工编号</th>                        <th data-options="field:'ename',width:100">员工姓名</th>                        <th data-options="field:'sal',width:100">员工薪水</th>                        <th data-options="field:'deptid',width:100">部门编号</th>                    </tr>                </thead>            </table>            <!-- 修改的窗口            closed:true 一开始隐藏         -->            <div id="w" class="easyui-window" title="修改员工信息" data-options="iconCls:'icon-edit',closed:true" style="width:300px;height:220px;padding:5px;">                <div class="easyui-layout" data-options="fit:true">                    <form id="ff" method="post">                    <input type="hidden" name="_method" value="put"/>                    <table cellpadding="5">                        <tr>                            <td>员工姓名:</td>                            <td><input class="easyui-textbox" type="text" name="ename" data-options="required:true"></input></td>                        </tr>                        <tr>                            <td>薪水:</td>                            <td><input class="easyui-textbox" type="text" name="sal" data-options="required:true"></input></td>                        </tr>                    </table>                </form>                    <div style="text-align:center;padding:5px">                          <a href="javascript:void(0)" class="easyui-linkbutton" onclick="updateForm()">修改</a>                          <a href="javascript:void(0)" class="easyui-linkbutton" onclick="updateForm()">重置</a>                    </div>                </div>            </div>        <!--添加的窗口        closed:true 一开始隐藏        enctype="multipart/form-data"用于文件上传        editable:false 日期文本设置为只读        invalidMessage:验证失败会覆盖自定义验证消息        missingMessage:验证消息         -->        <div id="t" class="easyui-window" title="添加员工信息" data-options="iconCls:'icon-edit',closed:true" style="width:300px;height:200px;padding:5px;">            <div class="easyui-layout" data-options="fit:true">            <form id="add"  method="post"/>            <table cellpadding="5">                <tr>                    <td>员工姓名:</td>                    <td><input class="easyui-textbox" type="text" name="ename" data-options="required:true"></input></td>                </tr>                <tr>                    <td>薪水:</td>                    <td><input class="easyui-textbox" type="text" name="sal" data-options="required:true"></input></td>                </tr>                <tr>                    <td>部门编号:</td>                    <td><input class="easyui-textbox" type="text" name="deptid" data-options="required:true"></input></td>                </tr>            </table>        </form>            <div style="text-align:center;padding:5px">                  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="saveForm()">添加</a>                  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>            </div>        </div>    </div></body></html>