'Date To' 应该是 'Date From' 模态弹出 jqgrid 的开始

Question

嗨，我在 MVC 中使用 Jqgrid，要求是这样的。在 jqgrid 的模型弹出窗口中 add/edit 一行..我有 4 列..
DateFrom, DateTo, 类型,备注
我正在使用 jquery datepicker..
我的要求
添加第一行后.. 添加第二行时.. DateFrom 字段（第二行）应该是 DateTo 的下一个日期先前添加的行的字段。

这是我的网格

    initDateEdit = function (elem) {
                setTimeout(function () {
                    $(elem).datepicker({
                        dateFormat: "m-d-yy",
                        showOn: "button",
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true
                    });
                }, 50);
    },
    initDateSearch = function (elem) {
                setTimeout(function () {
                    $(elem).datepicker({
                        dateFormat: "m-d-yy ",
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true
                    });
                }, 50);
    },

    jQuery("#dateGrid").jqGrid({
            height: 100,
            width: 1000,
            colNames: ['DateFrom', 'DateTo', 'Type', 'Remarks'],
            colModel: [

                {
                    name: 'DateFrom', index: 'DateFrom', width: 60, editable: true, sorttype: "date",
                    formatter: 'date',
                    formatoptions: {
                        srcformat: 'm/d/Y',

                    },
                    editoptions: { dataInit: initDateEdit, size: 14 },

                },
                {
                    name: 'DateTo', index: 'DateTo', width: 80, editable: true, sorttype: "date",
                    formatter: 'date',
                    formatoptions: {
                        srcformat: 'm/d/Y',

                    },
                    editoptions: {
                        dataInit: initDateEdit, size: 14,

                    },

                },
                {
                    name: 'Type', width: 80, editable: true, formatter: "select",
                    edittype: "select", editoptions: { value: "Open:Open;Maintainance:Maintainance;Closed:Closed", defaultValue: "Open" },
                },
                 {
                     name: 'Remarks', index: 'Remarks', width: 80, editable: true
                 }
                ,
            ],
            // multiselect:true,
            pager: "#datePager",
            loadonce: true,
            sortname: 'Client',
            ignoreCase: true,
            sortorder: 'asc',
            gridview: true,
            autoencode: true,
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            caption: "Add Durations",
            viewrecords: true,
            editurl: "clientArray",
            onSelectRow: function (id) {
                var selRows = $(this).jqGrid('getGridParam', 'selarrrow');
                if (selRows.length > 1) {
                    btnEdit.disabled = true;
                    btnDel.disabled = true;
                }

                else if (selRows.length == 1) {
                    btnEdit.disabled = false;
                    btnDel.disabled = false;
                }
            },




    }).jqGrid("navGrid", "#datePager", { search: true, edit: false, add: false, del: false, searchtext: "Search" }, {}, {}, {
            multipleSearch: true,
            overlay: false,
            onClose: function () {

                $("div#ui-datepicker-div.ui-datepicker").hide();
            }
    }).jqGrid("filterToolbar", { defaultSearch: "cn" });
});

所以现在我需要访问网格中第一行的 DateTo 值。并在 DateFrom 的默认值中编写一个函数将 DateTo 中获取的日期加 1 并显示在 DateFrom 中有人可以告诉我 demo/help 如何让这个功能正常工作吗？谢谢！

Answer 1

这是我最终找到的解决方案。

jQuery("#GridId").jqGrid({

        height: 100,
        width: 1000,
        colNames: ['Date From', 'Date To', 'Type', 'Remarks'],
        colModel: [
            {
                name: 'DateFrom', index: 'DateFrom', width: 60, editable: true, sorttype: "date",
                formatter: 'date',
                formatoptions: {
                    srcformat: 'm/d/Y',

                },
                editoptions: { dataInit: initDateEdit, size: 14 ,
                    defaultValue: function () {




                        var ids = $("#GridId").jqGrid('getDataIDs');
                        if (ids.length >= 1) {
                            //get first id
                            var cl = ids[0];
                            //fetch row data 
                            var rowData = $("#GridId").getRowData(cl);
                            //fetch individual cell value
                            var celValue = $("#GridId").jqGrid('getCell', cl, 'DateTo');

                            var currentTime = new Date(celValue);

                            var month = parseInt(currentTime.getMonth() + 1);
                            month = month <= 9 ? "0" + month : month;

                            var day = currentTime.getDate();
                            day = day <= 9 ? "0" + day : day;

                            var year = currentTime.getFullYear();
                           var  months= [31,28,31,30,31,30,31,31,30,31,30,31];

                           var ndays = months[month - 1];
                            if (month == 02)
                            {
                                if (year % 100 == 0)
                                {
                                    if (year % 400 == 0)
                                        ndays=29;
                                }
                                else
                                    if (year % 4 == 0)
                                        ndays=29;
                            }
                            day = day + 1;

                            if(day>ndays)
                            {
                                day = 1;
                                month++;
                            }
                            if (month > 12)
                            {
                                month = 1;
                                year++;
                            }                              
                            return month + "/" + day + "/" + year;
                        }

                        return null;

                    }
                },



            },
            {
                name: 'DateTo', index: 'DateTo', width: 80, editable: true, sorttype: "date",
                formatter: 'date',
                formatoptions: {
                    srcformat: 'm/d/Y',

                },
                editoptions: { dataInit: initDateEdit, size: 14 },

            },
            {
                name: 'Type', width: 80, editable: true, formatter: "select",
                edittype: "select", editoptions: { value: "Occupied:Occupied;Vacant:Vacant;Maintainance:Maintainance", defaultValue: "Occupied" },
            },
             {
                 name: 'Remarks', index: 'Remarks', width: 80, editable: true
             }
            ,
        ],
        // multiselect:true,
        pager: "#GridPAger",


        loadonce: true,
        sortable:true,

        sortname: 'Client',
        ignoreCase: true,
        sortorder: 'asc',
        gridview: true,
        autoencode: true,
        rowNum: 10,
        rowList: [5, 10, 20, 50],

        viewrecords: true,
        editurl: "clientArray",
        onSelectRow: function (id) {
            var selRows = $(this).jqGrid('getGridParam', 'selarrrow');
            if (selRows.length > 1) {
                btnEdit.disabled = true;
                btnDel.disabled = true;
            }

            else if (selRows.length == 1) {
                btnEdit.disabled = false;
                btnDel.disabled = false;
            }
        },




    }).jqGrid("navGrid", "#GridPAger", { search: true, edit: false, add: false, del: false, searchtext: "Search" }, {}, {}, {
        multipleSearch: true,
        overlay: false,
        onClose: function () {
            // if we close the search dialog during the datapicker are opened
            // the datepicker will stay opened. To fix this we have to hide
            // the div used by datepicker
            $("div#ui-datepicker-div.ui-datepicker").hide();
        }
    }).jqGrid("filterToolbar", { defaultSearch: "cn" });
});

'Date To' 应该是 'Date From' 模态弹出 jqgrid 的开始

'Date To' should be the beginning of 'Date From' modal popup jqgrid

jqgrid

mvcjqgrid