Добавление новой строки в jqGrid с использованием модальной формы только на клиенте

Похоже, есть много решений, которые очень близки к решению моей проблемы, но из десятков и десятков вопросов, которые я задавал, ни одно, похоже, не дает точного ответа на то, что я пытаюсь сделать. Хотя я видел почти такой же вопрос, заданный без ответа. Я пробовал так много комбинаций опций и функций, но безрезультатно.

Я хочу использовать модальную форму для добавления новой строки с введенными значениями в jqGrid, но я не хочу, чтобы она отправлялась на сервер при отправке. Я действительно хочу в конечном итоге отправить сообщение на сервер, но только после того, как пользователь клиента выполнил дополнительное редактирование (при необходимости) в строке (строках), добавленных из модальной формы. Я не хочу, чтобы какие-либо строки сохранялись в удаленной базе данных, пока клиент не внесет некоторые изменения, которые, в свою очередь, динамически обновят другие столбцы. После подтверждения определенного статуса значений отображается кнопка «Сохранить», и строки сетки могут быть отправлены на сервер. Если это проверенное условие не выполняется, строки не должны отправляться в базу данных. У меня есть несколько jqGrids, которые используются в другом месте в моем приложении, которые публикуют данные новой строки представленной модальной формы, но с этой сеткой я пытаюсь выполнить что-то другое с клиентом, который не включает сразу же сервер. Сценарий довольно прост для модальной формы, которая вызывается с помощью настраиваемой кнопки, а именно:

(Параметры «footerrow, userDataOnFooter и altRows» включены как часть обновления значений в итоговом нижнем колонтитуле, который связан с выполненным редактированием после добавления ячеек новой строки (строк) через модальную форму)

jQuery("#grid_test").jqGrid({
    url:'/grid_test_url.asp?id=' + vId,
    datatype: "clientSide",
    colNames: ['ID','Col 1', 'Col 2', 'Col 3','Col 4'],
    colModel: [

        {name:'id',index:'id',width:90,align:"center",editable:true,editoptions:{size:25}, formoptions: {...}, editrules: {...}},
        {name:'col1',index:'col1',width:130,align:"right",editable:true,editoptions:{size:25}, formoptions: {}, editrules: {}},
        {name:'col2',index:'col2',width:130,align:"right",editable:true,editoptions:{size: 25}, formoptions: {}, editrules: {}},
        {name:'col3',index:'col3',width:130,align:"right",editable: true,editoptions:{size:25}, formoptions: {}, editrules: {}},
        {name:'col4',index:'col4',width:130,align:"right",editable:true,editoptions:{ size: 25 }, formoptions: {}, editrules: {}}   

    ],
    rowNum:5,
    rowList:[5,10,20],
    pager: '#pgrid_test',
    toolbar: [true, "top"],
    editurl: '', //not sure what would go here to block attempted post by the Submit action of the modal form
    width: 500,
    sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    multiselect: true,
    cellEdit: true,
    caption: "Grid Test Add New Row",
    footerrow: true, 
    userDataOnFooter: true,
    altRows: true
})
jQuery("#grid_test").jqGrid('navGrid', '#pgrid_test', { add: false, edit: false, del: false })

//append custom button
$("#t_grid_test").append("<input type='button' class='add' value='Add New Row' style='height:20px; color:green; font-size:11px;' />");

$("input.add", "#t_grid_test").click(function () {
    jQuery("#grid_test").jqGrid('editGridRow', "new", {
        jqModal: true,
        savekey: [true, 13],
        navkeys: [true, 38, 40],
        bottominfo: "Fields marked with (*) are required. ",
        addCaption: 'New Row Values',
        width: 300,
        dataheight: 200,
        recreateForm: true,

      //checkOnUpdate: true,
      //checkOnSubmit: true,
      //reloadAfterSubmit: true,
        closeOnEscape: true,
        closeAfterAdd: true
        //clearAfterAdd: true
    })
});

Я надеюсь, что это достаточно ясно. Кажется, должно быть довольно просто добавить строку с использованием модальной формы без ее немедленной публикации на сервере, но я не могу найти решение. И будьте терпеливы, если я не нажимаю сразу на значки, чтобы получить правильную оценку, предоставленную для ответов, но я сделаю это, когда буду знать, что нажимать, поэтому, пожалуйста, сообщите об этом. :) параметры включены как часть обновления значений в итоговом нижнем колонтитуле, что связано с редактированием, выполняемым над ячейками новой строки (строк), добавляемой через модальную форму)

jQuery("#grid_test").jqGrid({
    url:'/grid_test_url.asp?id=' + vId,
    datatype: "clientSide",
    colNames: ['ID','Col 1', 'Col 2', 'Col 3','Col 4'],
    colModel: [

        {name:'id',index:'id',width:90,align:"center",editable:true,editoptions:{size:25}, formoptions: {...}, editrules: {...}},
        {name:'col1',index:'col1',width:130,align:"right",editable:true,editoptions:{size:25}, formoptions: {}, editrules: {}},
        {name:'col2',index:'col2',width:130,align:"right",editable:true,editoptions:{size: 25}, formoptions: {}, editrules: {}},
        {name:'col3',index:'col3',width:130,align:"right",editable: true,editoptions:{size:25}, formoptions: {}, editrules: {}},
        {name:'col4',index:'col4',width:130,align:"right",editable:true,editoptions:{ size: 25 }, formoptions: {}, editrules: {}}   

    ],
    rowNum:5,
    rowList:[5,10,20],
    pager: '#pgrid_test',
    toolbar: [true, "top"],
    editurl: '', //not sure what would go here to block attempted post by the Submit action of the modal form
    width: 500,
    sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    multiselect: true,
    cellEdit: true,
    caption: "Grid Test Add New Row",
    footerrow: true, 
    userDataOnFooter: true,
    altRows: true
})
jQuery("#grid_test").jqGrid('navGrid', '#pgrid_test', { add: false, edit: false, del: false })

