Fetch the repository succeeded.
表格列表页面动态加载列和数据
1.
1.
这里贴你的代码块
```<% layout('/layouts/default.html', {title: '自媒体管理', libs: ['layout','zTree','dataGrid']}){ %>
<style>
.lehand_title{
line-height: 45px;
text-align: center;
font-size: 16px;
color: #000000;
margin-top: -10px;
border-bottom: 1px solid #cccccc;
}
.lehand_title_ul{
width: 100%;
text-align: center;
}
.lehand_title_ul a{
display: block;
margin:0px;
list-style: none;
font-size: 14px;
line-height: 35px;
color: #000000;
cursor: pointer;
}
.lehand_title_ul a:hover{
color: #3c8dbc;
}
.lehand_title a{
color: #000000;
cursor: pointer;
}
.lehand_title a:hover{
color: #3c8dbc;
}
.activeTi{
color: #3c8dbc !important;
}
.layui-layer-molv .layui-layer-btn .layui-layer-btn1 {
background: #009f95;
.data_sm {
/*position: absolute;*/
/*font-size: 15px;*/
/*top: 0;*/
/*right: 30px;*/
float: left;
}
</style>
<div class="ui-layout-west">
<div class="main-content">
<div class="box box-main">
<div class="box-title dropdown input-inline">
<div class="dropdown-toggle" data-toggle="dropdown">
<span id="groupTitle" style="margin-left: 15px;font-size: 20px">报表列表</span>
<button type="button" class="btn btn-box-tool addTabPage" id="btnFolder" data-href="${ctx}/appFunction/index" title="${text('表单管理')}"><i class="fa fa-edit"></i></button>
<div class="lehand_title_ul">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui-layout-center" id="Menus">
<div class="main-content">
<div class="box box-main">
<div class="box-header">
<div class="box-title addTitle">
</div>
<div class="box-tools pull-right">
<a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a>
<a onclick="addBtn()" id="addData" class="btn btn-default btnTool" title="${text('新增公众号统计表')}"><i class="fa fa-plus"></i> ${text('新增')}</a>
<a onclick="exportExcel()" class="btn btn-default" title="${text('导出报表')}"><i class="glyphicon glyphicon-import"></i> ${text('导出')}</a>
<a onclick="btnImport()" class="btn btn-default" title="${text('导入报表')}"><i class="glyphicon glyphicon-export"></i> ${text('导入')}</a>
</div>
</div>
<div class="box-body">
<#form:form id="searchForm" action="${ctx}/appFunction/getListData" method="post" class="form-inline hide"
data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
<#form:hidden id="id" path = "id" value = "${initFormId}"/>
<#form:hidden path = "searchTitle"/>
<div class="bang-lione bang-lione-time arrowNole" style="">
<div class="form-group" style="margin-bottom: 0px;">
<p class="pingtai" style="line-height: 32px;float:left">搜索列：</p>
<div class="header-search" style="display: block;width: 240px;float:left">
<div class="today" style="width:224px;float: left;">
<select id = 'selectTitle' style="width: 224px;height: 32px;border: 1px solid #caced6;border-radius: 4px;">
</select>
</div>
</div>
</div>
<div class="form-group" style="margin-bottom: 0px;">
<p class="pingtai" style="line-height: 32px;float:left">搜索内容：</p>
<div class="header-search" style="display: block;width: 240px;float:left">
<#form:input path="searchContent" maxlength="100" class="form-control"
style="width:224px;padding-left: 9px;" placeholder="请输入内容" />
<span class="ant-input-prefix"></span>
</div>
</div>
<div class="form-group">
<button onclick="btn()" type="button" class="btn btn-primary btn-sm">${text('查询')}</button>
<button type="reset" class="btn btn-default btn-sm">${text('重置')}</button>
</div>
</div>
</#form:form>
<table id="dataGrid"></table>
<div id="dataGridPage"></div>
</div>
</div>
</div>
</div>
<% } %>
<script>
function btn() {
var selectTitle = $("#selectTitle").val();
$("#searchTitle").val(selectTitle)
if($("#searchContent").val()){
if(selectTitle == " "){
js.showMessage("请选择要搜索列", "提示：", "error");
return false;
}
}
$("#searchForm").submit();
}
// 初始化布局
$('body').layout({
west__initClosed: $(window).width() <= 767, // 是否默认关闭
west__size: 200
});
var list = ${toJson(AppFunctionList)};
var formId = "${initFormId}";
var formName = list[0].appname;
var a = '<i class="fa icon-notebook"></i>'+formName;
$(".addTitle").append(a)
var addUrl = list[0].appurl;
if(list){
// 主页框架
$(function () {
var a='';
$.each(list,function (dex,value) {
a = a + '<a class = "iteam" id = \'' + value.id + '\' onclick="jump2(\'' + value.id + '\',\'' + value.appurl + '\',\'' + value.appname + '\')">' + value.appname + '</a>'
})
$(".lehand_title_ul").append(a)
$("#"+list[0].id).css("color","#3c8dbc");
//初始化列表
loadTitle(formId);
});
}
//点击切换报表
function jump2(k,v,n) {
formId = k;
$("#id").val(formId);
addUrl = v;
formName = n;
$(".addTitle").empty();
var a = '<i class="fa icon-notebook"></i>'+n;
$(".addTitle").append(a);
$(".iteam").css("color","#000000");
$("#"+k).css("color","#3c8dbc");
loadTitle(k);
}
//ajax请求获取表头
function loadTitle(id) {
$.ajax({
url: "${ctx}/appFunction/getTitle",
type: "post",
cache: false,
async: false,
data: {
"id": id
},
success: function (data) {
initTitle(data)
},
});
}
//加载表头
function initTitle(datas) {
var mo = [];
dataGrid = $("#Menus");
content = dataGrid.parent();
mo.push({
header: "id" ,
name: 'id' ,
index: '',
width: 80,
sortable:false,
hidden:true,
align: "center"
});
var listTitle = '<option value=" ">'+'请选择：'+'</option>';
$.each(datas, function (dex, value) {
mo.push({
header: value.label ,
name: value.id ,
index: '',
width: 80,
sortable:true,
align: "center"
});
//搜索下拉框封装
listTitle += '<option value="'+value.id+'">'+value.label+'</option>';
})
mo.push({
header: '${text("操作")}' ,
name: 'actions' ,
index: '',
width: 80,
sortable:false,
align: "center",
formatter: function(val, obj, row, act){
var actions = [];
actions.push('<a href="${ctx}/ledger/wpLedger/view?id='+row.id+'" class="btnList" title="${text("详情")}"><i class="icon-eye"></i></a> ');
actions.push('<a href="${ctx}/ledger/wpLedger/form?id='+row.id+'" class="btnList" title="${text("编辑")}"><i class="fa fa-pencil"></i></a> ');
actions.push('<a href="${ctx}/ledger/wpLedger/delete?id='+row.id+'" class="btnList" title="${text("删除")}" data-confirm="${text("确认要删除该条台账信息吗？")}"><i class="fa fa-trash-o"></i></a> ');
return actions.join('');
}
});
$("#selectTitle").html(listTitle);
$("#dataGrid").jqGrid('GridUnload');
$('#dataGrid').dataGrid({
searchForm: $("#searchForm"),
columnModel: mo,
showCheckbox: true,
// frozenCols: true, // 启用冻结列，并在colModel中设置frozen:true
autoGridHeight: function(){
return content.height()-150;
},
// 加载成功后执行事件
ajaxSuccess: function (data) {
page(1,20,'dataGrid');
}
});
}
function addBtn() {
if(formId == ""){
js.showMessage("请先创建报表", "提示：", "error");
return false;
}
//页面跳转
$("#addData").attr('href',addUrl);
}
//导出报表
function exportExcel() {
if(formId == ""){
js.showMessage("请先创建报表", "提示：", "error");
return false;
}
var ids = $('#dataGrid').dataGrid('getSelectRows');
if (ids.length > 0) {
window.location.href = "${ctx}/appFunction/exportExcel?formId="+formId+"&ids="+ids;
$('#dataGrid').dataGrid('reloadGrid');
} else {
js.showMessage("请至少选择一行", "提示：", "error");
}
}
//导入报表
function btnImport() {
if(formId == ""){
js.showMessage("请先创建报表", "提示：", "error");
return false;
}
layer.open({
type: 1,
area: ['400px', '200px'],
shadeClose: false,
shade:0.6,
// anim : 3,
skin: 'layui-layer-molv',
title:"导入"+formName+"数据",
content: js.template('importTpl'),
btn: ['下载模板','导入','关闭'],
btn1: function(index){
window.location.href = "${ctx}/appFunction/importTemplate?id="+formId;
layer.close(index);
},
btn2: function(index,layero){
var formData = new FormData();
console.log(formData);
formData.append("file",$("#importFile")[0].files[0]);
var form = $("#importFile")[0].files[0];
console.log(form);
if (!form) {
js.showMessage("${text('文件为空，请选择导入文件。')}", null, 'warning');
return false;
}else if(!js.endWith(form.name, '.xls') && !js.endWith(form.name, '.xlsx')){
js.showMessage("${text('文件不正确，请选择后缀为“xls”或“xlsx”的文件。')}", null, 'warning');
return false;
}
$.ajax({
url: "${ctx}/appFunction/importForm?id="+formId,
dataType: 'json',
type: 'POST',
data: formData,
cache: false,
processData: false, // 不处理数据
contentType: false,
success: function(data){
js.showMessage(data.message);
$('#dataGrid').dataGrid('reloadGrid');
}
});
layer.close(index);
},
btn3: function(index){
layer.close(index);
}
});
}
</script>
<script id="importTpl" type="text/template">
<div id="importBox" v-show="!showListBtn">
<form id="importForm" method="post" enctype="multipart/form-data"
style="padding-left:20px;text-align:center;">
<input id="importFile" name="file" type="file" style="width:330px;margin-top: 15px"/>
<font color="red" class="pull-left mt10">
${text('提示：仅允许导入“xls”或“xlsx”格式文件！')}
</font>
</form>
</div>
</script>
### 实际结果、报错信息、截图
1. 
这里贴错误信息
### 环境版本：
- JDK版本：1.8、11、17
- 浏览器版本：Chrome xx、Firefox xx、IE xx
- 平台版本：JeeSite 4.x.x、5.x.x（pom.xml里查看）
