如何让easyui的datagrid的只显示限定行且记录竖着排列（即卡片式显示），如图所示：
这是我目前做到的效果：
下面是我的代码，应该如何修改才能达到图片上的效果：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/green/easyui.css?t=34355">
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/farm/farm.css">
<script type="text/javascript" src="<%=basePath%>ext/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>ext/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>ext/easyui/plugins/jquery.edatagrid.js"></script>
<script type="text/javascript" src="<%=basePath%>ext/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>ext/farm/helper.js?346t"></script>
<title>种子仓库</title>
<style>
</style>
</head>
<body>
<div class="easyui-dialog" style="width:800px;height:405px;" title="种子仓库">
<table id="grid">
</table>
</div>
<script type="text/javascript">
var grid;
$(document).ready(function() {
//配置表格
grid = $('#grid').edatagrid({
title: '',
width: 785,
height: 365,
method: 'post',
url: '<%=basePath%>seed/gridData',
border: false,
rownumbers: false,
remoteSort: true,
nowrap: false,
singleSelect: true,
fitColumns: true,
pagination: true,
striped: true,
autoSave: true,
checkOnSelect:true,
idField: "id",
columns: [
[{
field: 'id',
title: 'ID',
width: 70,
sortable: true,
align: 'center',
halign: 'center',
hidden:true
}, {
field: 'tips',
title: '种子信息',
width: 70,
sortable: true,
align: 'center',
halign: 'center',
formatter: function(value, row) {
return '小贴士：'+value;
}
},{
field: 'op',
title: '购买',
width: 80,
align: 'center',
halign: 'center',
formatter: function(value,row) {
let rowIndex=grid.edatagrid("getRowIndex",row);
let button="<input onclick ='buySeedByName()' type='button' value='我要购买'>";
return button;
}
}]
],
pageSize: 5,
pageList: [5, 10, 15, 20],
destroyMsg: {
norecord: {
title: '警告',
msg: '首先需要选中记录，然后在点击删除按钮'
},
confirm: {
title: '确认',
msg: '是否删除选中记录?'
}
},
onSuccess: function(index, result) {
console.log(result);
$("#msgBox").text(result.msg);
},
onDestroy: function(index, result) {
console.log(result);
$("#msgBox").text(result.msg);
}
});
});
</script>
</body>
</html>
