Пользовательский форматтер JQGrid - редактировать / сохранять / отменять без форматера: 'действие' - PullRequest
Новая
       26

Пользовательский форматтер JQGrid - редактировать / сохранять / отменять без форматера: 'действие'

0 голосов
/ 31 мая 2018

В настоящее время я работаю с asp.net, чтобы разработать страницу, где пользователь будет взаимодействовать с jqgrid версии 4.4.4.Из-за версии я не могу использовать форматтер: «действие».У меня есть собственный форматировщик, который отображает ссылку редактирования / сохранения.

У меня сейчас есть 

return "<a href='javascript:void(0)' class='anchor usergroup_name link' onclick=\"editRow('" + rowobject.id + "')\">" + 'edit' + "</a>" +" | "
          +"<a href='javascript:void(0)' class='anchor usergroup_name link' onClick=\"saveRow('" + rowobject.id + "')\">" + 'save' + "</a>";

Этот код добавляет кнопку редактирования / сохранения, которая имеет возможность редактировать/ сохранить строки.Тем не менее, я хотел улучшить функциональность, показывая только один из них одновременно.Например, если пользователь нажимает кнопку «Изменить», появится сообщение «Сохранить / Отмена», а редактирование исчезнет.

Для этого я попытался присвоить html-ссылкам идентификатор, но тогда после выполнения $ ('id') исчезнет только первая строка. Hide ().

Есть лиспособ дать каждой ссылке уникальный идентификатор, или есть лучший способ сделать это?

Спасибо за вашу помощь !!

1 Ответ

0 голосов
/ 31 мая 2018

jqGrid 4.4.4 больше пяти с половиной лет!Это не поддерживается с давних времен.Я предполагаю, что вы получаете jqGrid 4.4.4 через пакет NuGet jQuery.jqGrid .В этом случае я рекомендую вам удалить пакет и установить вместо него free-jqGrid 4.15.4.После этого вы можете использовать formatter: "actions" или template: "actions".

Если вы все еще хотите понять, как вы можете реализовать свои требования с помощью специального средства форматирования, у вас есть несколько альтернатив.Первый способ - использовать старый код, но модифицировать вызов метода editRow (или saveRow) 

return "<a href='javascript:void(0)' class='anchor usergroup_name link' onclick=\"editRow('" + rowobject.id + "')\">" + 'edit' + "</a>" +" | "
      +"<a href='javascript:void(0)' class='anchor usergroup_name link' onClick=\"saveRow('" + rowobject.id + "')\">" + 'save' + "</a>";

до 

return "<a href='javascript:void(0)' class='anchor usergroup_name link' onclick=\"editRow.call(this,'" + rowobject.id + "')\">edit</a>"+
      "<a style='display:none' href='javascript:void(0)' class='anchor usergroup_name link' onClick=\"saveRow.call(this,'" + rowobject.id + "')\">save</a>";

onclickвызываться с this, инициализированным для элемента DOM <a>, по которому пользователь щелкнул.

Внутри ваших глобальных функций editRow и saveRow вы можете использовать $(this).next().show(); или $(this).prev().show(); дляпоказать вторую ссылку и использовать $(this).hide(), чтобы скрыть текущую ссылку.Простейший код editRow и saveRow может быть следующим: 

function editRow (rowid) {
    $(this).hide()
        .next().show()
        .closest(".ui-jqgrid-btable").jqGrid("editRow", rowid);
}
function saveRow (rowid) {
    $(this).hide()
        .prev().show()
        .closest(".ui-jqgrid-btable").jqGrid("saveRow", rowid);
}

Еще один способ будет - не использовать никаких встроенных атрибутов onclick вообще.Событие click поддерживает пузырьковое событие .Это означает, что щелчок внутри любого элемента DOM сетки распространяет событие на дерево родителей.Таким образом, достаточно определить click событие в главном <table> элементе сетки.jqGrid делает это уже.Можно использовать функцию обратного вызова beforeSelectRow, которая будет вызываться из обработчика события click, зарегистрированного jqGrid.Свойство target объекта Event (второй параметр beforeSelectRow) будет элементом, по которому щелкают.Таким образом, вы можете просто проверить, есть ли у e.target класс usergroup_name, который вы используете для своих ссылок, и, если это так, выполнить свою основную работу: запустить editRow (или saveRow), скрыть / показать ссылки искоро.Посмотрите на старый ответ , который демонстрирует подход.

...