毕设商城后台管理需求说明

1. 商品属性模块
   商品属性的列表展示，通过分页表格将所有商品属性（性别、款式、季节、风格等）展示。
   
   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;

    }

1. 商品模块
   后台商品列表展示，通过分页表格将商品的各项属性（名字、价格、颜色、上架时间等）展示
   
   前台代码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="<span  style='cursor:pointer' onclick='updateStock(\""+row.id+"\")'>查看/添加库存</span>";
                            return Str;
                        }}, 
                        { display: '图片',  width: 100, render: function (row){
                                var Str="<span  style='cursor:pointer' onclick='showUploadDiv(\""+row.id+"\",\""+row.imgSrc+"\")'>上传图片</span>";
                            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<String, String> editGoods(HttpServletRequest req,
            HttpServletResponse rsp, Goods goods) {
        Map<String,String> map=new HashMap<String,String>();
        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">aaa</td><td>aaa</td><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('<input type="text"    id="t_'+id+'" 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<list.length;i++){
                    $('#GoodsStockTable').append("<tr class='stockClass'><td >"+list[i].size+"</td><td ondblclick=updStock('"+list[i].id+"',"+list[i].stock+")  id='"+list[i].id+"'>"+list[i].stock+"</td><td style='cursor:pointer' class='warning' onclick=updGoodsStock('"+list[i].id+"','"+list[i].goods_Id+"')>更新</td><td onclick=delGoodsStock('"+list[i].id+"','"+list[i].goods_Id+"')  style='cursor:pointer' class='danger'>删除<td/></tr>");       
                }

            }
        }
    });},300);
}

后台代码

@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;
    }

1. 订单管理模块
   订单列表，可通过条件筛选查询订单
   

<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">
<!--                            0 未发货     1  已发货   2退货中  3 确认收货  4退货完成 -->
                            <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="<span style='color:blue;'>未发货</span> ";
                            else if (parseInt(row.orderState) == 1 ) str= "<span style='color:black;'>已发货</span> ";
                            else if (parseInt(row.orderState) == 2 ) str="<span style='color:red;'>退货中";
                            else if (parseInt(row.orderState) ==  3 ) str="<span style='color:green;'>确认收货";
                            else if (parseInt(row.orderState) ==  4 ) str="<span style='color:#B452CD;'>退货完成";
                            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="<span  style='color:green;cursor:pointer' onclick='updateOrderState("+row.catrId+",1)'>确认发货</span>";   
                            }else if(parseInt(row.orderState) == 2)  {
                                Str="<span  style='color:red;cursor:pointer' onclick='updateOrderState("+row.catrId+",4)'>确认退货</span>"; 
                            }  
                            Str+="&nbsp;&nbsp;&nbsp;&nbsp;<span style='color:blue;cursor:pointer' onclick='openDialog("+row.catrId+")'>修改物流</span>";
                            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">
                        <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>