easyui datagrid 展开行记录展示自定义内容

最新推荐文章于 2023-04-17 18:43:16 发布

tornado430

最新推荐文章于 2023-04-17 18:43:16 发布

阅读量4.2k

点赞数

文章标签： easyui datagrid 展开行记录

本文链接：https://blog.youkuaiyun.com/tornado430/article/details/82623928

版权

本文介绍了如何在easyui datagrid中实现展开行记录并展示自定义内容，主要步骤包括引用detailview JS，初始化detailview，设置全局变量以及在Java后端的Constant和Controller层处理。页面加载时即完成全局变量加载，展开的内容可以是一个固定的HTML表格，也可以根据需求替换为其他HTML代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求，度娘找到一些参考文档，主要参考于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>"