kendo ui crud 操作仅使用 jquery 和 Ajax

Question

我正在开发一个处理交互式网格的 Web 应用程序。我正在使用 Kendo UI 来显示网格和执行 CRUD 操作。我是剑道 UI 的新手。我们正在使用 jquery 执行数据库调用，仅 Ajax。我能够让它从数据库中读取数据并显示它。但我被困在 CRUD 操作中。如何获取特定行或特定单个数据更改的事件并执行更新。请帮助我了解如何进行 crud 操作。我在任何地方都找不到它的详细信息。第一列中有 8 个参数。用户应该能够更改除参数之外的其余数据。

以下是 Grid 的代码。 CreateWBDGridData 触发数据库服务调用并创建表。 gridSource是通过Json转换函数从数据库中获取的JSON数据。

$(document).ready(function()
{
var param ="HOLE_DIAMETER|4.875_CASING_ID|5.5_GRAVEL_PACK|NET_PERF_THICKNESS|PERF_DIAMETER|PERF_GRAVEL_PERM_@19k|GRAVEL_BETA_FACTOR_@19K|SHOT_DENSITY";
$.when(GetWBDGridDataByWell(param)).then(function (data) {
});
});

function CreateWBDGridData(gridSource) {
if (gridSource == undefined) return;
console.log(gridSource);
$("#grid").kendoGrid({
    dataSource: {
        data: gridSource,
        schema: {
            model: {
                fields: {
                    ParameterName: { type: "string" },
                    Zone_1: { type: "number" },
                    Zone_2: { type: "number" },
                    Zone_3: { type: "number" },
                }
            }
        },
        //  pageSize: 20
    },
    //height: 550,
    //scrollable: true,
    //sortable: true,
    //filterable: true,
    //reorderable: true,
    resizable:true,
    //pageable: {
    // input: true,
    //numeric: false
    //},
    columns: [
        { field: "ParameterName", title: "Lucius 01", width: 300 },
        { field: "Zone_1", title: "Zone 1", width: 100 },
        { field: "Zone_2", title: "Zone 2", width: 100 },
        { field: "Zone_3", title: "Zone 3", width: 100 },
    ]
});
}

控制器

var dspstore = "System.Sources.Db.MsSql.DSPStore";

function GetWBDGridData(queryName, param) {
var varData = CreateParamQuery(dspstore, queryName, param);
CallService(GetWBDGridDataCompleted, varData);
}

var GetWBDGridDataCompleted = function (result) {
if (varDataType == "json") {
    var myItems = $.parseJSON(result.GetDataItemsResult);
    CreateWBDGridData(myItems);

}
}

服务调用

function CallService(ServiceCompleted, varData) {
$.support.cors = true;
$.ajax({
    context: this,
    disableCaching: false,
    headers: {
        "Access-Control-Allow-Origin": '*',
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    type: varType, //GET or POST or PUT or DELETE verb
    url: varUrl, // Location of the service
    data: varData, //Data sent to server
    //contentType: varContentType, // content type sent to server
    dataType: varDataType, //Expected data format from server
    processdata: varProcessData, //True or False
    success: function (msg) {//On Successfull service call
        ServiceCompleted(msg);
    },
    error: ServiceFailed// When Service call fails
});
}

Answer 1

好的，据我了解，第一列有 8 个参数，还有 3 个用户可以编辑的项目，如果按照以下方式进行编辑。

$("#grid").kendoGrid({
    dataSource: {
      transport: {
         read: function (options) {
             $.ajax({
                url: "/Your Controller/your read Action",
                dataType: "json",
                cache: false,
                success: function (result) {
                  options.success(result);
                },
                error: function (result) {
                  options.error(result);
                 }
               });
             },
        update: function (options) {
             $.ajax({
                url: "/Your Controller/your Update Action",
                dataType: "json",
                cache: false,
                data:{model:options.data.models},
                success: function (result) {
                  options.success(result);
                },
                error: function (result) {
                  options.error(result);
                 }
               });
             },
          parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
              return { models: kendo.stringify(options.models) };
              }
            }
          },
        schema: {
          model: {
            fields: {
             ParameterName: { type: "string",editable: false },
             Zone_1: { type: "number",editable: true, validation: { required: true } },
             Zone_2: { type: "number",editable: true, validation: { required: true } },
             Zone_3: { type: "number" ,editable: true, validation: { required: true }},
                }
            }
        },
         pageSize: 10
    },
    resizable:true,
    columns: [
        { field: "ParameterName", title: "Lucius 01", width: 300 },
        { field: "Zone_1", title: "Zone 1", width: 100 },
        { field: "Zone_2", title: "Zone 2", width: 100 },
        { field: "Zone_3", title: "Zone 3", width: 100 },
    ]
});
} 

使用模型来指定可编辑和不可编辑的字段，并且除非您进行本地调用，否则不会使用您的数据源数据参数，要进行服务器调用，请将其作为函数调用，如上所示。

您的控制器操作应如下所示：（我假设您使用 MVC）

 [HttpGet]
 public ActionResult ReadGridJson()
 {                
     return Json(yourlist, JsonRequestBehavior.AllowGet);
 }

 [HttpGet]
 public ActionResult UpdateGridJson(YourModelType model)
 {
     //update the DB and return the updated item
     return Json(updateItem, JsonRequestBehavior.AllowGet);
 }

希望这会有所帮助，有关更多信息，请查看 API DOC http://docs.telerik.com/kendo-ui/api/web/grid