DevExtreme学习笔记(一) DataGrid中数据提交注意事项

1.数据提交的{}数据需转化json格式

syncPost('/controller/action', { values: JSON.stringify({d:x}) }, function (res) {
                        if (res.Data&&res.Data.Status || res.Status) {
                            E('PopupContainer').dxPopup('instance').hide();
                            if (E(gridId).html().length > 0) {//
                                E(gridId).dxDataGrid('instance').refresh();
                            }
                        } else {
                            errNotify("重复添加");
                        }
                    }, function (err) {
                        errNotify("不能重复添加");
                    });

2.时间控件联动写法

   window.startDateBox = $('#start').dxDateBox({
        acceptCustomValue: false,
        displayFormat: __DateFormat,
        min: window.startDate,//限定时间值
        onValueChanged: function (e) {
            E('end').dxDateBox('instance').option("min", e.component.option("value"));//开始时间选择变化结束时间的最小值修改
        }
    }).dxDateBox('instance');
    window.endDateBox = $('#end').dxDateBox({
        acceptCustomValue: false,
        displayFormat: __DateFormat,
        max: window.endDate//限定时间值
    }).dxDateBox('instance');

3.popup自定义弹出配置

   var popup = dxConfig.popup("选择信息");
    popup.width = 900;
    popup.height = 600;
    popup.contentTemplate = function (container) {
        var grid = initGrid("/getinfo", "popup_info", cityid, 2);//popup_info跟下面追加的div的id对应
        container.append($('<div id="popup_info"/>').css({ "height": "90%" }).dxDataGrid(grid));
        container.append($('<div id="plan-form"><div class="dx-fieldset" >
<div class="row"><div class="col-sm-4 col-lg-4"> <div class="dx-field">
                        <div class="dx-field-label">内容</div>
                        <div class="dx-field-value" style="margin-left:-10%;70%; border:1px solid #eee;">
                           <input  autocomplete="off"  readonly class="dx-texteditor-input" role="textbox" type="text" id="name">
                        </div></div> </div>
                <div class="col-sm-4 col-lg-4"><div class="dx-field">
                        <div class="dx-field-label">开始日期</div>
                        <div class="dx-field-value">
                            <div id="start"></div>
                        </div></div></div>
                <div class="col-sm-4 col-lg-4">
                    <div class="dx-field">
                        <div class="dx-field-label">结束日期</div>
                        <div class="dx-field-value"> <div id="end"></div>
                        </div></div></div>
                 </div></div ></div >'));
    };//弹出框中添加确定和取消按钮
    popup.toolbarItems = [
        {
            toolbar: 'bottom',
            widget: 'dxButton',
            options: {
                text: '确定',
                elementAttr: {
                    'style': 'background-color:#1BBC9B;color:white;'
                },
                icon: 'fa fa-save',
                hoverStateEnabled: true,
                onClick: function (e) {
                    var StartDate = window.startDateBox._options.value ? startDateBox._options.value : null;
                    var EndDate = window.endDateBox._options.value ? endDateBox._options.value : null;
                    var stagename = $("#name").val();
                    if (!stagename) {
                        errNotify("请选择内容");
                        return;
                    }
                    if (!StartDate) {
                        errNotify("请选择开始时间");
                        return;
                    }
                    if (!EndDate) {
                        errNotify("请选择结束时间");
                        return;
                    }
                    window.SelectAddData.StartDate = StartDate;
                    window.SelectAddData.EndDate = EndDate;
                    syncPost('/controller/Insert', { values: JSON.stringify({d:x}) }, function (res) {
                        if (res.Data&&res.Data.Status || res.Status) {
                            E('PopupToolsContainer').dxPopup('instance').hide();
                            if (E(gridId).html().length > 0) {//
                                E(gridId).dxDataGrid('instance').refresh();
                            }
                        } else {
                            errNotify("该不能重复添加");
                        }
                    }, function (err) {
                        errNotify("不能重复添加");
                    });
                    //if (typeof (fn) == "function")
                    //    fn(e);
                    //E('PopupToolsContainer').dxPopup('instance').hide();
                }
            },
            location: 'after'
        }, {
            toolbar: 'bottom',
            widget: 'dxButton',
            options: {
                text: '取消',
                icon: 'fa fa-undo',
                hoverStateEnabled: true,
                onClick: function () {
                    E('PopupToolsContainer').dxPopup('instance').hide();
                }
            },
            location: 'after'
        }
    ];
    popup.onHidden = function () {
        if (typeof hiddenFunc == "function") hiddenFunc();
    }
    E("PopupToolsContainer").dxPopup(popup);

4.HttpGet传递数组参数，url会转换为以,号分割的字符串可后台转换为数组变例