Блог

Я новичок в 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 amp;amp; 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 к сетке, чтобы опубликовать ее на контроллере («Сохранить»).

Огромное спасибо. Нам Во.

Для этого потребуется выполнить следующие шаги

1) Создайте ссылку привязки в вашем представлении razor

<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) Иногда вы можете получить сообщение об ошибке javascript: JSON не определен, это можно решить, вставив мета-теги в разделяемую страницу _layout.cshtml, как показано ниже

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

4) YourActionMethod внутри YourController должен быть примерно таким

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