Сетка данных Jquery EasyUI - позволяет встроенное редактирование
Редактируемый функция недавно добавила к сетке данных (DataGrid) из. Это позволяет пользователю добавлять новую строку в сетке данных (DataGrid). Пользователи также могут обновить одну или несколько строк.
Этот учебник покажет вам, как создать сетку данных (DataGrid) и встроенный редактор.
Создание сетки данных (DataGrid)
$ (Function () { $ ( '# Tt'). Datagrid ({ Название: 'редактируемые DataGrid', iconCls: 'значок-редактировать', ширина: 660, высота: 250, singleSelect: правда, idField: 'Itemid', URL: 'datagrid_data.json', Колонки: [[ {Field: 'Itemid', название: 'Item ID', ширина: 60}, {Field: 'PRODUCTID', название: "продукта", ширина: 100, форматировщик: функция (значение) { для (вар я = 0; я <products.length; я ++) { если (продукты [I] .productid == значение) возвращенные продукты [I] .name; } возвращаемое значение; }, Редактор: { тип: 'ComboBox', Варианты: { valueField: 'PRODUCTID', TextField: 'имя', данные: продукты, Требуются: правда } } }, {Field: 'Коек Стоимость', название: "Прайс-лист", ширина: 80, выравнивание: «право», редактор: {типа: 'numberbox', опции: {точность: 1}}}, {Field: 'unitcost', название: "Стоимость единицы", ширина: 80, выравнивание: «правильный», редактор: 'numberbox'}, {Field: 'attr1', название: 'Атрибут', ширина: 150, редактор: 'текст'}, {Field: "Статус", название: "Статус", ширина: 50, выравнивание: 'центр', Редактор: { Тип: "флажок", Варианты: { на: 'P', выкл: '' } } }, {Поле: "действие", название: "Действие", ширина: 70, выравнивание: "центр", форматировщик: функция (значение, строка, индекс) { если (row.editing) { переменная s = '<a href="#" onclick="saverow(this)"> Сохранить </a>'; вар с = '<a href="#" onclick="cancelrow(this)"> Отмена </a>'; Return сек + с; } Else { вар е = '<a href="#" onclick="editrow(this)"> Edit </a>'; переменная d = '<a href="#" onclick="deleterow(this)"> Удалить </a>'; возвращать е + D; } } } ]], onBeforeEdit: функция (индекс, строки) { row.editing = TRUE; updateActions (индекс); }, onAfterEdit: функция (индекс, строки) { row.editing = ложь; updateActions (индекс); }, onCancelEdit: функция (индекс, строки) { row.editing = ложь; updateActions (индекс); } }); }); Функция updateActions (индекс) { $ ( '# Tt'). Datagrid ( 'updateRow', { Индекс: индекс, ряд: {} }); }
Чтобы включить встроенное редактирование сетки данных, вы должны добавить свойство в колонке редактора. Редактор (главный редактор) говорит сетки данных (DataGrid) Как редактировать поле и как сохранить значение поля. Как вы можете видеть, три редактора (редактора) Мы определяем: текст, выпадающий и флажок.
Функция getRowIndex (цель) { вар тр = $ (целевая) .closest ( 'tr.datagrid-строка'); вернуть ParseInt (tr.attr ( 'DataGrid-рядного индекс')); } Функция editrow (цель) { $ ( '# Tt') DataGrid ( 'BeginEdit', getRowIndex (цель)) .; } Функция deleterow (цель) { $ .messager.confirm ( 'Confirm', 'Вы уверены?', Функция (г) { если (г) { $ ( '# Tt') DataGrid ( 'deleteRow', getRowIndex (цель)) .; } }); } Функция saverow (цель) { $ ( '# Tt') DataGrid ( 'EndEdit', getRowIndex (цель)) .; } Функция cancelrow (цель) { $ ( '# Tt') DataGrid ( 'CancelEdit', getRowIndex (цель)) .; }