Как прикрепить обратный вызов, когда изменение выбора (onSelectChange) для зависимых выборов использует jsGrid (облегченная сетка jQuery Plugin)

jsGrid — это облегченный элемент управления сеткой данных на стороне клиента, основанный на jQuery. Он поддерживает основные сеточные операции, такие как вставка, фильтрация, редактирование, удаление, разбиение по страницам и сортировка. jsGrid является гибким и позволяет настраивать его внешний вид и компоненты. Это хорошо документировано и множество доступных опций для изменения и модификации jsGrid для удовлетворения ваших потребностей.

В некоторых случаях вам нужно будет создать пользовательские зависимые селекторы, которые выполняют некоторый код (независимо от данных таблицы) и будут делать что-то дополнительное в вашем приложении. К сожалению, это не очень хорошо документированная функция, и некоторым разработчикам может потребоваться некоторое время, чтобы найти решение для добавления обратного вызова onchange к динамически генерируемым элементам select jsGrid.

Присоединение к событиям изменения динамически генерируемых элементов выбора

Чтобы присоединить прослушиватель событий к элементу, сгенерированному jsGrid, вам нужно сосредоточиться на обратных вызовах * Template каждого поля. Например, учитывая jsGrid, который позволяет вставлять и редактировать некоторые данные с помощью одного элемента выбора, а именно категории, нам нужно сосредоточиться на insertTemplate а также editTemplate, Внутри обратного вызова вы можете получить элемент, выполнив функцию вызова jsGrid.fields.select.prototype.где тип представления должен быть заменен соответственно на каждом шаблоне. Функция вызова ожидает контекст this как аргумент в шаблоне вставки. В editTemplate в качестве первого аргумента он ожидает контекст this, а в качестве второго аргумента переменную-значение, полученную в качестве первого аргумента самого обратного вызова:

// Some demo data to list on the select
var CategoryList = [
{ "id": 1, "category": "Main Category A" },
{ "id": 2, "category": "Main Category B" }
];
// Initialize jsGrid
$("#jsGrid").jsGrid({
width: "100%",
inserting: true,
editing: true,
sorting: true,
paging: true,
// Some dummy data
data: [
{
"id": 1,
"category": "Category A"
}
],
deleteConfirm: "Are you sure?",
fields: [
{
name: "category",
title: "Main Category",
type: "select",
items: CategoryList,
valueField: "category",
textField: "category",
insertTemplate: function () {
// Retrieve the DOM element
// Note: prototype.insertTemplate
var $insertControl = jsGrid.fields.select.prototype.insertTemplate.call(this);
// Attach onchange listener !
$insertControl.change(function () {
var selectedValue = $(this).val();
alert(selectedValue);
});
return $insertControl;
},
editTemplate: function (value) {
// Retrieve the DOM element (select)
// Note: prototype.editTemplate
var $editControl = jsGrid.fields.select.prototype.editTemplate.call(this, value);
// Attach onchange listener !
$editControl.change(function(){
var selectedValue = $(this).val();
alert(selectedValue);
});
return $editControl;
}
},
{ type: "control",  editButton: false, modeSwitchButton: false }
]
});

Обратите внимание, что предыдущий пример применяется только для editTemplate и insertTemplateТаким образом, в соответствии с тем, как вы работаете, вы можете сделать то же самое с другими шаблонами, например:

headerTemplate: function() { ... },
itemTemplate: function(value, item) { ... },
filterTemplate: function() { ... },
insertTemplate: function() { ... },
editTemplate: function(value, item) { ... },