Страница бритвы MVC3 с использованием jqGrid не привязывается - PullRequest
Новая
       2

Страница бритвы MVC3 с использованием jqGrid не привязывается

1 голос
/ 13 декабря 2011

У меня есть jqGrid на странице просмотра, и он загружается на основе сбора данных из нескольких списков выбора.

Первый раз все хорошо. Если я изменяю один из списков выбора, запускается функция .change, но .jqGrid не запускается, поэтому метод Controller не срабатывает.

Мой код jqGrid 

$("#Builds").change(function () {
    var programID = $("#ProgramID").val();
    var buildID =  $('#Builds').val();
     $("#UpdateBuild").show();

    // Set up the jquery grid
    $("#jqTable").jqGrid({
        // Ajax related configurations
        url: '@Url.Action("_CustomBinding")',
        datatype: "json",
        mtype: "POST",
        postData: {
            programID: programID,
            buildID: buildID
            },

        // Specify the column names
        colNames: ["Assembly ID", "Assembly Name", "Cost", "Order", "Budget Report", "Partner Request", "Display"],

        // Configure the columns
        colModel: [
        { name: "AssemblyID", index: "AssemblyID", width: 40, align: "left", editable: false },
        { name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: false },
        { name: "AssemblyCost", index: "AssemblyCost", width: 40, align: "left", formatter: "currency", editable: true },
        { name: "AssemblyOrder", index: "AssemblyOrder", width: 30, align: "left", editable: true },
        { name: "AddToBudgetReport", index: "AddToBudgetReport", width: 40, align: "left", formatter: "checkbox", editable:true, edittype:'checkbox'},
        { name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 45, align: "left", formatter: "checkbox", editable:true, edittype:'checkbox'},
        { name: "Show", index: "Show", width: 20, align: "left", formatter: "checkbox", editable:true, edittype:'checkbox'}],

        // Grid total width and height and formatting
        width: 650,
        height: 200,
        altrows: true,

        // Paging
        toppager: true,
        pager: $("#jqTablePager"),
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true, // Specify if "total number of records" is displayed
        emptyrecords: 'No records to display',

        // Default sorting
        sortname: "AssemblyID",
        sortorder: "asc",

        // Grid caption
        caption: "Build Template"

    }).navGrid("#jqTablePager",
        { refresh: true, add: true, edit: true, del: true },
            {}, // settings for edit
            {}, // settings for add
            {}, // settings for delete
            {sopt: ["cn"]} // Search options. Some options can be set on column level
     );
});

Код моего контроллера: 

[HttpPost]
public JsonResult _CustomBinding(string programID, string buildID, int page, int rows)
{
    /* Variable Declarations */
    BuildsRepository br = new BuildsRepository();
    IEnumerable<ProgramsAssemblyBuilds> pab = br.GetProgramAssembliesBuilds(Convert.ToInt32(programID), Convert.ToInt32(buildID));

    // Calculate the total number of pages
    var totalRecords = pab.Count();
    var totalPages = (int)Math.Ceiling((double)totalRecords / (double)rows);

    var data = (from s in pab
                select new
                {
                    AssemblyID = s.AssemblyID,
                    cell = new object[] { s.AssemblyID, s.AssemblyName, s.AssemblyCost, s.AssemblyOrder, s.AddToBudgetReport, s.AddToPartnerRequest, s.Show}
                }).ToArray();

    var jsonData = new
    {
        total = totalPages,
        page = page,
        records = totalRecords,
        rows = data.Skip((page - 1) * rows).Take(rows)
    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

У кого-нибудь есть идеи по этому поводу?

Спасибо

1 Ответ

3 голосов
/ 13 декабря 2011

Вы должны создать сетку только один раз. Таким образом, вы должны разместить код 

 $("#jqTable").jqGrid({ ... });

вне обработчика событий change.

Чтобы перезагрузить сетку, вы должны использовать 

$("#Builds").change(function () {
    $("#jqTable").trigger("reloadGrid", [{page: 1}]);
    $("#UpdateBuild").show();
});

В конце, чтобы иметь фактические значения от "#ProgramID" и '#Builds', вы должны использовать функции (методы) в качестве programID и buildID свойств postData: 

// Set up the jquery grid
$("#jqTable").jqGrid({
    // Ajax related configurations
    url: '@Url.Action("_CustomBinding")',
    datatype: "json",
    mtype: "POST",
    postData: {
        programID: function() { return $("#ProgramID").val(); },
        buildID: function() { return $('#Builds').val(); }
    },
    ...
});

Подробнее здесь .

...