我有以下网格:
<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">
</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);
}
});
}
这是列的外观(不正确):
这是列的外观(方形角):
我想念什么?谢谢。