项目需求,度娘找到一些参考文档,主要参考于https://www.cnblogs.com/jianyeLee/p/5658566.html
我这里datagrid展开行记录的扩展内容是一个table,内容相对固定,所以设置了全局变量。并且希望页面加载的时候,就将全局变量加载完成。
1:JS页面上需要引用,detailview js,
<!-- 引入EasyUI new-->
<link id="easyuiTheme" rel="stylesheet" th:href="@{jquery-easyui-1.4.3/themes/default/easyui.css}" type="text/css">
<link rel="stylesheet" th:href="@{jquery-easyui-1.4.3/themes/icon.css}" type="text/css">
<script type="text/javascript" th:src="@{jquery-easyui-1.4.3/jquery.easyui.min.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js}" charset="utf-8"></script>
<!--detailview js-->
<script th:src="@{js/datagrid-detailview.js}"></script>
2:JS代码,initDetailview中具体解释可查看,上方的参考链接
$(function () {
constantColsArr();
initDetailview();
});
//展开LIST全局变量
function constantColsArr(){
$.ajax({
type: "POST",
timeout: 12000,
async: true,
url: basePath + '/constantColsArr',
dataType: "json",
data: {},
cache: true,
error: function(){
jQuery.messager.alert('错误',"设置全局变量失败!");
},
success: function(data){
}
});
}
function initDetailview() {
$('#orderInfoGrid').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '<div class="ddv"></div>';
},
onExpandRow: function(index,row){
console.log(index);
console.log(row.mainsn+row.serviceOrderId);
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
border : false,
cache : true,
href : basePath + '/getDetailView?mainId='+row.mainsn+'&orderId='+row.serviceOrderId,
onLoad : function(data){
//console.log(data);
$('#orderInfoGrid').datagrid('fixDetailRowHeight',index);
$('#orderInfoGrid').datagrid('selectRow',index);
$('#orderInfoGrid').datagrid('getRowDetail',index).find('form').form('load',row);
}
});
$('#orderInfoGrid').datagrid('fixDetailRowHeight',index);
}
});
}
3:java端,Constant 全局变量设置
public class Constant {
public static List<Map<String,Object>> colsArr = new ArrayList<Map<String,Object>>();
}
4:java端,controller代码
//设置全局变量
@RequestMapping(value = "/constantColsArr")
@ResponseBody
public List<Map<String,Object>> constantColsArr(){
List<Map<String,Object>> colsArr = Constant.colsArr;
if (0 == colsArr.size()){
Map<String,Object> cols1 = new HashMap<String,Object>();
cols1.put("title","环节名");
cols1.put("name","STEP");
colsArr.add(cols1);
Map<String,Object> cols2 = new HashMap<String,Object>();
cols2.put("title","操作人");
cols2.put("name","STAFF");
colsArr.add(cols2);
Map<String,Object> cols3 = new HashMap<String,Object>();
cols3.put("title","开始时间");
cols3.put("name","E_TIME");
colsArr.add(cols3);
Map<String,Object> cols4 = new HashMap<String,Object>();
cols4.put("title","完成时间");
cols4.put("name","EP_TIME");
colsArr.add(cols4);
Map<String,Object> cols5 = new HashMap<String,Object>();
cols5.put("title","用时(小时)");
cols5.put("name","DATEZONE");
colsArr.add(cols5);
}
return colsArr;
}
//JS点击展开按钮,触发加载扩展数据方法
@RequestMapping(value = "/getDetailView")
@ResponseBody
public String getDetailView(
@RequestParam(name = "mainId", required = false) String mainId,
@RequestParam(name = "orderId", required = false) String orderId) {
List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();
Map<String,Object> map = new HashMap<String,Object>();
map.put("mainId",mainId);
map.put("orderId",orderId);
list = kdbzService.getDetailView(map);
String str= "";
if (list.size() > 0){
List<Map<String,Object>> colsArr = Constant.colsArr;
String tr = "<tr style='font-size:10px;'>";
for (Map<String,Object> c:colsArr){
tr += "<th class='text-center'>"+c.get("title")+"</th>";
}
tr += "</tr>";
for (Map<String,Object> l:list){
tr += "<tr style='font-size:8px;'>";
for (Map<String,Object> c:colsArr){
if (null == l.get(c.get("name"))){
tr += "<td class='text-center' >"+""+"</td>"