hooyantsing's Blog

第75次课程_EASYUI_2

字数统计: 2.2k阅读时长: 12 min
2019/11/02

源辰76班

第75次课程

2019.11.02

内容

EASYUI_2[廖彦]

1.编辑、新增功能实现

product.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<%@ page language="java"  contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8">
<title>商品管理</title>
    <!-- 相对路径 -->
    <link rel="stylesheet" type="text/css"  href="../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"  href="../js/easyui/themes/icon.css">
    <!-- 绝对路径 -->
    <script type="text/javascript"  src="/191026_Servlet/js/easyui/jquery.min.js"></script>
    <script type="text/javascript"  src="/191026_Servlet/js/easyui/jquery.easyui.min.js"></script>
    <!-- 国际化js文件 -->
    <!-- 改进绝对路径:工程名可以任意变化 -->
    <script type="text/javascript"  src="<%=application.getContextPath()  %>/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
function edit(){
    // 获取表格当前选中的行  row 就是  Product  实体对象   ===》 json 对象
    var row =  $("#dg").datagrid("getSelected");
    if(row == null){
       $.messager.alert('系统提示','请选择要编辑的服装','error');
       return;
    }
    $('#dlg').dialog('open');
    // 将改行数据填写到表单控件中
    $("#editForm").form('load',row);
}
function add(){
    // 获取表格当前选中的行  row 就是  Product  实体对象   ===》 json 对象
    $('#dlg').dialog('open');
    // 将改行数据填写到表单控件中
    $("#editForm").form('clear');
    // 补丁
    $("#op").val("save");
}
function save(){
    $('#editForm').form('submit', {
       //  get 请求会删除 url 地址里面的请求参数
       url: "../product.s",
       success: function(json){
           eval("var result = " + json);
           if(result.code == 1){
               // 冒泡提示信息
               $.messager.show({
                  title:'系统提示',
                  msg:result.msg,
                  timeout:3000,
                  showType:'slide'
               });
               $('#dlg').dialog('close');
               // 表格重新加载数据(查询)
               $("#dg").datagrid("reload");
           } else {
               $.messager.alert('系统提示',result.msg,'error');
           }
       }
    });
    
}
function selectCsid(category){
    $('#csid').combobox('reload','../categorysecond.s?op=queryByCid&cid=' + category.cid );
}
</script>
</head>
<body>
<table id="dg" class="easyui-datagrid"  title="DataGrid Complex Toolbar"
       data-options="
           fit:true,
           rownumbers:true,
           singleSelect:true,
           url:'../product.s?op=query',
           method:'get',
           toolbar:'#tb'">
    <thead>
       <tr>
           <th  data-options="field:'pid',width:80">ID</th>
           <th  data-options="field:'pname',width:100">名称</th>
           <th  data-options="field:'shop_price',width:100">商场价</th>
           <th  data-options="field:'image',width:100">图片</th>
           <th  data-options="field:'pdate',width:100">日期</th>
           <th  data-options="field:'is_hot',width:100">热卖标志</th>
       </tr>
    </thead>
</table>
<div id="tb"  style="padding:5px;height:auto">
    <div style="margin-bottom:5px">
       <a href="#"  class="easyui-linkbutton" iconCls="icon-add"  plain="true"></a>
       <a href="#"  class="easyui-linkbutton"  iconCls="icon-edit" plain="true"></a>
       <a href="#"  class="easyui-linkbutton"  iconCls="icon-save" plain="true"></a>
       <a href="#"  class="easyui-linkbutton" iconCls="icon-cut"  plain="true"></a>
       <a href="#"  class="easyui-linkbutton"  iconCls="icon-remove" plain="true"></a>
    </div>
    <div>
       Date From: <input  class="easyui-datebox" style="width:80px">
       To: <input class="easyui-datebox"  style="width:80px">
       Language:
       <select class="easyui-combobox"  panelHeight="auto" style="width:100px">
           <option  value="java">Java</option>
           <option value="c">C</option>
           <option  value="basic">Basic</option>
           <option  value="perl">Perl</option>
           <option  value="python">Python</option>
       </select>
       <a href="#"  class="easyui-linkbutton"  iconCls="icon-search">Search</a>
       <a href="javascript:void(0)"  class="easyui-linkbutton"  onclick="edit()">编辑</a>
       <a href="javascript:void(0)"  class="easyui-linkbutton" onclick="add()">新增</a>
    </div>
