小作业：完成订单信息的显示与修改

一、使用maven脚本命令generatorConfig.xml生成myorder的实体类和mapper文件

二、编写Mapper层

MyorderMapper.xml

<update id="update1" parameterType="java.lang.String">
    update myorder
    set
    <if test="field == 'address'">
    address = #{value,jdbcType=VARCHAR}
    </if>
    <if test="field == 'subject'">
    subject = #{value,jdbcType=VARCHAR}
    </if>
    <if test="field == 'message'">
    message = #{value,jdbcType=VARCHAR}
    </if>
    where order_id = #{id,jdbcType=VARCHAR}
</update>

MyorderMapper.java

int update1(@Param("field") String field, @Param("value") String value, @Param("id") String id);

三、编写Service层

MyorderService.java

public List<Myorder> selectAll();
public int update1(String field,String value,String id);

MyorderServiceImpl.java

@Autowired
MyorderMapper myorderMapper;
@Override
public List<Myorder> selectAll() {
    List<Myorder> myorders = myorderMapper.selectAll();
    return myorders;
}
@Override
public int update1(String field, String value, String id) {
    int value1 = myorderMapper.update1(field, value, id);
    return value1;
}

四、编写Controller层

@Autowired
MyorderService myorderService;
@RequestMapping("/showAll")
@ResponseBody
public Result showAll(){
    Result result = new Result();
    List<Myorder> myorders = myorderService.selectAll();
    result.setList(myorders);
    result.setMessage("ok");
    result.setStatus(0);
    result.setTotalNum(myorders.size());
    return result;
}
@RequestMapping("/myorder")
public String video(){
    return "MyorderTable";
}
@RequestMapping("/update1")
@ResponseBody
public Result update1(String field,String value,String id){
    Result result = new Result();
    System.out.println(field+"..."+value+"..."+id);
    int i = myorderService.update1(field,value,id);
    System.out.println(i);
    if (i > 0){
        result.setMessage("ok");
    }else result.setMessage("error");
    return result;
}

五、编写MyorderTable.html

<div class="like" style="margin-top:10px;margin-left:35%">
搜索userId
<div class="layui-inline">
    <input class="layui-input" name="orderId" id="orderLike" autocomplete="off"/>
</div>
<button class="layui-btn" data-type="reload" id="re">搜索</button>
</div>
<table id="demo" lay-filter="MyorderTable"></table>
<script type="text/html" id="bar">
<!-- layui监测三个按钮事件 lay-event里的内容，来确定点击的是哪个事件 -->
<a class="layui-btn layui-btn-xs" lay-event="add">上传订单</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">批量删除</a>
<a class="layui-btn layui-btn-xs" lay-event="daoru">导入订单</a>
</script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/date.js}"></script>
<!--<script th:src="@{/js/jquery.min.js}"></script>-->
<script th:src="@{/js/myorder.js}"></script>

六、编写myorder.js

layui.use('table', function(){
    var table = layui.table;
    var $ = layui.jquery;
    //第一个实例
    table.render({
        elem: '#demo'
        ,height: 312
        ,url: '/myorders/showAll' //数据接口
        ,limit:3
        ,limits:[3,5,10]
        ,page: true //开启分页
        ,parseData: function(res){ //res 即为原始返回的数据
            // 判断是否有页数
            console.log(this)
            var  list1=[]
            if(this.page.curr){
                // （页数-1）每页多少条
                list1 = res.list.slice((this.page.curr-1)*this.limit,this.page.curr*this.limit)
            }else{
                //如果页数无定义,默认从第一条开始
                list1 = res.list.slice(0,this.limit)
            }
            return {
                "code": res.status, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.totalNum, //解析数据长度
                "data": list1 //解析数据列表
            };
        }
        ,cols: [[ //表头
            {type: 'checkbox', fixed: 'left'}
            ,{field: 'orderId', title: 'ID', width: 80, sort: true, align: "center"}
            ,{field: 'orderUser', title: '订单用户', width: 100, align: "center"}
            ,{field: 'address', title: '快递信息', width: 500, edit: "text"}
            ,{field: 'mydate', title: '创建时间', sort: true, align: "center",
                templet:function (e) {
                    return showTime(e.mydate)
                }
            }
            ,{field: 'subject', title: '物品名称', width: 300, edit: "text"}
            ,{field: 'message', title: '备注', width: 200, edit: "text"}
        ]]
    });
    //单元格编辑
    table.on('edit(MyorderTable)',function (obj) {
            console.log("开始单元格编辑")
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑字段名
            console.log(obj.data);  //所在行的所有数据
            $.ajax({
                type:"post",
                url: "/myorders/update1",
                data: {
                    field:obj.field,
                    value:obj.value,
                    id:obj.data.orderId
                },
                dataType:"json",
                success:function (res) {
                    if (res.message == "ok"){
                        var layer = layui.layer;
                        layer.msg("修改成功")
                    }
                }
            })
        }
    )
});