3. product-view.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="H-ui_v2.2.1/favicon.ico" >
<link rel="Shortcut Icon" href="H-ui_v2.2.1/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/web10-7/H-ui_v2.2.1/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/web10-7/H-ui_v2.2.1/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/web10-7/H-ui_v2.2.1/lib/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/web10-7/H-ui_v2.2.1/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="/web10-7/H-ui_v2.2.1/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/web10-7/H-ui_v2.2.1/static/h-ui.admin/css/style.css" />
<title>产品查看</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 产品管理 <span class="c-gray en">></span> 产品查看 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav>
<div class="page-container" style="padding-top: 15px; padding-left: 25px; padding-right: 25px;">
<div class="cl pd-5 bg-1 bk-gray mt-20 radius">
<span class="l"><a href="javascript:;" οnclick="add()" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 添加产品</a>
<a href="javascript:;" οnclick="removes()" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 批量删除</a> </span>
</div>
<div class="mt-20">
<table class="table table-border table-bordered table-hover table-bg table-sort" id="userTable">
<thead>
<tr class="text-c">
<th width="25"><input type="checkbox" name="" value=""></th>
<th width="">产品名称</th>
<th width="">产品价格</th>
<th width="">产品库存</th>
<th width="">产品状态</th>
<th width="130">操作</th>
</tr>
</thead>
<tbody class="text-c">
</tbody>
</table>
</div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/web10-7/H-ui_v2.2.1/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/web10-7/H-ui_v2.2.1/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="/web10-7/H-ui_v2.2.1/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="/web10-7/H-ui_v2.2.1/lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="/web10-7/H-ui_v2.2.1/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="/web10-7/H-ui_v2.2.1/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/web10-7/H-ui_v2.2.1/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/web10-7/H-ui_v2.2.1/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<!--/_footer /作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
$(document).ready(initTable());
var table;
function initTable(){
table = $("#userTable").DataTable({
"aaSorting": [[ 2, "asc" ]],//属性'aaSorting':初始化表格的时候，选择以怎样的规则排序
"aoColumnDefs": [
{"orderable":false,"aTargets":[0,5]}// 制定列不参与排序 //targets ： 表示具体需要操作的目标列，下标从 0 开始
],
"keys":true,
"bProcessing" : false, //是否显示加载
"sAjaxSource" : '/web10-7/product/datatable', //请求资源路径
"serverSide": true, //开启服务器处理模式
/*
使用ajax，在服务端处理数据
sSource:即是"sAjaxSource"
aoData:要传递到服务端的参数
fnCallback:处理返回数据的回调函数
*/
//fnServerData : 路径 . 参数 回调函数
"fnServerData": function(sSource, aoData, fnCallback){
$.ajax( {
'type' : 'post', //提交方式
"url": sSource, //路径
"dataType": "json", //数据类型:json
"data": {
"aodata" : JSON.stringify(aoData), //数据1.parse 用于从一个字符串中解析出json 对象。2.stringify用于从一个对象解析出字符串
},
"success": function(resp) {
fnCallback(resp); // 成功:回调函数
}
});
},
//列的每一项,在这里一下的数据都是生成表单和填充数据,每一列的数据,都是一个单元格
"columns" : [
{
data: "id",
render: function (data, type, full, meta) {//meta包含当前行的索引,当前DataTables控件的setttings对象,当前DataTables控件的setttings对象,row,colsettings
return '<input type="checkbox" class="productCheckBox" name="productCheckBox" value="' + data + '" />';
}
},
{ data : "name" }, //名字
{ data : "price" }, //价格
{ data : "repertory" }, //库存
{
data : "status", //状态
render: function (data, type, full, meta) { //方法
if(data == "1")
return '在售';
else
return '已下架';
}
},
{
data: "id", //id
render: function (data, type, full, meta) {
return '<a title="修改产品信息" href="javascript:;" οnclick="modify(this,\'1\')" value="'
+ data +'" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a><p class="hidden">'+ data
+'</p><a title="删除" href="javascript:;" οnclick="remove(this,\'1\')" value="'
+ data +'" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a> ';
}
}
]
});
}
//表单点击
$('.table-sort tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) { //如果有这个样式
$(this).removeClass('selected'); //删除selected
}
else {//如果没有这个样式
table.$('tr.selected').removeClass('selected'); //删除样式
$(this).addClass('selected'); //增加样式
}
});
/*删除*/
function remove(obj,id){
var tr = $(obj).parents("tr");
var input = tr.find("input");
layer.confirm('确认要删除吗？',function(index){
$.ajax({
'url' : '/web10-7/product/remove',
'type' : 'post',
'dataType' : 'json',
'data' : {"id" : input.val()},
'success' : function(data, statusText) {
if(data.status){
layer.msg("删除成功！");
table.ajax.reload();
}else{
layer.msg("删除失败！");
}
},
'error' : function(xhr, e1, e2) {
layer.msg("系统错误！");
}
});
});
}
/*批量删除*/
function removes(){
layer.confirm('确认删除所选产品？',function(index){
$.ajax({
'url' : '/web10-7/product/removes',
'type' : 'post',
'dataType' : 'json',
'data' : {"productCheckBox":$('.productCheckBox:checked').serialize()},
'success' : function(data, statusText) {
if(data.status){
layer.msg("删除成功！");
table.ajax.reload();
}else{
layer.msg("删除失败！");
}
},
'error' : function(xhr, e1, e2) {
layer.msg("系统错误！");
}
});
});
}
/*添加产品*/
function add(){
layer.open({
type: 2,
title: '添加用户',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area : ['800px' , '520px'],
content: 'product-create.jsp',
end: function () {
table.ajax.reload();
}
});
}
/*修改产品信息*/
function modify(obj,id){
var parent_trs = $(obj).parents("tr");
var parent_tr = parent_trs[0];
var tds = parent_tr.cells;
layer.open({
type: 2,
title: '修改产品信息',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area : ['800px' , '520px'],
content: 'product-modify.jsp',
success: function (layero, index) {
var body = layer.getChildFrame('body', index);
body.contents().find("#ProductName").val(tds[5].childNodes[1].innerHTML);
},
end: function () {
table.ajax.reload();
}
});
}
</script>
</body>
</html>
4.ProductAction.java
package firmye.action;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import firmye.pojo.CallbackResult;
import firmye.pojo.DatatablesJsonResponse;
import firmye.pojo.DatatablesResource;
import firmye.pojo.Product;
import firmye.service.ProductService;
import firmye.utils.GetDatatablesResourceUtil;
import firmye.utils.UUIDUtil;
@Controller
@RequestMapping("/product")
public class ProductAction {
@Resource
private ProductService productService;
/**
* 获取Datatable数据,分页
*/
@ResponseBody
@RequestMapping("/datatable")
public DatatablesJsonResponse datatable(HttpServletRequest request){
//创建一个products的list
List<Product> products = null;
//创建一个表格数据源
DatatablesResource datatablesResource = GetDatatablesResourceUtil.getInstance().getDatatablesResource(request);
if (datatablesResource.getsSearch().equals("%%")){
products = productService.getDatatables(datatablesResource);
}
else
products = productService.getDatatablesBysSearch(datatablesResource);
// 获取记录数,size是所有的产品记录
int size = productService.getProduct().size();
// 数据封装并返回给客户端 datatablesResource.getsEcho()是第几页
DatatablesJsonResponse djr = new DatatablesJsonResponse(datatablesResource.getsEcho(), size, size, products);
return djr;
}
5.GetDatatablesResourceUtil.java
/**
* GetDatatablesResourceUtil 工具类 ,用于解析前台传来的json字符串
* 1.接收json字符串
* 2.把json字符串转成JSONArray
* 3.转成json数组
* 4.根据key值取出json的value值
* 5.封装进分页对象 : DatatablesResource
* */
package firmye.utils;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import firmye.pojo.DatatablesResource;
import net.sf.json.JSONArray;
/**
* GetDatatablesResourceUtil 工具类
* 1.接收json
* 2.把json封装到json字符串
* 3.转成json数组
* 4.根据key值取出json的value值
* 5.封装进分页对象
* */
public class GetDatatablesResourceUtil {
private static GetDatatablesResourceUtil getDatatablesResource = null;
/**
* 单例获取工具类
* */
public static GetDatatablesResourceUtil getInstance() {
if (getDatatablesResource == null)
getDatatablesResource = new GetDatatablesResourceUtil();
return getDatatablesResource;
}
/**
* DatatablesResource工具类
* */
public DatatablesResource getDatatablesResource(HttpServletRequest request){
//创建json数组接收前台的aodata
//前台接收的是json对象,把json对象转成json数组
JSONArray ja = JSONArray.fromObject(request.getParameter("aodata"));
/*aodata[{"name":"sEcho","value":1},
{"name":"iColumns","value":6},
{"name":"sColumns","value":",,,,,"},
{"name":"iDisplayStart","value":0},
{"name":"iDisplayLength","value":10},
{"name":"mDataProp_0","value":"id"}, //集合中所有的id
{"name":"sSearch_0","value":""},
{"name":"bRegex_0","value":false},
{"name":"bSearchable_0","value":true},
{"name":"bSortable_0","value":false},
{"name":"mDataProp_1","value":"name"}, //集合中的name
{"name":"sSearch_1","value":""}, //匹配规则的是name
{"name":"bRegex_1","value":false},
{"name":"bSearchable_1","value":true},
{"name":"bSortable_1","value":true},
{"name":"mDataProp_2","value":"price"},//集合中的所有的价格
{"name":"sSearch_2","value":""}, //匹配规则的是price
{"name":"bRegex_2","value":false},
{"name":"bSearchable_2","value":true},
{"name":"bSortable_2","value":true},
{"name":"mDataProp_3","value":"repertory"},//集合中所有的库存
{"name":"sSearch_3","value":""}, //匹配规则的是库存
{"name":"bRegex_3","value":false},
{"name":"bSearchable_3","value":true},
{"name":"bSortable_3","value":true},
{"name":"mDataProp_4","value":"status"},//集合中所有的状态
{"name":"sSearch_4","value":""}, //匹配规则是状态
{"name":"bRegex_4","value":false}, //正则表达式 false
{"name":"bSearchable_4","value":true}, //可模糊匹配 true
{"name":"bSortable_4","value":true}, //可排序 true
{"name":"mDataProp_5","value":"id"}, //集合中的id
{"name":"sSearch_5","value":""},
{"name":"bRegex_5","value":false},
{"name":"bSearchable_5","value":true},
{"name":"bSortable_5","value":false},
{"name":"sSearch","value":""},
{"name":"bRegex","value":false},
{"name":"iSortCol_0","value":2},
{"name":"sSortDir_0","value":"asc"},
{"name":"iSortingCols","value":1}]
*/
String datemin = request.getParameter("datemin");
String datemax = request.getParameter("datemax");
String sEcho = null; //表格的第几页
Integer iColumns = null; //列数
Integer iDisplayStart = null; //开始分页的起始序号
Integer iDisplayLength = null; //开始分页的起始长度
//创建一个list数组mDataProp
List<String> mDataProp = new ArrayList<String>();
String sSearch = null; //输入匹配规则
Integer iSortCol_0 = null; //要排序的列序号
String iSortCol = null; //要排序的列序号
String sSortDir_0 = null; //正序还是倒序（desc or asc）
for (int i = 0; i < ja.size(); i++) {
//如果得到的key与"sEcho"相等,则赋值给sEcho//页数
if (ja.getJSONObject(i).getString("name").equals("sEcho"))
sEcho = ja.getJSONObject(i).getString("value");
//如果得到的key与"iColumns"相等,则赋值给iColumns:列的数量
else if (ja.getJSONObject(i).getString("name").equals("iColumns"))
iColumns = Integer.valueOf(ja.getJSONObject(i).getString("value"));
//如果得到的key与"iDisplayStart"相等,则赋值给iDisplayStart
else if (ja.getJSONObject(i).getString("name").equals("iDisplayStart"))
iDisplayStart = Integer.valueOf(ja.getJSONObject(i).getString("value"));
//如果得到的key与"iDisplayLength"相等,则赋值给iDisplayLength
else if (ja.getJSONObject(i).getString("name").equals("iDisplayLength"))
iDisplayLength = Integer.valueOf(ja.getJSONObject(i).getString("value"));
//如果得到的key与"sSearch"相等,则赋值给sSearch
else if (ja.getJSONObject(i).getString("name").equals("sSearch")){
sSearch = ja.getJSONObject(i).getString("value");
}
//如果得到的key与"iSortCol_0"相等,则赋值给iSortCol_0//从哪里排序
else if (ja.getJSONObject(i).getString("name").equals("iSortCol_0")){
iSortCol_0 = Integer.valueOf(ja.getJSONObject(i).getString("value"));
System.out.println("iSortCol_0是"+iSortCol_0);
}
//如果得到的key与"sSortDir_0"相等,则赋值给sSortDir_0//排序规则//asc
else if (ja.getJSONObject(i).getString("name").equals("sSortDir_0")){
sSortDir_0 = ja.getJSONObject(i).getString("value");
}
//如果总的行数不等于null
else if (iColumns != null) {
//遍历列
for (int j = 0; j < iColumns; j++){
if (ja.getJSONObject(i).getString("name").equals("mDataProp_"+ j)){
mDataProp.add(ja.getJSONObject(i).getString("value"));
}
}
}
}
iSortCol = mDataProp.get(iSortCol_0);//数组索引越界
System.out.println("iSortCol是"+iSortCol);//价格是排序的规则
if(sSearch.equals("已发货")||sSearch.equals("已处理")||sSearch.equals("启用"))
sSearch = "1";
else if(sSearch.equals("未处理")||sSearch.equals("未发货")||sSearch.equals("停用"))
sSearch = "2";
else if(sSearch.equals("已收货"))
sSearch = "3";;
System.out.println(sSearch);
sSearch = "%" + sSearch + "%";
//拿到页数,开始的行数,开始的长度,匹配后的规则,排序规则
DatatablesResource datatablesResource = new DatatablesResource(sEcho,iDisplayStart,iDisplayLength,sSearch,iSortCol,sSortDir_0);
datatablesResource.setDatemin(datemin);
datatablesResource.setDatemax(datemax);
return datatablesResource;
}
}
6.ProductService.java
public List<Product> getDatatables(DatatablesResource datatablesResource) {
return productDao.getDatatables(datatablesResource);
}
public List<Product> getDatatablesBysSearch(DatatablesResource datatablesResource) {
return productDao.getDatatablesBysSearch(datatablesResource);
}
7.ProductMapper.xml
<!-- 根据要排序的序列号正序或者倒序输出页面从0到最大长度 -->
<select id="getDatatables" resultType="firmye.pojo.Product" useCache="true" flushCache="false">
select * from (select * from product
order by #{iSortCol} #{sSortDir_0}) as tempt limit #{iDisplayStart},#{iDisplayLength}
</select>
<!-- 模糊搜索适合匹配规则的行 -->
<select id="getDatatablesBysSearch" resultType="firmye.pojo.Product" useCache="true" flushCache="false">
select * from (select * from (select * from product where status != 0
order by #{iSortCol} #{sSortDir_0}) as tempt_nd where name like #{sSearch} or price like #{sSearch} or repertory like #{sSearch}) as tempt limit #{iDisplayStart},#{iDisplayLength}
</select>
