根据jsgrid中的字段值自动填充其他字段答案

【问题标题】：autofill the other fields based on a field's value in jsgrid根据jsgrid中的字段值自动填充其他字段
【发布时间】：2021-05-12 09:45:09
【问题描述】：

我有一个 jsgrid 表的以下布局：

我想让其余的列根据项目代码的值填充。我能够通过 AJAX 从数据库表中检索项目名称的值，但我无法异步更新其他字段的值。我已经尝试了很多方法，例如允许我为项目名称设置默认值，但无法在 ajax 请求完成时更新它。

这是我用来验证从表中检索到的值的原型

insertTemplate: function () {
                var $insertControl = jsGrid.fields.text.prototype.insertTemplate.call(this);

                $insertControl.change(function () {
                    var item_code = $(this).val();
                    //alert(item_code);
                    $.ajax({
                    type: "POST",
                    url: 'itemquery.php',
                    data: { item_code : item_code },
                    success: function(data)
                    {
                        itemName = data;
                        alert(itemName);
                    }
                });
              });

                return $insertControl;
            },

这是我在项目名称字段中设置默认值的代码

insertTemplate: function() { 
          return $("<input>").attr("type", "text").attr("value", function(){
            return "test value";
          });

我的目标是为项目名称字段创建一个下拉列表，当用户选择一个值时，其他字段会自动填充，但我试图首先从项目代码中弄清楚如何做到这一点，因为它看起来更简单（并且我将其作为 B 计划保留）

【问题讨论】：

标签： php jquery ajax jsgrid

【解决方案1】：

我需要根据从下拉列表中选择的 StudentId 自动填写学生的姓名、电子邮件地址和手机号码。

这是网格中字段的代码：

fields: [
      {
          name: "StudentId",
          insertTemplate: function () {
              var grid = this._grid;
              var insertResult = jsGrid.fields.select.prototype.insertTemplate.call(this, arguments);

              insertResult.on("change", function () {
                  const selectedValue = insertResult.val();
                  if (selectedValue != 0) {
                      const data = GetStudentDetails(selectedValue);
                      grid.option("fields")[1].insertControl.val(data.Name);
                      grid.option("fields")[2].insertControl.val(data.EmailAddress);
                      grid.option("fields")[3].insertControl.val(data.MobileNo);
                  }
                  else {
                      grid.option("fields")[1].insertControl.val("");
                      grid.option("fields")[2].insertControl.val("");
                      grid.option("fields")[3].insertControl.val("");
                  }
              });
              return insertResult;
          },
          editTemplate: function (value) {
              var grid = this._grid;
              var editResult = jsGrid.fields.select.prototype.editTemplate.call(this, value);

              editResult.on("change", function () {
                  const selectedValue = editResult.val();
                  if (selectedValue != 0) {
                      const data = GetStudentDetails(selectedValue);
                      grid.option("fields")[1].editControl.val(data.Name);
                      grid.option("fields")[2].editControl.val(data.EmailAddress);
                      grid.option("fields")[3].editControl.val(data.MobileNo);

                  }
                  else {
                      grid.option("fields")[1].editControl.val("");
                      grid.option("fields")[2].editControl.val("");
                      grid.option("fields")[3].editControl.val("");
                  }
              });
              return editResult;
          },
          type: "select",
          title: "StudentId",
          items: studentIds,
          valueField: "Id",
          textField: "Id",
          validate: {
              message: "Field StudentId is required",
              validator: function (value)
              {
                  return value != 0;
              }
          }
      },
      { name: "Name", type: "text", title: "Name", validate: "required", readOnly: true },
      { name: "EmailAddress", type: "text", title: "Email Address", readOnly: true},
      { name: "MobileNo", type: "text", title: "Mobile Contact", readOnly: true},
      { type: "control" }
]

虽然使用 AJAX 调用获取学生数据的函数 GetStudentDetails 不是异步的：

function GetStudentDetails(id) {
    var student = {};
    $.ajax({
        type: "GET",
        url: "/Students/Details",
        data: { "id": id },
        dataType: "json",
        async: false,
        success: function (response) {
            student.Name = response.Name;
            student.EmailAddress = response.EmailAddress;
            student.MobileNo = response.MobileNo;
        },
        error: function (response) {
        }
    });
    return student;
}

【讨论】：