</div>
<!-- 对话框:商品信息编辑 -->
<div id="dlg" class="easyui-dialog"  title="Basic Dialog"
    data-options="
       iconCls:'icon-save',
       closed:true,
       buttons: [{
                  text:'保存',
                  iconCls:'icon-ok',
                  handler:function(){
                      save();
                  }
               },{
                  text:'放弃',
                  iconCls:'icon-cancel',
                  handler:function(){
                      $('#dlg').dialog('close');
                  }
               }]
       "
    style="width:400px;height:400px;padding:10px">
    <form action="????" id="editForm">
    <input id="op" name="op" value="save"  type="hidden">
    <input class="easyui-textbox" name="pid"  style="width:300px"
       data-options="label:'商品ID:'">
    <input class="easyui-textbox"  name="pname" style="width:300px"
       data-options="label:'名称:'">
    <input class="easyui-textbox"  name="shop_price" style="width:300px"  type="number"
       data-options="label:'商城价:'">
    <input class="easyui-radiobutton"  name="is_hot" value="1" label="热卖:">
    <input class="easyui-radiobutton"  name="is_hot" value="0" label="非热卖:">

    <!-- 下拉框 -->
    <!--
       data-options
       label:'显示在框前字符串',
       url:'从远程加载列表数据的 URL',
       valueField:'绑定到该组合框(ComboBox)的 value 上的基础数据的名称',
       onSelect:'当用户选择一个列表项时触发'
     -->
    <input class="easyui-combobox"  name="cid" style="width:300px"
       data-options="label:'主类别:',
           url:'../category.s?op=queryAll',
           textField:'cname',
           valueField:'cid',
           onSelect:selectCsid">
    <input id="csid" class="easyui-combobox"  name="csid" style="width:300px"
       data-options="label:'子类别:',
           url:'../categorysecond.s?op=queryByCid',
           textField:'csname',
           valueField:'csid'
       ">
       
    <input class="easyui-textbox"  name="pdesc" style="width:300px" type="number"
       data-options="label:'描述:',multiline:true">
    </form>
</div>
<!--
    11.01 作业:实现商品的增删改查操作
    1、实现商品信息的修改,保存至数据库
    2、实现商品信息的新增,添加至数据库
    3、实现商品删除
    4、请使用 ajax 方式进行以上操作
    5、成功完成之后,请刷新表格(重新查询,请查api)
-->
</body>
</html>

Category.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package com.yc.damai.bean;
public class Category {
    private Integer cid;
    private String cname;
    public Integer getCid() {
       return cid;
    }
    public void setCid(Integer cid) {
       this.cid = cid;
    }
    public String getCname() {
       return cname;
    }
    public void setCname(String cname) {
       this.cname = cname;
    }
}

Categorysecond.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.yc.damai.bean;
public class Categorysecond {
    private Integer cid;
    private Integer csid;
    private String csname;
    public Integer getCid() {
       return cid;
    }
    public void setCid(Integer cid) {
       this.cid = cid;
    }
    public Integer getCsid() {
       return csid;
    }
    public void setCsid(Integer csid) {
       this.csid = csid;
    }
    public String getCsname() {
       return csname;
    }
    public void setCsname(String csname) {
       this.csname = csname;
    }
}

CategoryBiz.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.yc.damai.biz;

import java.util.List;

import com.yc.damai.bean.Category;
import com.yc.damai.dao.CategoryDao;

public class CategoryBiz {

    private CategoryDao dao = new CategoryDao();

    public List<Category> queryAll(){
        return dao.selectAll();
    }

}

CategorysecondBiz.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.yc.damai.biz;

import java.util.List;

import com.yc.damai.bean.Categorysecond;
import com.yc.damai.dao.CategorysecondDao;

public class CategorysecondBiz {

    private CategorysecondDao dao = new CategorysecondDao();

    public List<Categorysecond> queryByCid(String cid){
        return dao.selectByCid(cid);
    }

}

CategoryDao.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package com.yc.damai.dao;

import java.util.List;
import java.util.Map;
import com.yc.damai.bean.Category;
import com.yc.damai.util.DBHelper;

public class CategoryDao {

    public List<Category> selectAll() {

        String sql = "select * from category";
        List<Map<String,Object>> list = DBHelper.selectList(sql);
        return DBHelper.populate(list, Category.class);
    }

}

CategorysecondDao.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package com.yc.damai.dao;

import java.util.List;
import java.util.Map;
import com.yc.damai.bean.Categorysecond;
import com.yc.damai.util.DBHelper;

public class CategorysecondDao {

    public List<Categorysecond> selectByCid(String cid) {

        String sql = "select * from categorysecond where cid = ?";
        List<Map<String,Object>> list = DBHelper.selectList(sql,cid);
        return DBHelper.populate(list, Categorysecond.class);
    }

}

CategoryServlet.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package com.yc.damai.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.yc.damai.biz.CategoryBiz;

@WebServlet("/category.s")
public class CategoryServlet extends BaseServlet {
    private static final long serialVersionUID = 1L;

    private CategoryBiz biz = new CategoryBiz();

    // 查询  127.0.0.1/demo-damai-76/orders.s?op=olist
    public void queryAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Gson gson = new Gson();
        String json = gson.toJson(biz.queryAll());
        // 返回json格式数据
        response.setContentType("application/json;charset=UTF-8");
        response.getWriter().append(json);
    }

}

CategorysecondServlet.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
package com.yc.damai.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.yc.damai.biz.CategorysecondBiz;

@WebServlet("/categorysecond.s")
public class CategorysecondServlet extends BaseServlet {
    private static final long serialVersionUID = 1L;

    private CategorysecondBiz biz = new CategorysecondBiz();

    // 查询  127.0.0.1/demo-damai-76/orders.s?op=olist
    public void queryByCid(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String cid = request.getParameter("cid");
        Gson gson = new Gson();
        String json = gson.toJson(biz.queryByCid(cid));
        // 返回json格式数据
        response.setContentType("application/json;charset=UTF-8");
        response.getWriter().append(json);
    }

}
CATALOG