Редактируемый DataGrid в AngularJS

Есть ли какой-либо модуль AngularJS для DataGrid, который обеспечивает редактирование In-Line? В KendoUI есть один http://demos.kendoui.com/web/grid/editing-inline.html

Можно ли использовать AngularJS и KendoUI вместе?

Ответ 1

проверить ui-grid

шаблоны, виртуализация, простая привязка данных для выбора, группировки и т.д.

Ответ 2

Посмотрите на этот довольно общий пример, где я петлю сначала через строки, а затем через столбцы. затем простое изменение между диапазоном и полем ввода. http://jsfiddle.net/3BVMm/3/

это позволит вам сделать встроенное редактирование несколькими строками кода.

НО: он работает не так, как ожидалось, поскольку, похоже, есть ошибка, которую я уже разместил на angular.

Ответ 3

Вы также можете использовать смарт-таблицу.

Пример: дважды щелкните элемент в столбце баланса: http://plnkr.co/edit/QQQd2znPqh87X2oQONd9?p=preview

  label: 'Balance',
  map: 'balance',
  isEditable: true,
  type: 'number',

На домашней странице есть пример редактирования In-Line на странице Редактировать ячейку. Режим редактирования ячейки вводится с двойным щелчком.

Github: lorenzofox3/Smart-Table

Он имеет такие функции, как разбиение на страницы, сортировка, фильтрация, форматирование данных, выбор строк, а также создание простой структуры таблиц, которая упрощает стиль/настройку.

Ответ 4

Вы также можете попробовать angular -xeditable.
Для таблиц он имеет следующее:

Ответ 5

Kendo работает над AngularJS http://kendo-labs.github.io/angular-kendo/

Ответ 6

Сетка Angular Сетка может выполнять встроенное редактирование. Это директива AngularJS, поэтому подключается к вашему приложению Angular. Также поставляется с другими стандартными функциями сетки (выбор, фильтрация и т.д.).

Страница документации для редактирования здесь

Чтобы сделать редактирование, установите для параметра editable значение true в определении столбца, то есть:

colDef.editable = true;

По умолчанию сетка управляется как строковое значение. Если вы хотите выполнить пользовательскую обработку ячейки, например, чтобы преобразовать ее в целое число или выполнить проверку, вы предоставляете newValueHandler на определение столбца, то есть:

colDef.newValueHAndler = function(params) {
    var valueAsNumber = parseInt(params.newValue);
    if (isNaN(valueAsNumber)) {
        window.alert("Invalid value " + params.newValue + ", must be a number");
    } else {
        params.data.number = valueAsNumber;
    }
}

Ответ 7

Вы можете использовать директиву ng-table, чтобы оживить ваши таблицы. Он поддерживает сортировку, фильтрацию и разбивку на страницы. Заголовки заголовков с заголовками и фильтрами автоматически генерируются во время компиляции.

For example

редактируемое демо

Ответ 8

Вы можете создать свой собственный ресурс Angular. Возможно, вам не нужно искать сторонние плагины.

Я сделал базовый образец, который поддерживает: -

Inline Редактирование привязанных данных.
Добавить новую строку при попадании последней сетки.

https://plnkr.co/edit/J0PeIlLsaASer4k8owdj?p=preview

Примените простой css

.TextBoxAsLabel
{
   border: none;
   background-color: #fff;
   background: transparent;
    width:100%;
}

//for Dropdown    
.selectable::-ms-expand {   
  display: none; 
}
.selectable{
    -webkit-appearance: none;
    appearance: none;
}

надеюсь, что это сработает, lemme знает, есть ли какие-либо проблемы.

Ответ 9

Более свежие сетки с открытым исходным кодом angular, которые я вижу, это ux-angularjs-datagrid, я не пробовал, но демо выглядят многообещающими...

https://github.com/webux/ux-angularjs-datagrid