我在哪里可以找到jqGrid作为发布表单的一部分使用的示例?

时间:2013-04-14 03:19:36

标签: asp.net-mvc arrays post jqgrid

我有一个表单,我有一堆文本框和下拉列表。我现在需要添加另一个子对象数组,并将其作为我的表单帖子的一部分。

我打算把它作为一个html表格,但我认为我可以利用jqGrid。我可以在本地使用jqGrid添加数据然后将其包含在表单中的最佳方法是什么?我需要jqGrid本地操作的原因是这些是子记录作为较大表单的一部分所以我不能发布jqGrid行直到更大的表单被发布(所以我有一个Id加入这些行)

例如,如果我的帖子是一个订单屏幕(带有日期,说明等的文本框),现在我想要一个网格,您可以将产品添加到订单中。您可以拥有任意数量的行。 。)

我的后端是asp.net-mvc,如果这有助于任何建议。

2 个答案:

答案 0 :(得分:2)

如果您使用表单编辑,则可以通过多种方式扩展postdata。最简单的是使用onclickSubmit回调:

onclickSubmit: function (options, postData) {
    return {foo: "bar"};
}

如果您使用上述回调,则将使用参数foo扩展将发布到服务器的数据,其中字符串值为"bar"

另一种可能性是使用editGridRow的{​​{3}}选项。最好的方法是使用editData定义为函数的属性。每次在发布数据之前都会调用函数。

例如以下代码

$("#grid").jqGrid("navGrid", "#pager", {}, {
    editData: {
        foo: function () {
            return "bar";
        }
    },
    onclickSubmit: function (options, postData) {
        return {test: 123};
    }
});

会将foo=bartest=123添加到将发送到服务器的参数中。

下一种可能性是使用serializeEditData。回调使您可以完全控制将发送到服务器的数据。

答案 1 :(得分:1)

我正在使用Oleg建议的序列化方法。

查看

  $( "#Save" ).click( function ( e )
            {
                e.preventDefault();


                  var griddata= $( "#list" ).getRowData();
                    var model = {
                        grid: griddata
                    };

                    var gridVal = JSON.stringify( model );
                   //Now set this value to a hiddenfield in the form and submit
                   $('#hiddenGridDta').val(gridVal );
                  $( 'form' ).submit();

});

控制器中,使用Newtonsoft.json。jsonconvert()反序列化值。

 public ActionResult SaveTest(TestClass test)
        {

       testViewModel myGrid = JsonConvert.DeserializeObject<testViewModel>(test.hiddenGridDta);
................

}

testViewModel类

  public class testViewModel 
    {
        public IEnumerable<TestGrid> grid { get; set; }
    }

TestGrid类

 public class profileGrid
    {
//fields in the jqgrid (should use the same name as used in *colModel:* of jqgrid)

        public int x
        {
            get;
            set;
        }
        public int y
        {
            get;
            set;
        }
          .......


    }