评论

收藏

[jQuery] jquery-easyUI第二篇【综合案例】

开发技术 开发技术 发布于:2021-07-13 20:40 | 阅读数:349 | 评论:0

  基于easyUI开发的一个综合案例模版
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title>练习</title>
  <!-- 引入css文件,不限顺序 -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/default/easyui.css" type="text/css"></link>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/icon.css" type="text/css"></link>
  <!-- 引入js文件,有顺序限制 -->
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
  </head>
  <body>
    <!-- Layout布局 -->
    <div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">
      <!-- 北 -->
      <div data-options="region:'north',border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;">
        <center><font style="font-size:66px">jQuery-EasyUI组件</font></center>      
      </div>   
      <!-- 南 -->
      <div data-options="region:'south'" style="height:100px;">
        <center><font style="font-size:33px">XX公司版权所有</font></center>       
      </div>   
      <!-- 东 -->
      <div data-options="region:'east',iconCls:'icon-reload'" style="width:100px;"></div>   
      <!-- 西 -->
      <div data-options="region:'west'" style="width:200px;">
        <!-- Accordion分类 -->
        <div 
          id="accordionID" 
          class="easyui-accordion" 
          data-options="fit:true,border:false,selected:-1" 
          style="width:300px;height:400px;">   
          <div title="部门管理" data-options="iconCls:'icon-save'" style="padding:10px;">   
            <!-- Linkbutton按钮 -->
            <a 
              id="btn_add" 
              href="#" 
              class="easyui-linkbutton" 
              data-options="iconCls:'icon-add'">增加部门</a><p> 
            <a 
              id="btn_find" 
              href="#" 
              class="easyui-linkbutton" 
              data-options="iconCls:'icon-search'">查询部门</a><p> 
            <a 
              id="btn_update" 
              href="#" 
              class="easyui-linkbutton" 
              data-options="iconCls:'icon-edit'">修改部门</a><p> 
            <a 
              id="btn_delete" 
              href="#" 
              class="easyui-linkbutton" 
              data-options="iconCls:'icon-remove'">删除部门</a><p>  
          </div>   
          <div title="人事管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
            <!-- tree树 -->        
            <ul id="treeID" class="easyui-tree" data-options="lines:true">   
               <li>
                <span>增加人事</span>
               </li>
               <li>
                <span>查询人事</span>
                <ul>
                  <li>
                    <span>分页查询人事</span>
                    <ul>
                      <li>
                        <span>模糊分页查询人事</span>
                      </li>
                      <li>
                        <span>精确分页查询人事</span>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <span>查询所有人事</span>
                  </li>
                </ul>
               </li>
            </ul>
          </div>   
          <div title="客户管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
            客户管理  
          </div> 
          <div title="权限管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
            权限管理  
          </div>
          <div title="报表管理" data-options="iconCls:'icon-print'" style="padding:10px;">   
            报表管理  
          </div> 
          <div title="帮助" data-options="iconCls:'icon-help'" style="padding:10px;">   
            帮助  
          </div>  
        </div>
      </div>   
      <!-- 中 -->
      <div data-options="region:'center'" style="padding:5px;background:#eee;">
        <!-- Tabs选项卡 -->
        <div 
          id="tabsID" 
          class="easyui-tabs" 
          style="width:500px;height:250px;"
          data-options="plain:true,border:false,selected:-1,fit:true">   
        </div>
      </div>   
    </div>
    <script type="text/javascript">
      //定位4个按钮
      $("a").click(function(){
        //获取你所单击的按钮的标题
        var title = $(this).text();
        //去空格
        title = $.trim(title);
        //如果title变量是"增加部门"
        if("增加部门" == title){
          //查看该选项卡是否已经打开
          var flag = $("#tabsID").tabs("exists",title);
          //如果未打开
          if(!flag){
            //打开选项卡
            $("#tabsID").tabs("add",{
              "title" : title,
              "closable" : true,
              "content" : "文本",
              "iconCls" : "icon-add"
            });
          }
        }else if("查询部门" == title){
          var flag = $("#tabsID").tabs("exists",title);
          if(!flag){
            //打开选项卡
            $("#tabsID").tabs("add",{
              "title" : title,
              "closable" : true,
              "content" : "文本",
              "iconCls" : "icon-search"
            });
          }
        }
      });
    </script>
    <script type="text/javascript">
      $(function(){
        //收起所有的选项
        $("#treeID").tree("collapseAll");
      });
    </script>
    <script type="text/javascript">
      $("#treeID").tree({
        onClick : function(node){
          //获取点击树节点的文本
          var title = node.text;
          //去空格
          title = $.trim(title);
          //产生tab选项卡
          var flag = $("#tabsID").tabs("exists",title);
          //如果没有打开的话
          if(!flag){
            //打开选项卡
            $("#tabsID").tabs("add",{
              "title" : title,
              "closable" : true,
              "href" : "${pageContext.request.contextPath}/empList.jsp",
              "iconCls" : "icon-search"
            });
          }   
        }
      });
    </script>
  </body>
</html>

效果:
DSC0000.png

DSC0001.png

分页  相信我们的分页已经做得不少了,这次我们使用easyUI+Oracle+jdbc来做一个分页…【之前大都都用Mysql,这次用Oracle】
  DateGrid会异步以POST方式向服务器传入二个参数:page和rows二个参数,服务端需要哪个,就接收哪个参数

  • page:需要显示的页号
  • rows:需要获取多少条记录

