毕设商城后台管理需求说明
- 商品属性模块
商品属性的列表展示，通过分页表格将所有商品属性（性别、款式、季节、风格等）展示。
JS和HTML代码如下
var columns;
columns= [
{ display: '属性', name: 'type', minWidth: 60, width: 100 ,frozen:false},
{ display: '内容', name: 'content', width: 160, editor: { type: 'text'}},
];
toolBar={items:
[
{ text: '新增', click: addNewRow, icon: 'add' },
{ line: true },
{ text: '修改', click: updateRow, icon: 'edit' },
{ line: true },
{ text: '删除', click: isDeleteRow, icon: 'delete'}
]
};
manager =
/* list1 */
$("#maingrid1").ligerGrid({
columns : columns,
pageSize : 50,
checkbox : true,
allowHideColumn : false,
url : "itemList.do",
width : '96.5%',
height : '99%',
rownumbers : true,
toolbar : toolBar,
pageSize : 20,
pageSizeOptions : [ 20, 50, 100 ],
selectRowButtonOnly : true,
root : "data",
record : "total",
pageParmName : "currentpage",
pagesizeParmName : "pageSize",
sortnameParmName :"sortname",
sortorderParmName :"sortorder",
showTitle: false,
enabledEdit: true,
method:'post',
contentType : "application/x-www-form-urlencoded; charset=utf-8"
});
<div id="maingrid1" style="margin: 0; padding: 0">div>后台代码
@RequestMapping("itemList.do")
public @ResponseBody Grid itemList(Grid g){
List list = goods_ItemService.page(g);
g.setList(list);
return g;
}新增商品属性
点击新增按钮，选择类别，填写内容，点击确定，将新增一项商品属性。
html和JS代码
<div style="display: none" id="addItem">
<form action="addItem.do" method="post" id="addForm">
<table>
<tr>
<td><select class="form-control" id="type" name="type" style="width: 100px;">
<option value="颜色">颜色option>
<option value="款式">款式option>
<option value="面料">面料option>
<option value="种类">种类option>
<option value="性别">性别option>
<option value="季节">季节option>
select>td>
<td style="padding-left: 10px;width: 300px;"><input id="content" name="content" type="text" class="form-control" placeholder="内容">
td>
tr>
<tr style='align:center;'><td colspan="2" ><button class="btn btn-default" type="button" onclick="addItem()">提交button>td>tr>
table>
form>
div>function addItem() {
$.ajax({
url : "addItem.do",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
type : "post",
data : $('#addForm').serialize(),
success : function(data) {
alert("添加"+data.result);
addDig.hide();
manager.reload();
}
});
return false;
}后台代码
@RequestMapping("addItem.do")
public @ResponseBody Map<String, String> addItem(HttpServletRequest req,
HttpServletResponse rsp, Goods_Item item) {
Map<String,String> map=new HashMap<String,String>();
try {
goods_ItemService.add(item);
map.put("result", "成功");
} catch (Exception e) {
map.put("result", "失败");
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
}修改商品属性，点击属性类别内容，变成输入框，然后修改内容，勾选复选框，点击修改按钮
HTML和JS代码
function update(row) {
var id= row.id;
var content=row.content;
$.ajax({
url : "editItem.do",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
type : "post",
data :{"id":id,"content":content},
success : function(data) {
alert("修改"+data.result);
manager.reload();
}
});
return false;
}后台代码
@RequestMapping("editItem.do")
public @ResponseBody Map<String, String> editItem(HttpServletRequest req,
HttpServletResponse rsp, Goods_Item item) {
Map<String,String> map=new HashMap<String,String>();
try {
Goods_Item oldItem = goods_ItemService.get(item.getId());
if(oldItem!=null){
oldItem.setContent(item.getContent());
goods_ItemService.update(oldItem);
map.put("result", "成功");
}else{
map.put("result", "失败");
}
} catch (Exception e) {
map.put("result", "失败");
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
}删除属性选择一项，点击删除按钮
JS和HTML代码
function isDeleteRow() {
if (hasSelectedRow()) {
jQuery.ligerDialog.confirm('是否删除', function(type) {
if (type) {
var rows = manager.getSelecteds();
var ids = "";
for (var i = 0; i < rows.length; i++) {
if (ids != "")
ids += ",";
ids += "" + rows[i].id + "";
}
deleteRow(ids, 'maingrid1');
}
});
}
}后台代码
@RequestMapping("delItem.do")
public @ResponseBody Map<String, String> delItem(HttpServletRequest req,
HttpServletResponse rsp, String ids) {
Map<String,String> map=new HashMap<String,String>();
try {
if(ids!=null&&!"".equals(ids)){
String[] id = ids.split(",");
List<String> list= Arrays.asList(id);
goods_ItemService.deleteByIds(list);;
map.put("result", "成功");
}else{
map.put("result", "失败");
}
} catch (Exception e) {
map.put("result", "失败");
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
}- 商品模块
后台商品列表展示，通过分页表格将商品的各项属性（名字、价格、颜色、上架时间等）展示
前台代码HTML和JS
var columns;
columns= [
{ display: '商品名字', name: 'name', width: 160, editor: { type: 'text'}},
{ display: '种类', name: 'variety', width: 80 ,editor: { type: 'select', data: varietyData, valueField: 'text' }
},
{ display: '面料', name: 'material', width: 80, editor: { type: 'select', data: materialData, valueField: 'text' }
},
{ display: '款式', name: 'style', width: 80, editor: { type: 'select', data: styleData, valueField: 'text' }
},
{ display: '性别', name: 'sex', width: 80, editor: { type: 'select', data: sexData, valueField: 'text' }
},
{ display: '季节', name: 'season', width: 80, editor: { type: 'select', data: seasonData, valueField: 'text' }
},
{ display: '颜色', name: 'color', width: 80,editor: { type: 'select', data: colorData, valueField: 'text' }
},
{ display: '介绍', name: 'introduce', width: 160, editor: { type: 'textarea',height:60,width:200 }},
{ display: '源产地', name: 'sourceArea', width: 100, editor: { type: 'text'}},
{ display: '价格', name: 'price', width: 100,type: 'float', editor: { type: 'float'}},
{ display: '上架时间', name: 'time', type: 'date', width: 160,format: 'yyyy-MM-dd',editor: { type: 'date'}},
{ display: '状态', name: 'state', width: 100, editor:{ type: 'select', data: stateData, valueField: 'text' }
},
{ display: '库存', width: 100, render: function (row){
var Str="查看/添加库存";
return Str;
}},
{ display: '图片', width: 100, render: function (row){
var Str="上传图片";
return Str;
}},
];
toolBar={items:
[
{ text: '新增', click: addNewRow, icon: 'add' },
{ line: true },
{ text: '修改', click: updateRow, icon: 'edit' },
{ line: true },
{ text: '删除', click: isDeleteRow, icon: 'delete'}
]
};
manager =
/* list1 */
$("#maingrid1").ligerGrid({
columns : columns,
pageSize : 50,
checkbox : true,
allowHideColumn : false,
url : "goodsList.do",
width : '96.5%',
height : '99%',
rownumbers : true,
toolbar : toolBar,
pageSize : 20,
pageSizeOptions : [ 20, 50, 100 ],
selectRowButtonOnly : true,
root : "data",
record : "total",
pageParmName : "currentpage",
pagesizeParmName : "pageSize",
sortnameParmName :"sortname",
sortorderParmName :"sortorder",
showTitle: false,
enabledEdit: true,
method:'post',
contentType : "application/x-www-form-urlencoded; charset=utf-8"
});
<div id="maingrid1" style="margin: 0; padding: 0">div>后台代码
@RequestMapping("goodsList.do")
public @ResponseBody Grid itemList(Grid g){
List list = goodsService.page(g);
g.setList(list);
return g;
}新增商品点击新增按钮，弹出模态框，填写商品属性，点击保存，即可生成一条商品数据
前台html和JS代码
<div style="display: none" id="addItem">
<form action="addItem.do" method="post" id="addForm">
<table>
<tr>
<td><h3>
<span class="label label-default">商品名字span>
<h1>td>
<td style="padding-left: 10px; width: 300px;"><input
id="name" name="name" type="text" class="form-control"
placeholder="商品名字">td>
tr>
<tr>
<td><h3>
<span class="label label-default">商品种类span>
<h1>td>
<td style="padding-left: 10px; width: 300px;"><select
id="variety" name="variety" class="form-control">
<c:forEach items="${requestScope.list1}" var="item" varStatus="vs">
<option value="${item.content}">${item.content}option>
c:forEach>
select>td>
tr>
<tr>
<td><h3>
<span class="label label-default">商品面料span>
<h1>td>
<td style="padding-left: 10px; width: 300px;"><select
id="material" name="material"
class="form-control">
<c:forEach items="${requestScope.list2}" var="item" varStatus="vs">
<option value="${item.content}">${item.content}option>
c:forEach>
select>td>
tr>
<tr>
<td><h3>
<span class="label label-default">商品款式span>
<h1>td>
<td style="padding-left: 10px; width: 300px;"><select
id="style" name="style"
class="form-control">
<c:forEach items="${requestScope.list3}" var="item" varStatus="vs">
<option value="${item.content}">${item.content}option>
c:forEach>
select>td>
tr>
<tr>
<td><h3>
<span class="label label-default">商品颜色span>
<h1>td>
<td style="padding-left: 10px; width: 300px;">
<select
id="color" name="color"
class="form-control">
<c:forEach items="${requestScope.list4}" var="item" varStatus="vs">
<option value="${item.content}">${item.content}option>
c:forEach>td>
select>
tr>
<tr>
<td><h3>
<span class="label label-default">适合性别span>
<h1>td>
<td style="padding-left: 10px; width: 300px;">
<select
id="sex" name="sex"
class="form-control">
<c:forEach items="${requestScope.list5}" var="item" varStatus="vs">
<option value="${item.content}">${item.content}option>
c:forEach>td>
select>
tr>
<tr>
<td><h3>
<span class="label label-default">适合季节span>
<h1>td>
<td style="padding-left: 10px; width: 300px;">
<select
id="season" name="season"
class="form-control">
<c:forEach items="${requestScope.list6}" var="item" varStatus="vs">
<option value="${item.content}">${item.content}option>
c:forEach>td>
select>
tr>
<tr>
<td><h3>
<span class="label label-default">商品源产地span>
<h1>td>
<td style="padding-left: 10px; width: 300px;"><input
id="sourceArea" name="sourceArea" type="text" class="form-control"
placeholder="商品原厂地">td>
tr>
<tr>
<td><h3>
<span class="label label-default">商品价格span>
<h1>td>
<td style="padding-left: 10px; width: 300px;"><input
id="price" name="price" type="number" class="form-control">
td>
tr>
<tr>
<td><h3>
<span class="label label-default">商品上架时间span>
<h1>td>
<td style="padding-left: 10px; width: 300px;"><input
id="time" name="time" type="date" class="form-control"
placeholder="商品上架时间">td>
tr>
<tr>
<td><h3>
<span class="label label-default">商品状态span>
<h1>td>
<td style="padding-left: 10px; width: 300px;"><label
class="radio-inline"> <input type="radio"
name="state" id="state" value="上架">
上架
label> <label class="radio-inline"> <input type="radio"
name="state" id="state" value="下架">
下架
label>td>
tr>
<tr>
<td><h3>
<span class="label label-default">商品介绍span>
<h1>td>
<td style="padding-left: 10px; width: 300px;"><textarea
name="introduce" id="introduce"
class="form-control" rows="3">textarea>td>
tr>
<tr >
<td colspan="2" align="right"><input onclick="addGoods()" class="btn btn-default" type="button" value="提交">td>
tr>
table>
form>
div> function addGoods() {
$.ajax({
url : "addGoods.do",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
type : "post",
data : $('#addForm').serialize(),
success : function(data) {
alert("添加"+data.result);
addDig.hide();
manager.reload();
}
});
return false;
}后台代码
@RequestMapping("addGoods.do")
public @ResponseBody Map<String, String> addItem(HttpServletRequest req,
HttpServletResponse rsp, Goods goods) {
Map<String,String> map=new HashMap<String,String>();
try {
goodsService.add(goods);
map.put("result", "成功");
} catch (Exception e) {
map.put("result", "失败");
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
}修改商品，点击一条数据，点击一项需要修改的属性，选择和填写数据。点击复选框，点击修改，即修改成功。
前台HTML和JS代码
function update(row) {
var id= row.id;
var variety=row.variety;
var material=row.material;
var style=row.style;
var color=row.color;
var sex=row.sex;
var season=row.season;
var introduce=row.introduce;
var sourceArea=row.sourceArea;
var name=row.name;
var price=row.price;
var time=row.time;
var state=row.state;
time=time+"";
if(time!=null&&time.indexOf("-")<0){
var d = new Date(time);
time= d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
}
$.ajax({
url : "editGoods.do",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
type : "post",
data :{
"id":id,"variety":variety,
"material":material,"style":style,
"color":color,"sex":sex,"season":season,
"introduce":introduce,
"sourceArea":sourceArea,"state":state,
"name":name,"price":price,
"time":time},
success : function(data) {
alert("修改"+data.result);
manager.reload();
}
});
return false;
}后台代码
@RequestMapping("editGoods.do")
public @ResponseBody Map editGoods(HttpServletRequest req,
HttpServletResponse rsp, Goods goods) {
Map map=new HashMap();
try {
Goods oldIGoods = goodsService.get(goods.getId());
if(oldIGoods!=null){
oldIGoods.setName(goods.getName());
oldIGoods.setVariety(goods.getVariety());
oldIGoods.setMaterial(goods.getMaterial());
oldIGoods.setStyle(goods.getStyle());
oldIGoods.setColor(goods.getColor());
oldIGoods.setSex(goods.getSex());
oldIGoods.setSeason(goods.getSeason());
oldIGoods.setIntroduce(goods.getIntroduce());
oldIGoods.setSourceArea(goods.getSourceArea());
oldIGoods.setPrice(goods.getPrice());
oldIGoods.setTime(goods.getTime());
oldIGoods.setState(goods.getState());
goodsService.update(oldIGoods);
map.put("result", "成功");
}else{
map.put("result", "失败");
}
} catch (Exception e) {
map.put("result", "失败");
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
} 删除商品，选择一项，点击删除。
前台HTML和JS代码
function isDeleteRow() {
if (hasSelectedRow()) {
jQuery.ligerDialog.confirm('是否删除', function(type) {
if (type) {
var rows = manager.getSelecteds();
var ids = "";
for (var i = 0; i < rows.length; i++) {
if (ids != "")
ids += ",";
ids += "" + rows[i].id + "";
}
deleteRow(ids, 'maingrid1');
}
});
}
}后台代码
@RequestMapping("delItem.do")
public @ResponseBody Map<String, String> delItem(HttpServletRequest req,
HttpServletResponse rsp, String ids) {
Map<String,String> map=new HashMap<String,String>();
try {
if(ids!=null&&!"".equals(ids)){
String[] id = ids.split(",");
List<String> list= Arrays.asList(id);
goodsService.deleteByIds(list);;
map.put("result", "成功");
}else{
map.put("result", "失败");
}
} catch (Exception e) {
map.put("result", "失败");
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
}上传或修改商品图片模块，点击一条商品数据的上传图片按钮
前台代码
<div style="display: none" id="uploadDIV">
<form action="updGoodsImg.do" method="post" id="uploadForm" enctype="multipart/form-data">
<input type="hidden" id="goodsImgId" name="goodsImgId">
<table><tr>
<td><h3>
<span class="label label-default">商品图片span>
<h1>td>
<td style="padding-left: 10px; width: 300px;"><input
name="img" id="img" type="file"
class="form-control" >input>td>
tr>
<tr >
<td colspan="2" align="right"><input onclick="uploadImg()" class="btn btn-default" type="button" value="提交">td>
tr>
<tr >
<td colspan="2" align="right"><div id="showORhideImg"><img width="400px" height="300px" id='goodsImg' src="">div>td>
tr>
<tr >
<td id='imgTD' colspan="2" align="right">td>
tr>
table>
form>
div>function uploadImg(){
var filepath=$('#img').val();
var extStart=filepath.lastIndexOf('.');
var ext=filepath.substring(extStart,filepath.length).toUpperCase();
if(ext!='.BMP'&&ext!='.PNG'&&ext!='.GIF'&&ext!='.JPG'&&ext!='.JPEG'){
alert('图片限于png,gif,jpeg,jpg格式');
return false;
}
$('#uploadForm').ajaxSubmit(function(data) {
uploadDig.hide();
manager.reload();
alert("上传"+data.result);
});
return false; //阻止表单默认提交
}
function showUploadDiv(id,imgName){
document.getElementById('uploadForm').reset();
$('#goodsImgId').val(id);
var filepath=imgName;
var extStart=filepath.lastIndexOf('.');
var ext=filepath.substring(extStart,filepath.length).toUpperCase();
if(ext!='.BMP'&&ext!='.PNG'&&ext!='.GIF'&&ext!='.JPG'&&ext!='.JPEG'){
$('#showORhideImg').hide();
$('#imgTD').html("目前没有上传图片！");
}else{
$('#imgTD').html("");
$('#showORhideImg').show();
$('#goodsImg').attr('src', 'getPhoto.do?imgSrc='+imgName);
}
uploadDig=openTargetDlg(450,500, "更新图片", $("#uploadDIV"));
}后台代码
@RequestMapping("updGoodsImg.do")
public @ResponseBody Map<String, String> updGoodsImg(HttpServletRequest req,
HttpServletResponse rsp,MultipartFile img,String goodsImgId){
Map<String,String> map=new HashMap<String,String>();
try {
String root = req.getServletContext().getRealPath("WEB-INF");
String separator = File.separator;
String savePath=root+separator+"upload"+separator;
String fileName=img.getOriginalFilename();
int lastIndexOf = fileName.lastIndexOf(".");
String type=fileName.substring(lastIndexOf, fileName.length());
File saveFile = new File(savePath);
// if(saveFile.exists()){
// File[] fs = saveFile.listFiles();
// if (fs.length > 0) {
// for (int i = 0; i < fs.length; i++) {
// fs[i].delete();
// }
// }
// }
if (!saveFile.exists()) {
saveFile.mkdirs();
}
File imgFile=new File(savePath+goodsImgId+type);
FileUtils.writeByteArrayToFile(imgFile,img.getBytes());
goodsService.updateImgSrc(goodsImgId+type,goodsImgId);
map.put("result", "成功");
} catch (Exception e) {
map.put("result", "失败");
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
}商品库存管理
点击 查看/修改库存，弹出模态框，显示或修改商品库存
点击提交、更新或删除即可更新库存
HTML和JS代码
<table id="GoodsStockTable" name="GoodsStockTable" class="table table-hover">
<thead><th style="width:35%">码数th><th style="width:35%">数量th><th style="width:15%">操作th><th style="width:15%">删除th>thead>
<tr class="stockClass"><td class="info">aaatd><td>aaatd><td>更新td>tr>
table>function updateStock(id){
$('#goods_Id').val(id);
showGoodsStock(id);
addDig=openTargetDlg(450,500, "更新库存", $("#stock"));
return false;
}
function addGoodsStock(){
$.ajax({
url : "addGoodsStock.do",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
type : "post",
data : $('#addGoodsStock').serialize(),
success : function(data) {
alert("添加"+data.result);
}
});
var goods_Id=$('#goods_Id').val();
document.getElementById("addGoodsStock").reset();
showGoodsStock(goods_Id);
// setTimeout("showGoodsStock("+goods_Id+")",10000);
// window.location.reload();//刷新当前页面.
}
function updStock(id,stock){
$('#'+id).html("");
$('#'+id).append(''" value="'+stock+'">');
}
function updGoodsStock(id,goods_Id){
var stock= $('#t_'+id).val();
if(stock==undefined){
alert("请双击要修改的数据！");
return false;
}
$.ajax({
url : "updGoodsStock.do",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
type : "post",
data :{"id":id,"stock":stock},
success : function(data) {
alert("修改"+data.result);
}
});
// setTimeout("showGoodsStock("+goods_Id+")",1500);
showGoodsStock(goods_Id);
}
function delGoodsStock(id,goods_Id){
$.ajax({
url : "delGoodsStock.do",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
type : "post",
data :{"id":id},
success : function(data) {
alert("删除"+data.result);
}
});
// setTimeout("showGoodsStock("+goods_Id+")",1500);
showGoodsStock(goods_Id);
// showGoodsStock(goods_Id);
}
function showGoodsStock(id){
$('.stockClass').remove();
setTimeout(function(){$.ajax({
url : "getGoodsStock.do",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
type : "post",
data : {"id":id},
success : function(data) {
var list=data.stock;
if(list!=null&&list.length>0){
for(var i=0;i'#GoodsStockTable').append(""+list[i].size+" +list[i].id+"',"+list[i].stock+") id='"+list[i].id+"'>"+list[i].stock+" +list[i].id+"','"+list[i].goods_Id+"')>更新 +list[i].id+"','"+list[i].goods_Id+"') style='cursor:pointer' class='danger'>删除 后台代码
@RequestMapping("getGoodsStock.do")
public @ResponseBody Map<String, List<Stock>> getGoodsStock(HttpServletRequest req,
HttpServletResponse rsp, String id){
Map<String,List<Stock>> map=new HashMap<String,List<Stock>>();
List<Stock> list = stockService.getGoodsStock(id);
map.put("stock", list);
return map;
}
@RequestMapping("addGoodsStock.do")
public @ResponseBody Map<String, String> addGoodsStock(HttpServletRequest req,
HttpServletResponse rsp, Stock stock){
Map<String,String> map=new HashMap<String,String>();
try {
stockService.saveStock(stock);
map.put("result", "成功");
} catch (Exception e) {
map.put("result", "失败");
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
}
@RequestMapping("updGoodsStock.do")
public @ResponseBody Map<String, String> updGoodsStock(HttpServletRequest req,
HttpServletResponse rsp, String id, int stock){
Map<String,String> map=new HashMap<String,String>();
try {
Stock oldStock = stockService.get(id);
if(oldStock!=null){
oldStock.setStock(stock);
stockService.update(oldStock);
}
map.put("result", "成功");
} catch (Exception e) {
map.put("result", "失败");
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
}
@RequestMapping("delGoodsStock.do")
public @ResponseBody Map<String, String> delGoodsStock(HttpServletRequest req,
HttpServletResponse rsp, String id){
Map<String,String> map=new HashMap<String,String>();
try {
Stock oldStock = stockService.get(id);
if(oldStock!=null){
stockService.delete(oldStock);
}
map.put("result", "成功");
} catch (Exception e) {
map.put("result", "失败");
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
}- 订单管理模块
订单列表，可通过条件筛选查询订单
<body>
<div>
<table>
<tr>
<td ><div
class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">商品名称span> <input
id="goodsName" name="goodsName"
type="text" class="form-control" placeholder="商品名称"
aria-describedby="sizing-addon3">
div>td>
<td ><div
class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">用户名称span> <input
id="usersName" name="usersName"
type="text" class="form-control" placeholder="用户名称"
aria-describedby="sizing-addon3">
div>td>
<td><div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">支付状态span> <select
id="payState" name="payState"
class="form-control">
<option value="">---请选择---option>
<option value="已支付">已支付option>
<option value="未支付">未支付option>
select>
div>td>
<td><div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">订单状态span><select
id="orderState" name="orderState"
class="form-control">
<option value="">---请选择---option>
<option value=0>未发货option>
<option value=1>已发货option>
<option value=2>退货中option>
<option value=3>确认收货option>
<option value=4>退货完成option>
select>
div>td>
tr>
<tr>
<td><div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">最早下单时间span> <input
id="orderTime_low" name="orderTime_low"
type="datetime-local" class="form-control"
aria-describedby="sizing-addon3">
div>td>
<td><div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">最迟下单时间span> <input
id="orderTime_high" name="orderTime_high"
type="datetime-local" class="form-control"
aria-describedby="sizing-addon3">
div>td>
<td style="padding-left: 20px"><div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">最早发货时间span> <input
id="deliveryTime_low" name="orderTime"
type="datetime-local" class="form-control"
aria-describedby="sizing-addon3">
div>td>
<td><div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">最迟发货时间span> <input
id="deliveryTime_high" name="deliveryTime"
type="datetime-local" class="form-control"
aria-describedby="sizing-addon3">
div>td>tr><tr>
<td colspan="4" align="right"><input onclick="filterList()" class="btn btn-default" type="button" value="筛选">td>tr>
table>
div>
<div>div>
<div id="maingrid1" style="margin: 0; padding: 0">div>
<div style="display:none" id="logisticsInfoDiv">
<input type="hidden" id="id">
<div
class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">物流编号span> <input
id="logisticsId" name="logisticsId"
type="text" class="form-control" placeholder="物流编号"
aria-describedby="sizing-addon3">
div>
<hr>
<div
class="input-group">
<span class="input-group-addon" id="sizing-addon3">物流信息span>
<textarea id="logisticsInfo" name="logisticsInfo"
type="text" class="form-control" rows="3" cols="20"
>textarea>
div>
<hr>
<div style="margin-left: 30%"><input onclick="updLogisticsInfo()" class="btn btn-default" type="button" value="更新物流信息">div>
div>
body> var selectDlg;
$.ligerui.defaults.Grid.headerRowHeight = 50;
var toolBar;
var columns;
var sexData = [{ orderState: 0, text: '未发货' }, { orderState: 1, text: '已发货' },
{ orderState: 2, text: '退货' },{ orderState: 3, text: '完成' }];
columns= [
{ display: '商品名称', name: 'goodsName', width: 160 },
{ display: '用户名称', name: 'usersName', width: 160 },
{ display: '实际支付金额', name: 'actualPayment', width: 100 },
{ display: '支付状态', name: 'payState', width: 100},
{ display: '客户备注留言', name: 'msg', width: 160},
{ display: '订单状态',type:'int', name: 'orderState', width: 160,
// editor: { type: 'select', data: sexData, valueColumnName: 'orderState' },
render: function (row){
// 0 未发货 1 已发货 2退货中 3 确认收货 4退货完成
var str="";
if (parseInt(row.orderState) == 0 ) str="未发货 ";
else if (parseInt(row.orderState) == 1 ) str= "已发货 ";
else if (parseInt(row.orderState) == 2 ) str="退货中";
else if (parseInt(row.orderState) == 3 ) str="确认收货";
else if (parseInt(row.orderState) == 4 ) str="退货完成";
return str;
} },
{ display: '退货原因', name: 'evaluate', width: 160},
{ display: '下单时间', name: 'orderTime', width: 160},
{ display: '发货时间', name: 'deliveryTime',width: 160},
{ display: '物流编号', name: 'logisticsId',width: 160},
{ display: '物流信息', name: 'logisticsInfo',width: 160},
{ display: '操作',width: 160,render: function (row){
var Str="";
if(parseInt(row.orderState) == 0){
Str="确认发货";
}else if(parseInt(row.orderState) == 2) {
Str="确认退货";
}
Str+=" 修改物流";
return Str;
}
}
];
toolBar={items:
[
// { line: true },
// { text: '修改', click: updateRow, icon: 'edit' },
// { line: true },
// { text: '删除', click: isDeleteRow, icon: 'delete'}
]
};
manager =
/* list1 */
$("#maingrid1").ligerGrid({
columns : columns,
pageSize : 50,
checkbox : true,
allowHideColumn : false,
url : "orderList.do",
width : '96.5%',
height : '99%',
rownumbers : true,
pageSize : 20,
pageSizeOptions : [ 20, 50, 100 ],
selectRowButtonOnly : true,
root : "data",
record : "total",
pageParmName : "currentpage",
pagesizeParmName : "pageSize",
sortnameParmName :"sortname",
sortorderParmName :"sortorder",
showTitle: false,
enabledEdit: true,
method:'post',
contentType : "application/x-www-form-urlencoded; charset=utf-8"
});修改订单或修改物流信息点击操作栏，任意一个按钮即出现不同模态框或提示。
前端html和JS代码
function updLogisticsInfo(){
var logisticsId=$("#logisticsId").val();
var logisticsInfo=$("#logisticsInfo").val();
var id=$("#id").val();
$.ajax({
url : "updLogisticsInfo.do",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
type : "post",
data : {"id":id,"logisticsId":logisticsId,"logisticsInfo":logisticsInfo},
success : function(data) {
alert("修改物流信息"+data.result);
manager.reload();
}
});
function updateOrderState(id,state){
var result= confirm("确认修改？");
if(result){
$.ajax({
url : "updOrderState.do",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
type : "post",
data : {"id":id,"state":state},
success : function(data) {
alert("修改"+data.result);
manager.reload();
}
});
} <div
class="input-group input-group-sm">
class="input-group-addon" id="sizing-addon3">物流编号 id="logisticsId" name="logisticsId"
type="text" class="form-control" placeholder="物流编号"
aria-describedby="sizing-addon3">
div>
<div
class="input-group">
class="input-group-addon" id="sizing-addon3">物流信息
div>
<div style="margin-left: 30%">"updLogisticsInfo()" class="btn btn-default" type="button" value="更新物流信息">div>
div>