easyui扩展数据网格视图点击动态获取详情数据

鱼是一只鱼啊

于 2023-02-13 11:22:34 发布

阅读量249

点赞数

分类专栏： EasyUI 文章标签： easyui javascript 数据网格视图

本文链接：https://blog.csdn.net/honeycandys/article/details/129005662

版权

EasyUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了如何利用EasyUI的扩展数据网格功能，当单据存在子单据时显示展开符号，点击后通过AJAX动态获取并显示子单据数据。主要涉及datagrid的配置，包括加载错误处理、列定义以及onExpandRow事件处理函数。

摘要由CSDN通过智能技术生成

需求：

有一个单据查询界面,要求如果该单据有子单据,则出现展开符号,点击可动态获取子单据数据进行查看。使用easyui扩展数据网格来实现

效果图

在这里插入图片描述

展开效果

在这里插入图片描述

关键代码

	<link rel="stylesheet" type="text/css" href="~/lib/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="~/lib/easyui/themes/icon.css">
    <script type="text/javascript" src="~/lib/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="~/lib/easyui/themes/datagrid-detailview.js"></script>
    <script src="~/lib/easyui/plugins/easyui-lang-zh_CN.js"></script>

function initGrid(){
$("#dataGrid").datagrid({
        url: "数据请求接口地址",
        method: "get",
        border: false,//不显示边框线
        singleSelect: false,//只允许选一行
        fit: true,
        showFooter: true,
        pagination: true,//显示分页
        fitColumns: true,//自动展开
        rownumbers: true,//显示行号
        queryParams: getQueryData(),
        loadMsg: "数据装载中.....",//加载信息
        onClickRow: function (rowIndex, rowData) {
            $(this).datagrid('unselectRow', rowIndex);
        },
        onLoadError: function (data) {
            MessageBox.showYes("错误", window.navigator.onLine ? "数据加载异常！" : "网络连接异常，请在网络恢复后重试！", IconType.error);
        },
        columns: [
            [
                {
                    field: "Ck",
                    checkbox: true
                },
                {
                    title: '单据编号',
                    field: 'BillCode',
                    align: 'left',
                    halign: 'left',
                    width: $(this).width() * 0.1,
                    styler: function (index, row) {
                        return "height:35px";
                    },
                {
                    title: '列1',
                    field: 'Column1',
                    width: $(this).width() * 0.05,
                    align: 'left',
                    halign: 'left',
                    hidden: hideOrg
                },
                {
                    title: '列2',
                    field: 'Column2',
                    width: $(this).width() * 0.05,
                    align: 'center',
                    halign: 'center',
                    formatter: function (value, row, index) {
                        if (!row.Footer) {
                            return value + "种";
                        }
                    }
                },
                {
                    title: '列3',
                    field: 'Column3',
                    width: $(this).width() * 0.05,
                    align: 'right',
                    halign: 'right'
                },
                {
                    title: '列4',
                    field: 'Column4',
                    width: $(this).width() * 0.05,
                    align: 'center',
                    halign: 'center',
                    hidden: false,
                },
                {
                    title: '操作',
                    field: 'Btns',
                    width: 128,
                    align: 'center',
                    halign: 'center',
                    formatter:function(value,row,index){
                    	//这里处理操作按钮
                    }
                }
            ]
        ],
        toolbar: [],
        view: detailview,
        detailFormatter: function (index, row) {
            return '<div class="ddv ddvBox" name="mxBox"></div>';
        },
        onLoadSuccess: function (data) {
            data.rows.forEach((item, index) => {
                if (item.Against != true) {
                    var expander = $('#dataGrid').datagrid('getExpander', index);
                    $(expander).hide();
                    //这里如果使用以下语句处理展开图标的显示隐藏,重新加载后会出现问题,比如应该展示的是第一个，但是重新加载几次以后有可能变成最后一条数据才有展开图标
                    //$("td[field='_expander']").eq(index).find("div").css("display", "none")
                }
            })
        },
        onExpandRow: function (index, row) {
            if (row.Against == true) {
                getDetail(index, row)
            };
            $('#dataGrid').datagrid('fixDetailRowHeight', index);
        }
    });
    $(window).resize(function () {
        $('#dataGrid').datagrid("resize");
    });
}
function getDetail(index, row) {
    var html = '<table class="table table-bordered">';
    html += '<thead><tr><th>单据编号</th><th>冲销种类</th><th>冲负金额(元)</th><th>冲正金额(元)</th><th>冲销总额(元)</th><th>操作人</th><th>冲销时间</th><th>备注</th></tr></thead>';
    html += '<tbody>';
    $.ygAjax({
        url: "数据请求接口",
        type: "get",
        data: {
            billId: row.BillId
        },
        success: function (data) {
            if (data.IsSuccess == true) {
                for (var i = 0; i < data.Data.length; i++) {
                    let item = data.Data[i];
                    html += '<tr><td><a href="javascript:void(0)" οnclick="showAgainstDetail('+item.Id+')">' + item.BillCode+ '</a></td>';
                    html += '<td>' + item.Qty+ '</td>';
                    html += '<td style="color:#f25b40;font-weight:bold">' + item.TotalMoney2 + '</td>';
                    html += '<td style="color:#32B58B;font-weight:bold">' + item.TotalMoney1+ '</td>';
                    html += '<td>' + item.TotalMoney + '</td>';
                    html += '<td>' + item.CreatePeople + '</td>';
                    html += '<td>' + item.CreateOn+ '</td>';
                    html += '<td>' + item.Remark + '</td>';
                    html += '</tr>';
                }
                html += '</tbody>';
                html += '</table>';
                $(".ddv").eq(index).html(html);
                $('#dataGrid').datagrid('fixDetailRowHeight', index);
            }
        }
    });
}