0

我是 stackoverflow 的新手,Kendo UI 的新手和 Web 开发的新手……我是昨天出生的 :)。开玩笑说我的问题并不是真正的问题,我知道论坛对特定问题的规定,但我需要帮助。

我的问题是这样的:

我改编了 Kendo UI MVC 音乐商店教程,但使用 MVC ASP.net(我与 Delphi 合作)并且它不起作用。

我有两个文件:

类别.html

   <!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
     <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

       <title>Administración de Categorías</title>

       <link href="kendo/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
       <link href="kendo/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

       <link rel="stylesheet" href="css/menuvir.css" type="text/css"/>

       <script src="kendo/js/jquery.min.js" type="text/javascript"></script>
       <script src="kendo/js/kendo.web.min.js" type="text/javascript"></script>

     </head>

     <body>

       <div id="categGrid"></div>

       <script src="js/category.js type="text/javascript"></script>      

     </body>
   </html>

Category.js

(function (window, $, kendo) {
  var getCategAsync = function () {
    var deferred = $.Deferred(),     
        translateCateg = function (data) {
          deferred.resolve($.map(data.result, function(item) {
            return {
              value: item.ID,
              text: item.Description
            };
          }));
        },
        loadCateg = function () {
          new kendo.data.DataSource({
            type: "json",
            transport: {
              read: "/w/Category?select=ID,Description"
            },
            schema: {
              data: 'result'/*,
                      total: store.config.wcfSchemaTotal*/
            }
          }).fetch(function (data) {
            translateCateg(data);
          });
        };
    window.setTimeout(loadCateg, 1);
    return deferred.promise();
  };
  var getLangAsync = function () {
    var deferred = $.Deferred(),

        translateLang = function (data) {
          deferred.resolve($.map(data.result, function(item) {
            return {
              value: item.ID,
              text: item.Description
            };
          }));
        },
    loadLang = function () {
      new kendo.data.DataSource({
        type: "json",
        transport: {
          read: "/w/Language?select=ID,Description"
        },
        schema: {
          data: 'result'/*,
                      total: store.config.wcfSchemaTotal*/
        }
      }).fetch(function (data) {
        translateLang(data);
      });
    };
    window.setTimeout(loadLang, 1);
    return deferred.promise();
  };
  var initGrid = function (categs, langs, categEditor, langEditor) {
    $("#categGrid").kendoGrid({
      sortable: true,
      groupable: false, //true,
      filterable: false, //true,
      pageable: true,
      editable: "inline",
      toolbar: ["create"],
      dataSource: {
        type: "json",
        pageSize: 10,
        serverPaging: false, //true,
        serverFiltering: false, //true,
        serverSorting: false, //true,
        sort: { field: "SortOrder", dir: "asc" },
          transport: {
            type: "json",
            read: {
              url: "/w/Category?select=ID,Description",
              type: "GET"
            }/*,
                update: {
                  url: function (data) {
                    return store.config.albumsUrl + "(" + data.AlbumId + ")"
                  },
                  type: "PUT"
                },
                destroy: {
                  url: function (data) {
                    return store.config.albumsUrl + "(" + data.AlbumId + ")";
                  },
                  type: "DELETE"
                },
                create: {
                  url: store.config.albumsUrl,
                  type: "POST" 
                } */
          },
          schema: {
            data: "result",
            //total: store.config.wcfSchemaTotal,
            model: {
              id: "ID",
              fields: {
                ID: { type: "number" },
                Description: { type: "string", validation: {required: true} },
                Language: { type: "number", defaultValue: 1 },
                SortOrder: { type: "number", defaultValue: 0 },
                Status: { type: "number", defaultValue: 0 },
                Parent: { type: "number", defaultValue: 0 }
              }
            }
          },
      },

          columns: [
              { field: "ID", title: "ID", editable: false, filterable: false, width: 20 },
              { field: "Description", title: "Descripción", filterable: false, width: 150 },
              { field: "Language", title: "Idioma", values: langs, editor: langEditor, filterable: false, width: 50 },
              { field: "SortOrder", title: "Orden", filterable: false, width: 20 },
              { field: "Status", title: "Estado", filterable: false, width: 50 },
              { field: "Parent", title: "Subcategoría de", values: categs, editor: categEditor, filterable: false, width: 150 },
              { command: ["edit", "destroy"], title: "&nbsp;", width: "160px" }
          ]
      });
  };
  // Wait for both the genres and artists lists to load.
  $.when(getCategAsync(), getLangAsync())
    .done(function(categs, langs) {
      var categEditor = function (container, options) {
        $('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
                  .appendTo(container)
                  .kendoComboBox({
                      autoBind: false,
                      dataSource: categs
                  });
          };
      var langEditor = function (container, options) {
        $('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
          .appendTo(container)
          .kendoComboBox({
            autoBind: false,
            dataSource: langs
          });
      };
      initGrid(categs, langs, categEditor, langEditor);
    });
})(window, jQuery, kendo);                      

当我执行此操作时,Firebug 控制台中没有显示任何内容并且没有错误。

怎么了 ?任何帮助表示赞赏。

在此先感谢并为我的英语感到抱歉。

更新

抱歉,我忘记在此处更新 Category.html 代码,但我的值总是正确的“id”,但它不起作用。感谢您及时的回复。

4

2 回答 2

0

好吧,对于初学者来说,您的 JQuery 正在尝试在您的 HTML 中不存在的 ID 上创建 KendoGrid

$("#categGrid").kendoGrid( 

与您的 HTML 中的任何内容都不匹配。你的意思

 $("#grid").kendoGrid({

这会发现

<div id="grid"></div>
于 2013-02-08T20:26:07.237 回答
0

我解决了这个问题。我更改了一些我错误地适应的选项。

这是有效的代码。

(function (window, $, kendo) {
  var getCategAsync = function () {
      var deferred = $.Deferred(),

          translateCateg = function (data) {
              deferred.resolve($.map(data.items, function(item) {
                  return {
                      value: item.ID,
                      text: item.Description
                  };
              }));
          },

          loadCateg = function () {
              new kendo.data.DataSource({
                  transport: {
                      read: {
                        url: "/w/Category?select=ID,Description",
                        dataType: "json",
                        type: "GET"
                      }
                  },
                  schema: {
                      data: 'result'/*,
                      total: store.config.wcfSchemaTotal*/
                  }
              }).fetch(function (data) {
                  translateCateg(data);
              });
          };

      window.setTimeout(loadCateg, 1);
      return deferred.promise();
  };

  var getLangAsync = function () {
      var deferred = $.Deferred(),

          translateLang = function (data) {
              deferred.resolve($.map(data.items, function(item) {
                  return {
                      value: item.ID,
                      text: item.Description
                  };
              }));
          },

          loadLang = function () {
              new kendo.data.DataSource({
                  transport: {                      
                      read: {
                        url: "/w/Language?select=ID,Description",
                        dataType: "json",
                        type: "GET"
                      }
                  },
                  schema: {
                      data: 'result'/*,
                      total: store.config.wcfSchemaTotal*/
                  }
              }).fetch(function (data) {
                  translateLang(data);
              });
          };

      window.setTimeout(loadLang, 1);
      return deferred.promise();
  };

  var initGrid = function (categs, langs, categEditor, langEditor) {
      $("#categGrid").kendoGrid({
          sortable: true,
          groupable: false, //true,
          filterable: false, //true,
          pageable: true,
          editable: "inline",
          toolbar: ["create"],

          dataSource: {
              type: "json",
              pageSize: 10,
              serverPaging: false, //true,
              serverFiltering: false, //true,
              serverSorting: false, //true,
              sort: { field: "SortOrder", dir: "asc" },
              transport: {                  
                  read: {
                      url: "/w/Category?select=*",
                      type: "GET",
                      dataType: "json"
                  }/*,
                  update: {
                      url: function(data) {
                        return "/w/Category?ID=" + data.ID;
                      },
                      contentType: "application/json",
                      type: "PUT"
                  },
                  destroy: {
                      url: function (data) {
                          return store.config.albumsUrl + "(" + data.AlbumId + ")";
                      },
                      type: "DELETE"
                  },
                  create: {
                      url: store.config.albumsUrl,
                      type: "POST" 
                  } */
              },
              schema: {
                  data: "result",
                  total: function(response) {
                    return response.result.length;
                  },
                  model: {
                      id: "ID",
                      fields: {
                          ID: { type: "number" },
                          Description: { type: "string", validation: {required: true} },
                          Language: { type: "number", defaultValue: 1 },
                          SortOrder: { type: "number", defaultValue: 0 },
                          Status: { type: "number", defaultValue: 0 },
                          Parent: { type: "number", defaultValue: 0 }
                      }
                  }
              },
          },

          columns: [
              { field: "ID", title: "ID", editable: false, filterable: false, width: 20 },
              { field: "Description", title: "Descripción", filterable: false, width: 150 },
              { field: "Language", title: "Idioma", values: langs, editor: langEditor, filterable: false, width: 50 },
              { field: "SortOrder", title: "Orden", filterable: false, width: 20 },
              { field: "Status", title: "Estado", filterable: false, width: 50 },
              { field: "Parent", title: "Subcategoría de", values: categs, editor: categEditor, filterable: false, width: 150 },
              { command: ["edit", "destroy"], title: "&nbsp;", width: "160px" }
          ]
      });
  };

  // Wait for both the genres and artists lists to load.
  $.when(getCategAsync(), getLangAsync())
      .done(function(categs, langs) {
          var categEditor = function (container, options) {
              $('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
                  .appendTo(container)
                  .kendoComboBox({
                      autoBind: false,
                      dataSource: categs
                  });
          };

          var langEditor = function (container, options) {
              $('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
                  .appendTo(container)
                  .kendoComboBox({
                      autoBind: false,
                      dataSource: langs
                  });
          };

          initGrid(categs, langs, categEditor, langEditor);
      });
})(window, jQuery, kendo);                      

谢谢。

于 2013-02-09T13:20:27.383 回答