HAP——新增和更新功能实现

对一些初学者来说新增和编辑功能操作起来比较难，比如我，下面我们来看看新增和更新如何实现

这里我以弹窗为例子

前端：

新增按钮

 <div id="new"  style="border-top: 1px solid #ccc;border-right: 1px solid #ccc;border-left: 1px solid #ccc;height: 25px; ">
                        <span class="btn btn-primary" type="button" onclick="newFunction()" style="color:darkgreen ;"><i class="fa"></i>新建</span>
                    </div>
                    <script>kendo.bind($('#new'), viewModel);</script>

新增js

newFunction=function () {
        var onClose = function () {
            $("#batchDiv1").empty();
        }
        var dialog = $("#batchDiv1").kendoWindow({
            actions: ["Close"],
            width: 1000,
            height: 460,
            title: '新建订单',
            visible: false,
            iframe: true,
            modal: true,
            content: '${base.contextPath}/sales/om_order_lines.html'
        }).data("kendoWindow");
        dialog.center().open();
    }
</script>
<div id="batchDiv1"></div>

这里我更新和新建弹出的窗口都是一个

编辑按钮

{
                field: "orderNumber",
                title: '<@spring.message "OmOrderHeaders.orderNumber"/>',
                width: 120,
                template: function (dataItem) {
                    if (!dataItem.orderNumber)
                        return '';
                    if (!!dataItem) {
                        return '<a style="text-decoration : underline;color : blue;cursor:pointer" onclick="detail('+dataItem.headerId+')"><span style="color: blue">'
                            + dataItem.orderNumber
                            + '</span></a>';
                    }
                }
            },

编辑js

 //弹窗
    function detail(headerId) {
        var onClose = function () {
            $("#batchDiv1").empty();
        }
        var dialog = $("#batchDiv1").kendoWindow({
            actions: ["Close"],
            width: 1000,
            height: 460,
            title: '销售详细订单',
            visible: false,
            iframe: true,
            modal: true,
            content: '${base.contextPath}/sales/om_order_lines.html?headerId='+headerId
        }).data("kendoWindow");
        dialog.center().open();
    }

更新js

 //弹窗
    function detail(headerId) {
        var onClose = function () {
            $("#batchDiv1").empty();
        }
        var dialog = $("#batchDiv1").kendoWindow({
            actions: ["Close"],
            width: 1000,
            height: 460,
            title: '销售详细订单',
            visible: false,
            iframe: true,
            modal: true,
            content: '${base.contextPath}/sales/om_order_lines.html?headerId='+headerId
        }).data("kendoWindow");
        dialog.center().open();
    }

主要的区别是传不传值的问题

到弹窗页面可以保持新增和更新
我们来到om_order_lines.html页面

保存按钮被新增和更新共用

保存按钮

 <div style="float: left;margin-right: 5px;">
                <button class="btn btn-default " id="save" onclick="saveFun()">保存</button></div>

保存js

   //头保存
    function saveFun(){
        var json=viewModel.model.toJSON();
        // alert(viewModel.model.headerId)
        if(viewModel.model.headerId){//判断传过来的值不为空
            json.__status='update';
        }else{
            json.orderStatus='NEW';//字段默认值
            json.heaerId='';
            json.__status='add';
        }
        //必填
        if(viewModel.model.orderNumber==null || viewModel.model.orderNumber==0){
            kendo.ui.showInfoDialog({message:'请填写订单编号'})
            return;
        }
        if(viewModel.model.orderDate==null || viewModel.model.orderDate==0){
            kendo.ui.showInfoDialog({message:'请填写日期'})
            return;
        }
        if(viewModel.model.companyId==null || viewModel.model.companyId==0){
            kendo.ui.showInfoDialog({message:'请选择公司'})
            return;
        }
        if(viewModel.model.customerId==null || viewModel.model.customerId==0){
            kendo.ui.showInfoDialog({message:'请选择客户'})
            return;
        }
        $.ajax({
            url:BaseUrl +"/hap/om/order/headers/submit",
            type:"post",
            data:kendo.stringify([json]),
            contentType: "application/json",
            success:function(info){
                location.replace('om_order_lines.html?headerId='+info.rows[0].headerId);
            }
        });
    }

后端实现：
controller层这里是有公司自带的美滋滋（因为只需要保存一张表的东西）

  /**
     * 保存头
     *
     * @param omOrderHeaders 订单头集合
     * @param result
     * @param request
     * @return
     */
    @RequestMapping(value = "/hap/om/order/headers/submit")
    @ResponseBody
    public ResponseData update(@RequestBody List<OmOrderHeaders> omOrderHeaders, BindingResult result, HttpServletRequest request) {
        IRequest requestCtx = createRequestContext(request);
        return new ResponseData(service.batchUpdate(requestCtx, omOrderHeaders));
    }