0

我在使用 VS2010 的 ASP.NET MVC 应用程序中使用 JqGrid。我的 Grid 似乎无法在我的视图上正确呈现,并且不允许我访问视图上的其他控件(包括整个页面)。看画面吹:

网格中的行:

在此处输入图像描述 没有任何行的网格: 在此处输入图像描述

但是一旦我修改并将数据提交回控制器内联编辑输入页面就可以访问了。

我的脚本:

        var last_selected_row;
        $(function () {

        var outerwidth = $('#studentList').width() - 10; ////Keep Grid 10 pixel smaller than its parent container

        $('#studentGrid').jqGrid({
        // Ajax related configurations

        //url to send request to
        url: "/Registration/LoadStudents",
        datatype: "json",
        mtype: "POST",
        // Specify the column names
        colNames: ["StudentID", "StudentName", "Status", "Grades", "StartDate", "EndDate", "EarnedDate", "DroppedDate"],

        // Configure the columns
        colModel: [
        { name: "StudentID", index: "StudentID", width: 0, align: "left", key: true },
        { name: "StudentName", index: "StudentName", editrules: { required: true, integer: false }, width: 100, title: "Name", align: "left", editable: true, stype: 'text', sortable: true },
        { name: "Status", index: "Status", width: 70, align: "left", editable: true, edittype: "checkbox", editoptions: { value: "true:false"} },
        { name: "Grades", index: "Grades", width: 80, align: "left", editable: true, edittype: "select", editoptions:
        {
        dataUrl: "/Registration/GetAllGrades",
        buildSelect: function (data) {
        //var d = $.parseJSON(data);
        var jqGridAssemblyTypes = $.parseJSON(data);
        var s = '<select>';
        if (jqGridAssemblyTypes && jqGridAssemblyTypes.length) {
        for (var i = 0, l = jqGridAssemblyTypes.length; i < l; i++) {
        var ri = jqGridAssemblyTypes[i];
        s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
        }
        }
        return s + "</select>";
        },
        dataInit: function (elem) {
        var v = $(elem).val();
        ////Set other column value here
        },
        dataEvents: [{
        type: 'change',
        fn: function (e) {
        var assemblyType = $(e.target).val();
        //var rowId = getRowId($(this));
        }
        }]
        }
        },
        { name: "StartDate", editable: true, editrules: { edithidden: false }, editoptions: { dataInit: function (element) { SetFieldReadOnly(element); } }
        , index: "StartDate", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
        },
        { name: "EndDate", editable: true, editrules: { edithidden: false }, editoptions:
        { dataInit: function (element) {
        $(element).attr("readonly", "readonly");
        }
        }, index: "EndDate", title: "Ended", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
        },
        { name: "EarnedDate", editable: true, editrules: { edithidden: false }, editoptions:
        { dataInit: function (element) {
        $(element).attr("readonly", "readonly");
        }
        }, index: "EarnedDate", title: "Earned", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
        },
        { name: "DroppedDate", editable: true, editrules: { edithidden: false }, editoptions:
        { dataInit: function (element) {
        $(element).attr("readonly", "readonly");
        }
        }, index: "DroppedDate", title: "Dropped", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
        }],

        // Grid total width and height
        //width: 300,
        //height: 200,
        //autowidth: true,
        height: '100%',
        altRows: true,
        shrinkToFit: false,
        //forceFit: true,
        gridview: true,
        //width: 600,

        // Paging
        toppager: false,
        pager: $("#studentGridPager"),
        rowNum: 5,
        rowList: [5, 10, 20],
        viewrecords: true,

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

        ajaxRowOptions: { contentType: "application/json", dataType: "json" },
        serializeRowData: function (data) {
        return JSON.stringify({ registrationModel: data });
        },
        ondblClickRow: function (StudentId) { StudentDoubleClicked(StudentId); },

        // Grid caption
        editurl: "/Registration/EditStudents",
        jsonReader: { repeatitems: false },
        caption: "Students"

        }).setGridWidth(outerwidth);

        function bindAllGrades() {
        var dataString = '';
        var grades = new Array();
        $.getJSON("/Registration/GetAllGrades", null, function (data) {
        if (data != null) {
        $.each(data, function (i, item) {

        grades.push("{\"Text\":\"" + item.Text + "\",\"Value\":\"" + item.Value + "\"}");
        dataString += "{\"Text\":\"" + item.Text + "\",\"Value\":\"" + item.Value + "\"},";
        });
        dataString = dataString.slice(0, -1);

        }

        });

        var jstrin = JSON.stringify(grades);
        return grades;

        }

        function StudentDoubleClicked(StudentId) {
        var $myGrid = $("#studentGrid");
        if (StudentId && StudentId != last_selected_row) {
        $myGrid.jqGrid('restoreRow', last_selected_row);


        $myGrid.jqGrid('saveRow', StudentId, {
        successfunc: function (response) {
        alert('Row is Saved !!!');
        return true;
        }
        }, '/Registration/EditStudents',
        {
        extraparam: {
        StudentID: function () {

        var sel_id = $myGrid.jqGrid('getGridParam', 'selrow');
        var value = $myGrid.jqGrid('getCell', sel_id, 'StudentID');
        return stId;
        },
        StudentName: getSavedMathValue(StudentId),
        Status: function () {
        var sel_id = $myGrid.jqGrid('getGridParam', 'selrow');
        var value = $myGrid.jqGrid('getCell', sel_id, 'Status');
        return value;
        }
        }
        }, function () { alert('This is After save.') }, function () { alert('Error while saving data.') }, reload);
        $myGrid.jqGrid('editRow', StudentId, true);

        last_selected_row = StudentId;
        }

        }

        function getSavedMathValue(stId) {
        var mval = $('#' + stId + "_StudentName");
        return mval.val();
        }

        function SetFieldReadOnly(Ele) {
        $(Ele).attr("readonly", "readonly");
        }
        })
        function reload(rowid, result) {
        alert("This is Reload " + Result);
        $("#studentGrid").trigger("reloadGrid");
        }

