0

私はJQGridを初めて使用し、問題の解決策を探しましたが成功しませんでした。レコードの追加中のフォーム編集で、保存して続行という追加のボタンを作成しました。私の意図は、このボタンが新しいレコードをグリッドに保存し、フォームのフィールドをクリアして、フォームを閉じずに新しいレコードの挿入を開始することです。addrowdata を使用してグリッドをリロードしようとしていますが、成功していません。どんな助けでもいいですし、これを行うためのより良い方法があれば、私はそれを受け入れます。

$(document).ready(function () {
    'use strict';
    var mydata = [{
        id: "1",
        startdate: "2007-10-01",
        name: "S008572",
        total: "210.00"
    }, {
        id: "2",
        startdate: "2007-10-02",
        name: "O008975",
        total: "320.00"
    }, {
        id: "3",
        startdate: "2007-09-01",
        name: "S990653",
        total: "430.00"

    }],
        $grid = $("#list"),
        initDateEdit = function (elem) {
            $(elem).datepicker({
                dateFormat: 'dd-M-yy',
                autoSize: true,
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true
            });
        },
        numberTemplate = {
            formatter: 'number',
            align: 'right',
            sorttype: 'number',
            editrules: {
                number: true,
                required: true
            },
            searchoptions: {
                sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']
            }
        };

    $grid.jqGrid({
        datatype: 'local',
        data: mydata,
        colNames: ['Client', 'Date', 'Total'],
        colModel: [{
            name: 'name',
            index: 'name',
            align: 'center',
            editable: true,
            width: 65,
            editrules: {
                required: true
            }
        }, {
            name: 'startdate',
            index: 'startdate',
            width: 80,
            align: 'center',
            sorttype: 'date',
            formatter: 'date',
            formatoptions: {newformat: 'd-M-Y'},
            editable: true,
            datefmt: 'd-M-Y',
            editoptions: {
                dataInit: initDateEdit
            }
        }, {
            name: 'total',
            index: 'total',
            width: 60,
            template: numberTemplate
        }],
        rowNum: 10,
        rowList: [5, 10, 20],
        pager: '#pager',
        gridview: true,
        rownumbers: true,
        autoencode: true,
        ignoreCase: true,
        sortname: 'startdate',
        viewrecords: true,
        sortorder: 'desc',
        shrinkToFit: false,
        height: '100%',
        caption: 'Demonstrate how to implement searching on Enter'
    });
    $.extend($.jgrid.edit, {
        bSubmit: "Save and Close",
        bCancel: "Cancel",
        width: 370,
        recreateForm: true,
        beforeShowForm: function () {
            $('<a href="#">Save and Continue<span class="ui-icon ui-icon-disk"></span></a>')
                .click(function () {
                alert("click!");
                    var id = $.Guid.New();
                    var newRowData= [{"id":id,"startdate": @startdate,"total":@total}];
                    $("#list").addRowData(id,newRowData);
                    $("#list").trigger("reloadGrid");
            }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
                .prependTo("#Act_Buttons>td.EditButton");
        }
    });
    $grid.jqGrid('navGrid', '#pager');
});
4

1 に答える 1

1

ローカルデータでフォーム編集を使用しようとしています（ datatype: "local"）。jqGridは現在、インライン編集またはセル編集モードでのローカルデータの編集をサポートしています。インライン編集を使用することをお勧めします。たとえば、inlineNavを使用して、ナビゲーターバーに代替ボタンを追加し、インライン編集メソッドを使用して行を追加および編集できます。

フォーム編集があなたの要件に対して本当にはるかに優れているなら、私はあなたを別の答えの修正である答えに転送することができます。回答は、ローカルデータを編集するためにフォーム編集を実装する方法を示すデモを提供します。デモのコードは短くなく、単純でもないことを警告します。それにもかかわらず、それは機能します。

于 2013-02-22T20:50:00.743 に答える