Question

我是jqgrid和MVC的新手。我的Jqgrid处于多选模式，我想通过单击网格外的按钮（tbrSave）将网格上的所有选定项目提交给控制器。

@using (Html.BeginForm("Save", "Home"))

{

<button type="submit" id="tbrSave" class="toolbar">
    <span title="Config" class="icon-32-save"></span>Save</button>

<script src="@Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.custom.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var lastSelectedRow;

        $('#jqGridCategoryCreate').jqGrid({
            //url from wich data should be requested
            url: 'CategoriesList',
            //type of data
            datatype: 'json',
            editurl: '@Url.Action("UpdateCategory")',
            //url access method type
            mtype: 'POST',

            //columns names
            colNames: ['CategoryId', 'Category Name', 'Display Order', 'Is Featured Product'], //columns model
            colModel: [

             { name: 'Id', index: 'Id', align: 'left', editable: false },
            { name: 'Name', index: 'Name', align: 'left', editable: false },
             { name: 'DisplayOrder', index: 'DisplayOrder', align: 'left', editable: true, edittype: 'text', editoptions: { maxlength: 10 }, editrules: { required: true} },
              { name: 'IsFeaturedProduct', index: 'IsFeaturedProduct', align: 'left', editable: true, edittype: 'text', edittype: 'checkbox', editoptions: { maxlength: 10, value: '1:Yes;0:No' }, formatter: 'checkbox', editrules: { required: true}}],
            //pager for grid
            pager: $('#jqPagerCategoryCreate'),
            //number of rows per page
            rowNum: 10,
            //initial sorting column
            sortname: 'Id',
            //initial sorting direction
            sortorder: 'asc',
            //we want to display total records count
            viewrecords: true,
            multiselect: true,
            //grid width
            width: 'auto',
            //grid height
            height: 'auto',
            ondblClickRow: function (id) {
                if (id && id != lastSelectedRow) {
                    //save changes in row 
                    jQuery('#jqGridCategoryCreate').saveRow(lastSelectedRow);

                    $.lastSelectedRow = id;
                    //trigger inline edit for row
                    $('#jqGridCategoryCreate').editRow(lastSelectedRow, true);
                }

            }
        });

        $('#jqGridCategoryCreate').jqGrid('navGrid', '#jqPagerCategoryCreate',
                { add: false, del: true, edit: false, search: false },
                { width: 'auto', url: '/Category/Edit' },
                { width: 'auto', url: 'SaveCustomLanguageData' },
                { width: 'auto', url: '/Category/Delete' });

        function getSelectedRows() {

            //make sure all items must be in view mode before submitting.
            jQuery('#jqGridCategoryCreate').saveRow(lastSelectedRow);

            var rows = $("#jqGridCategoryCreate").jqGrid('getGridParam', 'selarrrow');

            var categories = [];
            $.each(rows, function (index, rowId) {
                var gridRow = $("#jqGridCategoryCreate").getRowData(rowId);

                var category = { "Id": rowId,
                    "DisplayOrder": gridRow['DisplayOrder']
                };
                categories.push(category);
            });

        }
    });
</script>

}

如何将getSelectedRows附加到网格以便将其发布到Controller（“保存”）。

谢谢你。 Nam Vo。

Answer 1

这将涉及以下步骤

1）在剃刀视图上创建锚链接

<a id="somelink" href="">Select Multiple Accounts</a>

2）为上面创建的锚链接创建一个点击事件处理程序

$('#somelink').click(function () {

var multiplerowdata = jQuery("#grid").getGridParam('selarrrow');  

$.ajax({ type: 'POST',
    url: '@Url.Action("YourController", "YourActionMethod")',
    data: JSON.stringify(multiplerowdata),
    traditional: true, 
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function () { alert("row submited"); }
});})

3）有时你可能会得到JSON的javascript错误没有定义，这可以通过在shared \ _layout.cshtml页面中插入元标记来解决，如下所示

<meta http-equiv="X-UA-Compatible" content="IE=8" />

4）YourController中的YourActionMethod应该有点像这样

 [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult YourActionMethod(List<string> datarow)
    {
        //return "sucessfully validated";
        return null;
    }

asp.net mvc jqgrid使用网格外部的按钮提交网格

1 个答案: