Question

我在使用VS2010的ASP.NET MVC应用程序中使用JqGrid。我的网格似乎无法在我的视图上正确呈现，并且不允许我访问视图上的其他控件（包括整个页面）。看到屏幕打击：

网格中有行：

enter image description here 没有任何行的网格：

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

我的剧本：

        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中测试了这段代码。任何帮助？

Answer 1

我通过在我的视图中添加ui.jqgrid.css解决了这个问题：这就是我的观点现在的样子：

“％＆gt;

    <!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>

希望这将有助于将来的人！

JqGrid - 渲染问题

1 个答案:

JqG​​rid - 渲染问题

1 个答案:

JqGrid - 渲染问题