DevExtreme學習筆記(一) DataGrid中注意事項

1.阻止cell編輯

config.onEditorPreparing = function (e) {
if (e.dataField === 'xx' && e.row.data.Id) {//判斷是不是某一列
e.cancel = true;
return;
}
};

2.配置子項

config.masterDetail = {
            enabled: true,
            template: function (container, info) {
                var detailConfig = getProjectContactsConfig(info.data);//JSON.stringify(info.data)
                detailConfig.masterRow = info.data;//緩存父級row對象給detailGrid
                detailConfig.gridId = 'master-grid-Proj-' + info.data.Id;
                var $grid=$('<div id="' + detailConfig.gridId +'">').dxDataGrid(detailConfig);
                detailConfig.component = $grid.dxDataGrid('instance');//$(detailConfig.gridSelector).dxDataGrid('instance');
                $grid.appendTo(container);
            }
        };

　　3.編輯新行注意事項和選中行事件

config.onInitNewRow = function (e) {
            e.data.ProjId = row.Id;
        };//編輯新行時父Id賦值

        config.onRowClick = function (e) {
            if (e.rowType !== "totalFooter") {
                e.component.selectRows();
                e.component.selectRowsByIndexes(e.component.getRowIndexByKey(e.key));
            }
        };//選中行事件

4.第一行選中

config.onContentReady = function (e) {
            //默認選中控件第一行
            if (e.component.getVisibleRows().length > 0)
                e.component.selectRows(e.component.getVisibleRows()[0].key);
        };

5.時間值可編輯時要在config初始化時格式轉換

var config = dxConfig.editGrid({
            url: '/XXX',
            id: id,
            onLoaded: function(res) {
                if (res.data.data) {
                    $.each(res.data.data, function(rIndex, rRow) {
                        if (rRow && rRow.StartDate) rRow.StartDate = T(rRow.StartDate, __DateFormat);
                        if (rRow && rRow.EndDate) rRow.EndDate = T(rRow.EndDate,__DateFormat);
                    });
                }
            }});//其中的__DateFormat是時間格式YYYY/MM/DD等

6.　字段下拉設置

{
                dataField: "SupProjId",
                caption: "xxx",
                allowSorting: false,
                allowHeaderFiltering: false,
                alignment: "left",
                editorOptions: {
                    showClearButton: true,
                    valueExpr: "Value",//選中值
                    displayExpr: "Text"//顯示值
                },
                cellTemplate: function (ele, info) {
                    if (info.data) {
                        ele.html(info.data.Name);//顯示值
                    }
                }

　　3.編輯模式：

config.editing.mode = 'batch';//可多行編輯右上角含保存按鈕，保存後按鈕不可編輯，只有內容更改時可保存

config.editing.mode = 'cell';列編輯可直接保存

    config.editing.mode = 'form';//表單編輯

config.editing.mode = 'popup';彈出編輯
 editing: {
            mode: "popup",
            allowUpdating: true,
            popup: {
                title: "Employee Info",
                showTitle: true,
                width: 700,
                height: 525,
                position: {
                    my: "top",
                    at: "top",
                    of: window
                }
            },
            form: {
                items: [{
                    itemType: "group",
                    colCount: 2,
                    colSpan: 2,
                    items: ["FirstName", "LastName", "Prefix", "BirthDate", "Position", "HireDate", {
                        dataField: "Notes",
                        editorType: "dxTextArea",
                        colSpan: 2,
                        editorOptions: {
                            height: 100
                        }
                    }]
                }, {
                    itemType: "group",
                    colCount: 2,
                    colSpan: 2,
                    caption: "Home Address",
                    items: ["StateID", "Address"]
                }]
            }
        }

　　

edtingmode='row'//行編輯