编写emp实体
package zhongfucheng.entity;
import java.io.Serializable;
import java.util.Date;
/**
 * Created by ozc on 2017/7/17.
 */
public class Emp implements Serializable {
  private Integer empno;
  private String ename;
  private String job;
  private Integer mgr;
  private Date hiredate;
  private Integer sal;
  private Integer comm;
  private Integer deptno;
  public Emp() {
  }
  public Emp(Integer empno, String ename, String job, Integer mgr, Date hiredate, Integer sal, Integer comm, Integer deptno) {
    this.empno = empno;
    this.ename = ename;
    this.job = job;
    this.mgr = mgr;
    this.hiredate = hiredate;
    this.sal = sal;
    this.comm = comm;
    this.deptno = deptno;
  }
  public Integer getEmpno() {
    return empno;
  }
  public void setEmpno(Integer empno) {
    this.empno = empno;
  }
  public String getEname() {
    return ename;
  }
  public void setEname(String ename) {
    this.ename = ename;
  }
  public String getJob() {
    return job;
  }
  public void setJob(String job) {
    this.job = job;
  }
  public Integer getMgr() {
    return mgr;
  }
  public void setMgr(Integer mgr) {
    this.mgr = mgr;
  }
  public Date getHiredate() {
    return hiredate;
  }
  public void setHiredate(Date hiredate) {
    this.hiredate = hiredate;
  }
  public Integer getSal() {
    return sal;
  }
  public void setSal(Integer sal) {
    this.sal = sal;
  }
  public Integer getComm() {
    return comm;
  }
  public void setComm(Integer comm) {
    this.comm = comm;
  }
  public Integer getDeptno() {
    return deptno;
  }
  public void setDeptno(Integer deptno) {
    this.deptno = deptno;
  }
}

编写EmpDao
  使用Oracle的语法来实现分页…!
public class EmpDao {
  public  int getPageRecord() throws SQLException {
    QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
    String sql = "SELECT COUNT(EMPNO) FROM EMP";
    String count = queryRunner.query(sql, new ScalarHandler()).toString();
    return Integer.parseInt(count);
  }
  public  List<Emp> getList(int start, int end) throws SQLException {
    QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
    String sql = "SELECT *FROM (SELECT rownum rownumid,emp.* FROM emp WHERE rownum <= ?) xx WHERE xx.rownumid> ?";
    List<Emp> list = (List<Emp>) queryRunner.query(sql, new Object[]{end, start}, new BeanListHandler(Emp.class));
    return list;
  }
}

编写EmpService
  得到对应的分页数据,封装到分页对象中!
public class EmpService {

  private EmpDao empDao = new EmpDao();
  public Page getPageResult(int currentPage) throws Exception {
    Page page = new Page(currentPage, empDao.getPageRecord());
    List<Emp> empList = empDao.getList(page.getStartIndex(), page.getLinesize() * currentPage);
    page.setList(empList);
    return page;
  }
}

处理请求的Servlet
  接收page参数,如果为空,就设置为1
  把得到的分页数据封装成datagrid要的格式,返回给浏览器!
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
    try {
      //调用service
      EmpService empService = new EmpService();
      //设置编号方式
      request.setCharacterEncoding("UTF-8");
    /*获取客户端传递进来的参数,easyUI使用的是page参数*/
      String pageStart = request.getParameter("page");
      if (pageStart == null || pageStart.length() == 0) {
        pageStart = "1";
      }
      int currentPage = Integer.parseInt(pageStart);
      Page pageResult = empService.getPageResult(currentPage);
      Map map = new HashMap();
      map.put("total", pageResult.getTotalRecord());
      map.put("rows", pageResult.getList());

      //使用第三方工具将map转成json文本
      JSONArray jsonArray = JSONArray.fromObject(map);
      String jsonJAVA = jsonArray.toString();
      //去掉二边的空格
      jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1);
      System.out.println("jsonJAVA=" + jsonJAVA);
      //以字符流的方式,将json字符串输出到客户端
      response.setContentType("text/html;charset=UTF-8");
      PrintWriter pw = response.getWriter();
      pw.write(jsonJAVA);
      pw.flush();
      pw.close();
    } catch (Exception e) {
      e.printStackTrace();
    }
  }

JSP页面显示
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
  <title>dataGrid+分页</title>
  <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
  <script type="text/javascript" src="easyui/jquery.min.js"></script>
  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
  </head>
  <body>
  <table id="dg" style="width: 800px" ></table>
  <script>
  $('#dg').datagrid({
    url:'${pageContext.request.contextPath}/getPageServlet?time'+ new Date().getTime(),
    columns:[[
    /*这里的field要对应JavaBean的属性名称,否则获取不到数据*/
    {field:'empno',title:'编号',width:100},
    {field:'ename',title:'姓名',width:100},
    {field:'job',title:'工作',width:100},
    {field:'mgr',title:'上编',width:100},
    {field:'hiredate',title:'入时',width:100},
    {field:'sal',title:'月薪',width:100},
    {field:'comm',title:'佣金',width:100},
    {field:'deptno',title:'部编',width:100}
    ]],
    fitColumns : true,
    singleSelect : true,
    pagination : true,
    /*pageSize对应rows,pageNum对应page,datagrid会自动把这两个值传递进去*/
    pageNumber : 1,
    pageSize : 3,
    pageList : [3],
    fit:true
  });
  </script>
  </body>
</html>

效果:
DSC0002.png

  <script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>

  
关注下面的标签,发现更多相似文章