Блог

У меня есть следующий макет для таблицы 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";
          });
 

моя цель состояла в том, чтобы иметь выпадающий список для поля имени элемента, и когда пользователь выбирает значение, другие поля автоматически заполняются, но я пытался сначала выяснить, как это сделать из кода элемента, поскольку это казалось более простым (и я оставляю это как план Б)

Мне нужно было автоматически ввести имя, адрес электронной почты и номер мобильного телефона учащегося на основе выбранного идентификатора учащегося из выпадающего списка.

Вот код полей в сетке:

 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 insertResu<
          },
          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 editResu<
          },
          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" }
]
 

Хотя функция GetStudentDetails для извлечения данных учащихся с помощью AJAX-вызова не была асинхронной:

 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;
}