Расширение jQuery EasyUI -редактируемый DataGrid

jQuery EasyUI 扩展Расширение jQuery EasyUI

Использование

Создайте таблицу данных (datagrid) в HTML-тегах

    <table id="tt" style="width:600px;height:200px"
            title="Editable DataGrid"
            singleSelect="true">
        <thead>
            <tr>
                <th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
                <th field="productid" width="100" editor="text">Product ID</th>
                <th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
                <th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
                <th field="attr1" width="150" editor="text">Attribute</th>
            </tr>
        </thead>
    </table>

Сделайте таблицу данных (datagrid) редактируемой

$('#tt').edatagrid({
    url: 'datagrid_data.json',
    saveUrl: ...,
    updateUrl: ...,
    destroyUrl: ...
});

Теперь вы можете дважды щёлкнуть строку таблицы данных, чтобы начать редактирование. Вы также можете задать свойства saveUrl, updateUrl, destroyUrl для автоматической синхронизации данных между клиентом и сервером.

Свойства

Эти свойства наследуются от таблицы данных (datagrid). Ниже перечислены свойства, добавленные для редактируемой таблицы данных (edatagrid).

Name Type Описание Значение по умолчанию
destroyMsg объект Сообщение диалогового окна подтверждения, отображаемое при удалении строки. 
destroyMsg:{
    norecord:{    // when no record is selected
        title:'Warning',
        msg:'No record is selected.'
    },
    confirm:{    // when select a row
        title:'Confirm',
        msg:'Are you sure you want to delete?'
    }
}
autoSave логическое значение Если установлено значение true, отредактированная строка автоматически сохраняется при щелчке вне таблицы данных. false
url string URL-адрес для получения данных с сервера. null
saveUrl string URL-адрес для сохранения данных на сервере и возврата добавленной строки. null
updateUrl string URL-адрес для обновления данных на сервере и возврата обновлённой строки. null
destroyUrl string URL-адрес для отправки параметра 'id' на сервер для удаления строки. null
tree selector Отображает селектор дерева соответствующего древовидного компонента. null
treeUrl string URL-адрес для получения данных дерева. null
treeDndUrl string URL-адрес для обработки операций перетаскивания. null
treeTextField string Определяет имя текстового поля дерева. name
treeParentField string Определяет имя поля родительского узла дерева. parentId

Events

Эти события наследуются от таблицы данных (datagrid). Ниже перечислены события, добавленные для редактируемой таблицы данных (edatagrid).

Name Parameters Описание
onAdd index,row Срабатывает при добавлении новой строки.
onEdit index,row Срабатывает при редактировании строки.
onBeforeSave index Срабатывает перед сохранением строки; верните false, чтобы отменить действие сохранения.
onSave index,row Срабатывает при сохранении строки.
onDestroy index,row Срабатывает при уничтожении строки.
onError index,row Срабатывает при возникновении ошибки сервера.
Сервер должен вернуть строку со свойством 'isError', установленным в true, чтобы указать, что произошла ошибка.

Пример кода:

//server side code
echo json_encode(array(
    'isError' => true,
    'msg' => 'error message.'
));

//client side code
$('#dg').edatagrid({
    onError: function(index,row){
        alert(row.msg);
    }
});

Методы

Эти методы расширяют таблицу данных (datagrid). Ниже перечислены методы, добавленные или переопределённые для редактируемой таблицы данных (edatagrid).

Name Parameters Описание
options none Возвращает объект options.
enableEditing none Включает редактирование таблицы данных (datagrid).
disableEditing none Отключить редактирование таблицы данных (datagrid).
editRow index Редактировать указанную строку.
addRow index Добавить новую строку по указанному индексу строки.
Если параметр index не указан, добавьте новую строку в последнюю позицию.

Пример кода:

// append an empty row
$('#dg').edatagrid('addRow');

// append an empty row as first row
$('#dg').edatagrid('addRow',0);

// insert a row with default values
$('#dg').edatagrid('addRow',{
    index: 2,
    row:{
        name:'name1',
        addr:'addr1'
    }
});
saveRow none Сохранить отредактированную строку и отправить её на сервер.
cancelRow none Отменить редактирование строки.
destroyRow index Уничтожить текущую выбранную строку.
Если параметр index не указан, уничтожить все выбранные строки.

Пример кода:

// destroy all the selected rows
$('#dg').edatagrid('destroyRow');

// destroy the first row
$('#dg').edatagrid('destroyRow', 0);

// destroy the specified rows
$('#dg').edatagrid('destroyRow', [3,4,5]);

Скачать примеры jQuery EasyUI

jquery-easyui-edatagrid.zip

jQuery EasyUI 扩展Расширение jQuery EasyUI Другие расширения