Question

我正在开发一个处理交互式网格的Web应用程序。我正在使用Kendo UI来显示网格和进行CRUD操作。我是Kendo 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 },
    ]
});
}

使用模型指定可编辑和不可编辑的字段，除非您正在进行本地调用，否则您的数据源数据参数不会使用，服务器调用将其作为上述函数调用。

并且您的Controller操作应如下所示:(我假设您使用的是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

使用jquery和Ajax的kendo ui crud操作

1 个答案: