仅在客户端上使用模式表单向jqGrid添加新行

似乎有很多解决方案非常接近于解决我的问题，但在我倾诉的几十个问题中，似乎没有一个能完全解决我正在尝试做的事情。虽然我见过几乎同样的问题被问到却没有答案。我尝试了这么多选项和功能的组合，但都无济于事

我想使用模式表单向jqGrid添加一个新行，其中包含输入的值，但我不想在提交时将其发布到服务器。我确实希望最终发布到服务器，但只有在客户端用户对从模式表单添加的行执行了附加编辑（如果需要）之后。我不希望任何行保存到远程数据库，直到客户机执行了一些编辑，这些编辑会动态更新其他列。验证值的特定状态后，将显示“保存”按钮，并可将网格行发布到服务器。除非满足此验证条件，否则不会将行提交到数据库。我在我的应用程序的其他地方使用了许多jqGrids，它们确实发布了提交的模式表单的新行数据，但我试图通过客户端完成一些不同的工作，而不是立即涉及服务器。我喜欢模式表单更直观的界面，用于与客户端用户初始输入值，然后根据需要内联编辑新行的字段，这就是我的问题：我是否可以仅将表单作为新行提交，而不向服务器进行任何发布操作

我在jqGrid Wiki资源中看到一位用户的评论，他说如果“clientArray”是为使用网格模式表单提交选项“editurl:“clientArray”输入的值，则模式表单不会发出“未设置URL”消息，但仍然会发出，并且不会向网格中添加新行。我已将网格数据类型设置为“本地”数据类型：'clientSide'，但得到相同的“未设置URL”错误消息。对于由自定义按钮调用的模式表单，脚本非常简单，如下所示：

（“footerrow、userDataOnFooter和altRows”选项作为值更新的一部分包含在摘要页脚中，该页脚与通过模式表单添加新行单元格时执行的编辑相关）

jQuery（“网格测试”）.jqGrid({
url:'/grid\u test\u url.asp？id='+vId，
数据类型：“客户端”，
colNames:['ID'、'Col 1'、'Col 2'、'Col 3'、'Col 4']，
colModel：[
{name:'id'，index:'id'，width:90，align:'center'，edit:true，editoptions:{size:25}，formoptions:{…}，editrules:{…}，
{name:'col1'，index:'col1'，width:130，align:'right'，edit:true，editoptions:{size:25}，formoptions:{}，editrules:{}，
{name:'col2'，index:'col2'，width:130，align:'right'，edit:true，editoptions:{size:25}，formoptions:{}，editrules:{}，
{name:'col3'，index:'col3'，width:130，align:'right'，edit:true，editoptions:{size:25}，formoptions:{}，editrules:{}，
{name:'col4'，index:'col4'，width:130，align:'right'，edit:true，editoptions:{size:25}，formoptions:{}，editrules:{}
],
行数：5，
行列表：[5,10,20]，
寻呼机：“#pgrid_测试”，
工具栏：[正确，“顶部”]，
editurl:“”，//不确定通过模式表单的提交操作在此处阻止尝试发布的内容
宽度：500，
sortname:'id'，
viewrecords：是的，
分拣员：“asc”，
多选：对，
是的，
标题：“网格测试添加新行”，
是的，
userDataOnFooter:true，
阿尔特罗斯：对
})
jQuery（“#grid_test”）.jqGrid（'navGrid'，'#pgrid_test'，{add:false，edit:false，del:false}）
//附加自定义按钮
$（“#t#u网格测试”）。追加（“”）；
$（“input.add”，“#t#u grid_test”）。单击（函数（）{
jQuery（“#grid_test”）.jqGrid（'editGridRow'，“new”{
jqModal：是的，
savekey:[true，13]，
导航键：[正确，38,40]，
bottominfo:“标有（*）的字段是必填字段。”，
addCaption:'新行值'，
宽度：300，
数据高度：200，
再现形式：正确，
//checkOnUpdate:true，
//checkOnSubmit:true，
//reloadAfterSubmit：对，
closeOnEscape：没错，
closeAfterAdd:true
//clearAfterAdd:true
})
});

我希望这是相当清楚的。似乎它应该是相当简单的添加一行使用模式形式，而不立即张贴到服务器上，但我不能想出解决办法。请容忍，如果我没有及时点击图标，为正确的信用给答案，但我会当我知道什么点击，所以请相应的建议. :) 非常感谢。

---

Jerry

当前版本的表单编辑不支持本地数据类型。不过，如果代码稍长一点，就可以实现if。我不久前创建并发布了在jqGrid中实现本地编辑支持的建议。到目前为止还没有实现，但您可以使用我的示例来实现您需要的

我包括以下代码：

var lastSel，mydata=[
{id:“1”，invdate:“2007-10-01”，name:“test”，note:“note”，amount:“200.00”，tax:“10.00”，closed:true，ship_via:“TN”，total:“210.00”}，
{id:“2”，invdate:“2007-10-02”，name:“test2”，note2，amount:“300.00”，tax:“20.00”，closed:false，ship_via:“FE”，total:“320.00”}，
{id:“3”，invdate:“2007-09-01”，name:“test3”，note3，amount:“400.00”，tax:“30.00”，closed:false，ship_via:“FE”，total:“430.00”}，
{id:“4”，invdate:“2007-10-04”，name:“test4”，note4，amount:“200.00”，tax:“10.00”，closed:true，ship_via:“TN”，total:“210.00”}，
{id:“5”，invdate:“2007-10-31”，name:“test5”，note5，amount:“300.00”，tax:“20.00”，closed:false，ship_via:“FE”，total:“320.00”}，
{id:“6”，invdate:“2007-09-06”，name:“test6”，note6，amount:“400.00”，tax:“30.00”，closed:false，ship_via:“FE”，total:“430.00”}，
{id:“7”，invdate:“2007-10-04”，name:“test7”，
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
    })
});

onclickSubmitLocal = function(options,postdata) {
....
        // !!! the most important step: skip ajax request to the server
        this.processing = true;
        return {};

onclickSubmitLocal = function(options,postdata) {
....
        // !!! the most important step: skip ajax request to the server
        options.processing = true;
        return {};