我的观点:

        <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<SISShsmMvc.Models.RegistrationModel>" %>

        <!DOCTYPE html>
        <html>
        <head runat="server">
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript" src="../../Scripts/jquery.jqGrid.js"></script>
        <script type="text/javascript" src="../../Scripts/jquery.jqGrid.locale-en.js"></script>
        <%: Scripts.Render("~/bundles/autocomplete")%>

        <script type="text/javascript" src="../../Scripts/Registration.js"></script>
        </head>
        <body>

        <div>
        <fieldset>
        <legend>Search Student By</legend>
        <div id="studentSearch">
        <span>Name:</span><br />
        <%= Html.TextBoxFor(m => m.StudentName, new { ID = "StudentName" })%><br />
        <span>Grade:</span><br />
        <%= Html.DropDownListFor(m => m.SelectedGrade, Model.AvailableGrades) %><br />
        </div>
        </fieldset>
        <div id="studentList">
        <table id="studentGrid">
        </table>
        <div id="studentGridPager" />
        </div>
        </div>
        </body>
        </html>

我的控制器:

            public ActionResult Index()
            {
            PopulateUserContextViewBags();

            List<string> grades = new List<string>();
            grades.Add("Grades 11 and 12");
            grades.Add("Grades 12");
            grades.Add("Grades 11");
            grades.Add("Grades 10");
            grades.Add("All Grades");

            // TODO: 
            Models.RegistrationModel model = new Models.RegistrationModel()
            {
            AvailableGrades = new SelectList(grades, "Grades 11 and 12")
            };

            return View(model);
            }

            public ActionResult LoadStudents()
            {
            var objmodel = Models.RegistrationRepository.GetStudents();
            return Json(objmodel, JsonRequestBehavior.AllowGet);
            //return Json(null, JsonRequestBehavior.AllowGet);
            }

            public JsonResult EditStudents(Models.RegistrationModel registrationModel)
            {
            // registrationModel.StudentID = id;

            return Json(null, JsonRequestBehavior.AllowGet);
            }

我正在使用 JqGrid 4.5.1。我已经在 IE9 和 Firefox 22.0 中测试了这段代码。有什么帮助吗??

4

1 回答 1

0

我通过将 ui.jqgrid.css 添加到我的视图来解决它:这就是我的视图现在的样子:

" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.jqGrid.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.jqGrid.locale-en.js"></script>
    <!-- Newly added .css solved the problem -->
    <link rel="Stylesheet" type="text/css" href="../../Content/ui.jqgrid.css" />

    <%: Scripts.Render("~/bundles/autocomplete")%>

    <script type="text/javascript" src="../../Scripts/Registration.js"></script>
    </head>
    <body>

    <div>
    <fieldset>
    <legend>Search Student By</legend>
    <div id="studentSearch">
    <span>Name:</span><br />
    <%= Html.TextBoxFor(m => m.StudentName, new { ID = "StudentName" })%><br />
    <span>Grade:</span><br />
    <%= Html.DropDownListFor(m => m.SelectedGrade, Model.AvailableGrades) %><br />
    </div>
    </fieldset>
    <div id="studentList">
    <table id="studentGrid">
    </table>
    <div id="studentGridPager" />
    </div>
    </div>
    </body>
    </html>

希望这对将来的人有所帮助!

于 2013-07-29T17:18:57.353 回答