Kendo UI更新和创建无效

时间:2014-08-28 01:54:29

标签: javascript jquery kendo-ui kendo-grid

读取行在网格中工作正常,但在更新和创建它时根本不起作用。它没有击中控制器。我已经提供了代码,请您查看以下代码的错误。

    The below json is return from the read webservice
    -------------------------------------------------

 {"items":[{"id":1,"publisherName":"Srini","active":false},  {"id":2,"publisherName":"Ram","active":false}]}


    <!-- JAVASCRIPT FILES -->
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../jquery/plug-ins/colorbox-modal/jquery.colorbox.js"></script>
    <script src="../jquery/plug-ins/colorbox-modal/colorbox.js"></script>
    <script src="../jquery/plug-ins/jquery.placeholder.js"></script>
    <script src="../jquery/plug-ins/jquery.jOrgchart.js"></script>      

    <script src="../bootstrap/js/bootstrap-prettyCheckable.js"></script>    
    <script src="../bootstrap/plug-ins/bootstrap-datepicker.js"></script>   
    <script src="../bootstrap/plug-ins/bootstrap-switch.js"></script>
    <script src="../bootstrap/js/bootstrap-downloadFile.js"></script>
    <script src="../bootstrap/js/bootstrap-select.js"></script>
    <!-- Kendo UI Web combined JavaScript -->
    <script src="../kendoUI/js/kendo.web.min.js"></script>      



    <div id="example">
            <div id="grid"></div>

            <script style="text/javascript">
        jq(document).ready(function () {
        dataSource = new kendo.data.DataSource({
            dataType: "json",
            transport: {
                read:  {
                     url:BASE_URL + "admin/searchPublishers.htm",
                    type: "GET",
                    cache: false
                },
                update: {
                    url:BASE_URL + "admin/updatePublisher.htm",
                    type: "POST"
                },
                create: {
                    url: BASE_URL + "admin/createPublisher.htm",
                    type: "POST"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    fields: {
                        id: {
                            type: "number"
                        },
                        publisherName: {
                            type: "string"
                        }
                    }
                },
                data: "items",
                total: "items.length" //total amount of records. This is needed for paging
            },
            pageSize: 20
        });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 550,
            toolbar: ["create"],
            columns: [
                   { field: "publisherName", title: "Publisher", width: "130px" },
                    { command: ["edit"], title: "Actions", width: "150px" }
               ],
            editable: "inline"
            });

        });
            </script>
        </div>


 Java Controller
 ---------------

    package com.wad.webui.controller;

    import java.util.ArrayList;
    import java.util.List;
    import java.util.Map;

    import javax.servlet.http.HttpServletRequest;

    import org.apache.log4j.Logger;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.bind.annotation.RequestParam;

    import com.wad.core.model.lookup.PublisherLookupItem;

    /**
     * @author Srinivasa.K
     * 
     */
    @Controller
    public class PublisherController extends BaseController {

        private static final Logger logger = Logger
                .getLogger(PublisherController.class);

        private static final List<PublisherLookupItem> publishersList = new ArrayList<PublisherLookupItem>();

        static {
            PublisherLookupItem pb = new PublisherLookupItem();

            pb.setId(1);
            pb.setPublisherName("Srini");

            PublisherLookupItem pb1 = new PublisherLookupItem();

            pb1.setId(2);
            pb1.setPublisherName("Ram");

            publishersList.add(pb);
            publishersList.add(pb1);
        }

        @RequestMapping(value = "/admin/searchPublishers.htm", method = RequestMethod.GET, produces = "application/json")
        public @ResponseBody
        JsonDataWrapper<PublisherLookupItem> searchPublishers(
                HttpServletRequest request) throws Exception {
            logger.debug("searchPublishers method ");

            JsonDataWrapper<PublisherLookupItem> result = new JsonDataWrapper<PublisherLookupItem>(
                    publishersList);

            return result;
        }

        @RequestMapping(value = "/admin/updatePublisher.htm", method = RequestMethod.POST, produces = "application/json")
        public @ResponseBody
        PublisherLookupItem updatePublisher(
                @RequestBody PublisherLookupItem target, HttpServletRequest request)
                throws Exception {

            System.out.println("updatePublisher method :" + target);

            publishersList.add(target);
            return target;

        }

        @RequestMapping(value = "/admin/createPublisher.htm", method = RequestMethod.POST, produces = "application/json")
        public @ResponseBody
        PublisherLookupItem createPublisher(
                @RequestBody PublisherLookupItem target, HttpServletRequest request)
                throws Exception {

            System.out.println("createPublisher method :" + target);

            publishersList.add(target);
            return target;

        }

    }

2 个答案:

答案 0 :(得分:0)

将您的创建和更新定义为函数

create: function (options) {
   var newitem=[];
    newitem.push({
        id:options.data.id,
        publisherName:options.data.publisherName,
        active:false
     });
   $.ajax({
          url: BASE_URL + "admin/createPublisher.htm",
          dataType: "json",
          type: "POST"
          cache: false,
          data:{target:Json.stringify(newitem)},
          success: function (result) {
                options.success(result); // Make sure to Return a Json back from the Server
          },
          error: function (result) {
                options.error(result);
           }
         });
},
update: function (options) {
  // do as the create 
},

从您的服务器方法createPublisher返回Json Back

<强>更新 像这样定义你的架构

schema: {
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: true },
                    publisherName: { type: "string", validation: { required: true } },
                    active: { type: "boolean"}
                }
            }
        },

答案 1 :(得分:0)

您的DataSource选项中缺少schema.model.id

schema: {
    model: {
        id: "id",
        fields: {
            ...

DataSource使用设置为id的任何字段来确定该项是否为“new”。如果将ID字段设置为默认值(未定义或0),则将其发送到要创建的服务器。如果没有schema.model.is设置,它基本上会禁用创建。