除了在数据源中配置最大数据条数的方式设置显示数据的数量之外，有别的方式能够使sql查询的数据全部显示吗，最好是能够像列表一样通过翻页的方式显示，谢谢您的回答
2021-09-15 10:14:47
最佳答案
可以把配置的列表引入e模板中显示，需要引入列表中的js、css，然后引入html和js，以下是自定义页面引入2个配置列表的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>需求列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定义的css-->
<!--<link rel="stylesheet" type="text/css" href="css/app.css" />-->
<style>
.mui-card .mui-control-content {
padding: 10px;
}
.mui-control-content {
height: 480px;
}
</style>
<script src="js/mui.min.js"></script>
<!-- 内嵌esgrid用到的引用 begin -->
<link rel="stylesheet" type="text/css" href="/theme/default/ui-dialog.css?_v=200214175202" />
<link rel="stylesheet" type="text/css" href="/theme/default/jquery-ui.min.css?_v=200214175202" />
<link rel="stylesheet" type="text/css" href="/theme/default/bootstrap.min.css?_v=200214175202" />
<link rel="stylesheet" type="text/css" href="/theme/default/bootstrap-theme.min.css?_v=200214175202" />
<link rel="stylesheet" type="text/css" href="/theme/default/font-awesome-all.min.css?_v=200214175202" />
<link rel="stylesheet" type="text/css" href="/theme/default/bootstrap-select.min.css?_v=200214175202" />
<link rel="stylesheet" type="text/css" href="/theme/default/ui.jqgrid-bootstrap.css?_v=200214175202" />
<link rel="stylesheet" type="text/css" href="/theme/default/esui.css?_v=200214175202" />
<link rel="stylesheet" type="text/css" href="/theme/default/esreinit.css?_v=200214175202" />
<link rel="stylesheet" type="text/css" href="/theme/default/escustom.css?_v=200214175202" />
<script type="text/javascript" src="/scripts/jquery/jquery-2.2.4.min.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/jquery-dateformat/jquery-dateFormat.min.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/iframeautoheight/all-min.js?_v=200213141658"></script>
<script type="text/javascript" src="/scripts/artDialog/dialog.min.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/jquery-ui/jquery-ui-1.11.4.min.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/jquery-json/jquery.json.min.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/bootstrap/js/bootstrap.min.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/bootstrap-select/bootstrap-select.min.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/bootstrap-select/bootstrap-select.locale.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/jqGrid/jquery.jqGrid.locale.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/jqGrid/jquery.jqGrid.min.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/my97/WdatePicker.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/es.locale.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/esutility.js?_v=200214175202"></script>
<script type="text/javascript" src="/scripts/escustom.js?_v=200214175202"></script>
<script type="text/javascript" src="/Platform/UIV2/Toolbar/js/estoolbar.js?_v=200214175202"></script>
<script type="text/javascript" src="/Platform/UIV2/Query/js/esquery.js?_v=200214175202"></script>
<script type="text/javascript" src="/Platform/UIV2/Grid/js/esgrid.js?_v=200214175202"></script>
<!-- 内嵌esgrid用到的引用 end -->
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-left-nav mui-pull-left" href="/wechat/main.html"></a>
<h1 class="mui-title">需求列表</h1>
</header>
<div class="mui-content" >
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1">原材料</a>
<a class="mui-control-item" href="#item2">设备</a>
<a class="mui-control-item" href="#item3">人员</a>
</div>
</div>
<div class="escontent">
<div id="item1" class="mui-control-content mui-active">
<div id="scroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- grid begin -->
<div class="container-fluid" style="height:100%">
<div class="row" id="divRow1">
<div class="col-sm-12 col-md-12 col-lg-12">
<table class="table es-search-container">
<tr>
<td style="padding-left:0px;padding-bottom:0px;">
<div id="esGridSearchContainer" class="pull-left"></div>
</td>
<td style="padding-right:0px;vertical-align:bottom">
<div id="esGridToolbuttons" class="pull-right"></div>
</td>
</tr>
</table>
</div>
</div>
<div class="row" id="divRow2" style="overflow:hidden">
<div class="col-sm-12 col-md-12 col-lg-12" id="esGridContainer" style="height:100%">
<table id="esGridm"></table>
<div id="esGridPager"></div>
</div>
</div>
</div>
<script>
$(function () {
$("#esGridm").attr('data-esurlquery', "?gridId=75eef77a2b564d52af61f32d87bb86d7&esAutoHI=autoParent");
$("#esGridm").esGrid('load');
$(window).resize(function (e) {
//resizeGridContainerHeight();
$es.grid.autoHeight();
e.stopPropagation();
});
});
function resizeGridContainerHeight() {
var th = $(window).height();
var sh = $("#divRow1").outerHeight();
$("#divRow2").height(th - sh);
}
</script>
<!-- grid end -->
</div>
</div>
</div>
<div id="item2" class="mui-control-content">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">缝纫机</a>
<ul class="mui-table-view mui-table-view-chevron">
</ul>
</li>
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">杀菌设备</a>
<ul class="mui-table-view mui-table-view-chevron">
</ul>
</li>
</ul>
</div>
<div id="item3" class="mui-control-content">
<!-- grid begin -->
<div class="container-fluid" style="height:100%">
<div class="row" id="divRow1">
<div class="col-sm-12 col-md-12 col-lg-12">
<table class="table es-search-container">
<tr>
<td style="padding-left:0px;padding-bottom:0px;">
<div id="esGridSearchContainer" class="pull-left"></div>
</td>
<td style="padding-right:0px;vertical-align:bottom">
<div id="esGridToolbuttons" class="pull-right"></div>
</td>
</tr>
</table>
</div>
</div>
<div class="row" id="divRow2" style="overflow:hidden">
<div class="col-sm-12 col-md-12 col-lg-12" id="esGridContainer" style="height:100%">
<table id="esGrid"></table>
<div id="esGridPager"></div>
</div>
</div>
</div>
<script>
$(function () {
$("#esGrid").attr('data-esurlquery', "?gridId=0aa6309fc6d14a5e9b7835b545dc7622&viewId=52b0d03f8204483cb42eaa958a625d39");
$("#esGrid").esGrid('load');
$(window).resize(function (e) {
//resizeGridContainerHeight();
$es.grid.autoHeight();
e.stopPropagation();
});
});
function resizeGridContainerHeight() {
var th = $(window).height();
var sh = $("#divRow1").outerHeight();
$("#divRow2").height(th - sh);
}
</script>
<!-- grid end -->
</div>
</div>
</div>
</body>
<script>
mui.init({
//swipeBack: true //启用右滑关闭功能
});
(function ($) {
function initdevice(data) {
};
$('#scroll').scroll({
indicators: true //是否显示滚动条
});
})(mui);
</script>
</html>
共1条
1