//append custom button
$("#t_grid_test").append("<input type='button' class='add' value='Add New Row' style='height:20px; color:green; font-size:11px;' />");

$("input.add", "#t_grid_test").click(function () {
    jQuery("#grid_test").jqGrid('editGridRow', "new", {
        jqModal: true,
        savekey: [true, 13],
        navkeys: [true, 38, 40],
        bottominfo: "Fields marked with (*) are required. ",
        addCaption: 'New Row Values',
        width: 300,
        dataheight: 200,
        recreateForm: true,

      //checkOnUpdate: true,
      //checkOnSubmit: true,
      //reloadAfterSubmit: true,
        closeOnEscape: true,
        closeAfterAdd: true
        //clearAfterAdd: true
    })
});

Я надеюсь, что это достаточно ясно. Кажется, довольно просто добавить строку с использованием модальной формы без ее немедленной публикации на сервере, но я не могу найти решение. И будьте терпеливы, если я не нажимаю сразу на значки, чтобы получить правильную оценку, предоставленную для ответов, но я сделаю это, когда буду знать, что нажимать, поэтому, пожалуйста, сообщите об этом соответствующим образом. :) параметры включены как часть обновления значений в итоговом нижнем колонтитуле, что связано с редактированием, выполняемым над ячейками новой строки (строк), добавляемой через модальную форму)

jQuery("#grid_test").jqGrid({
    url:'/grid_test_url.asp?id=' + vId,
    datatype: "clientSide",
    colNames: ['ID','Col 1', 'Col 2', 'Col 3','Col 4'],
    colModel: [

        {name:'id',index:'id',width:90,align:"center",editable:true,editoptions:{size:25}, formoptions: {...}, editrules: {...}},
        {name:'col1',index:'col1',width:130,align:"right",editable:true,editoptions:{size:25}, formoptions: {}, editrules: {}},
        {name:'col2',index:'col2',width:130,align:"right",editable:true,editoptions:{size: 25}, formoptions: {}, editrules: {}},
        {name:'col3',index:'col3',width:130,align:"right",editable: true,editoptions:{size:25}, formoptions: {}, editrules: {}},
        {name:'col4',index:'col4',width:130,align:"right",editable:true,editoptions:{ size: 25 }, formoptions: {}, editrules: {}}   

    ],
    rowNum:5,
    rowList:[5,10,20],
    pager: '#pgrid_test',
    toolbar: [true, "top"],
    editurl: '', //not sure what would go here to block attempted post by the Submit action of the modal form
    width: 500,
    sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    multiselect: true,
    cellEdit: true,
    caption: "Grid Test Add New Row",
    footerrow: true, 
    userDataOnFooter: true,
    altRows: true
})
jQuery("#grid_test").jqGrid('navGrid', '#pgrid_test', { add: false, edit: false, del: false })

//append custom button
$("#t_grid_test").append("<input type='button' class='add' value='Add New Row' style='height:20px; color:green; font-size:11px;' />");

$("input.add", "#t_grid_test").click(function () {
    jQuery("#grid_test").jqGrid('editGridRow', "new", {
        jqModal: true,
        savekey: [true, 13],
        navkeys: [true, 38, 40],
        bottominfo: "Fields marked with (*) are required. ",
        addCaption: 'New Row Values',
        width: 300,
        dataheight: 200,
        recreateForm: true,

      //checkOnUpdate: true,
      //checkOnSubmit: true,
      //reloadAfterSubmit: true,
        closeOnEscape: true,
        closeAfterAdd: true
        //clearAfterAdd: true
    })
});

Я надеюсь, что это достаточно ясно. Кажется, довольно просто добавить строку с использованием модальной формы без ее немедленной публикации на сервере, но я не могу найти решение. И будьте терпеливы, если я не нажимаю сразу на значки, чтобы получить правильную оценку, предоставленную для ответов, но я сделаю это, когда буду знать, что нажимать, поэтому, пожалуйста, сообщите об этом соответствующим образом. :) И будьте терпеливы, если я не нажимаю сразу на значки, чтобы получить надлежащую оценку, предоставленную для ответов, но я сделаю это, когда буду знать, что нажимать, поэтому, пожалуйста, сообщите об этом соответствующим образом. :) И будьте терпеливы, если я не нажимаю сразу на значки, чтобы получить правильную оценку, предоставленную для ответов, но я сделаю это, когда буду знать, что нажимать, поэтому, пожалуйста, сообщите об этом соответствующим образом. :) Спасибо заранее. Джерри

6
задан Oleg 28 June 2011 в 11:58
поделиться