jQuery Mobile网格样式不正确

时间:2019-05-07 14:42:18

标签: jquery mobile jquery-mobile

我有以下网格:

<div data-role="page" id="mainpage">

    <!-- header -->
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>Main</h1>
        <a href="#optionsPanel" data-icon="gear" class="ui-btn-right">Options</a>
        <div data-role="navbar">
            <ul>
                <li><a href='/'>Menu</a></li>
            </ul>
        </div>
    </div>
    <!-- /header -->

    <!-- content -->
    <div role="main" class="ui-content">
        <div class="ui-grid-d" id="grdAssignmentDump">
        </div>
    </div>
    <!-- /content -->

    <!-- footer -->
    <div data-role="footer" data-position="fixed" data-theme="b" class="ui-bar">
        &nbsp;
    </div>
    <!-- /footer -->

</div>

由于某种原因,我无法使网格样式具有“平方”外观。它显示每个项目为一个按钮并四舍五入。我希望网格可以像通常那样被正方形连接。不确定是什么问题。这是用于填充网格的JavaScript。一切工作正常,只是样式无法显示适用于jquery mobile的正确“平方”样式。这是填满表格的javascript(正常工作):

function LoadInfo(info) {

        // Set Assignment Date
        var e = document.getElementById(info);
        var assignmentDate = e.options[e.selectedIndex].value;

        $.ajax({
            type: 'GET',
            url: '@Url.Action("getAssignmentDump")',
            data: { assignmentId: assignmentId, assignmentDate: assignmentDate },
            dataType: 'json',
            success: function (data) {

                // Create assignment dump grid
                var grdHtml = "";

                // Loop through each record returned from json
                $.each(data, function (i, item) {

                    // Add row to grid
                    grdHtml += "<div class='ui-block-a'><div class='ui-bar ui-bar-a'>" + item.user + "</div></div>";
                    grdHtml += "<div class='ui-block-b'><div class='ui-bar ui-bar-a'>" + item.assignmentTime + "</div></div>";
                    grdHtml += "<div class='ui-block-c'><div class='ui-bar ui-bar-a'>" + item.complete + "</div></div>";
                    grdHtml += "<div class='ui-block-d'><div class='ui-bar ui-bar-a'>" + item.redone + "</div></div>";

                });

                // Fill grid
                $('#grdAssignmentDump').html(grdHtml);

                // Refresh grid to enhance its styling
                //$('#grdAssignmentDump').grid("refresh");

            },
            error: function (ex) {
                var r = jQuery.parseJSON(response.responseText);
                alert("Message: " + r.Message);
                alert("StackTrace: " + r.StackTrace);
                alert("ExceptionType: " + r.ExceptionType);
            }
        });
    }

这是列的外观(不正确):

enter image description here

这是列的外观(方形角):

enter image description here

我想念什么?谢谢。

0 个答案:

没有答案