EasyUI,TopJUI的datagrid显示图片并点击放大浏览_easyui datagrid 双击表格内图片放大-优快云博客

本文链接：https://blog.youkuaiyun.com/silence_dou/article/details/103906021

本文介绍如何使用TopJUI封装的EasyUI在静态页面上动态创建带有复合表头的datagrid组件，通过示例代码详细展示了配置参数、格式化方法及点击事件的正确注册方式。

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

TopJUI是对EasyUI的封装，本质其实是一样的，本文以TopJUI为例，有问题可以下方留言，看到会回复，一起学习，共同进步。话不多说，直接源码。

1.静态页面，datagrid是动态创建的

<div class="topjui-row">
          <div class="topjui-col-sm12" id="PlanInspectionListInfoDiv">
              <div data-toggle="topjui-panel" id="PlanInspectionListInfoPanel" title="测试" style="height:500px;">
                 <table id="PlanInspectionQuestionListInfo" style="height:500px"></table>
             </div>
        </div>
</div>

js，动态创建复合表头

var url = '@Url.Action("LoadPlanInspectionListQuestionDatagridInfo", "Inspection")';
        $("#PlanInspectionQuestionListInfo").iDatagrid({
            fit: true,
            fitColumns: true,
            method: 'GET',
            url: url,
            queryParams: {
                planid:@ViewBag.planid,
                usernumber: huserid
            },
            nowrap: false,
            emptyMsg: '没有数据',
            singleSelect: true,
            rownumbers: false, //是否加行号
            pagination: false, //是否显式分页
            rowStyler: function (index, row) {
                if (row.status == 0) {
                    return 'color:red;';
                }
            },
            columns: [
                [
                    { field: "deptname", title: "部门", rowspan: 2, align: "center", width: 100 },
                    { field: "inspectionplace", title: "地址", rowspan: 2, align: "center", width: 100 },
                    { field: "insertdate", title: "时间", rowspan: 2, align: "center", width: 100 },
                    { title: "问题", colspan: 2, align: "center", width: 100 },
                    { title: "回复", colspan: 2, align: "center", width: 100 },
                    {
                        field: "status", title: "状态", rowspan: 2, align: "center", width: 100,
                        formatter: function (value, row, index) {
                            if (value == 0) {
                                return '待解决';
                            } else if (value == 1) {
                                return '已解决';
                            }
                        }
                    },
                    { field: "operate", title: "操作", rowspan: 2, width: 100, formatter: operateFormatter},
                ],
                [
                    { field: "question", title: "描述", rowspan: 1, align: "center", width: 100 },
                    { field: "planinspectionquestionimg", title: "图片", rowspan: 1, align: "center", width: 100, formatter: questionImageFormatter},
                    { field: "planinspectionfeedback", title: "描述", rowspan: 1, align: "center", width: 100, formatter: questionImageFormatter},
                    { field: "planinspectionfeedbackimg", title: "图片", rowspan: 1, align: "center", width: 100, formatter: questionImageFormatter},
                ]
            ],
            **onLoadSuccess: function () {
                $('.image-list').on('click', '.cover', function () {
                    var this_ = $(this);
                    var images = this_.parents('.image-list').find('.cover');
                    var imagesArr = new Array();
                    $.each(images, function (i, image) {
                        imagesArr.push($(image).children('img').attr('src'));
                    });
                    $.pictureViewer({
                        images: imagesArr, //需要查看的图片，数据类型为数组
                        initImageIndex: this_.index() + 1, //初始查看第几张图片，默认1
                        scrollSwitch: true //是否使用鼠标滚轮切换图片，默认false
                    });
                });
            }**
        });

编写datagrid的格式化方法

 function questionImageFormatter(value, row, index) {
        var htmlstr;
        htmlstr = '<div class="image-list">';
        for (var i = 0; i < row.planinspectionquestionimg.length; i++) {
            if (i == 0) {
                htmlstr += "<div class='cover'>";
                htmlstr += '<img src="' + row.planinspectionquestionimg[i].imgurl + '"style="height: 45px;width: 50px;"></img>';
                htmlstr += '</div>';
            } else {
                htmlstr += "<div class='cover'>";
                htmlstr += '<img src="' + row.planinspectionquestionimg[i].imgurl + '"style="height: 45px;width: 50px;"></img>';
                htmlstr += '</div>';
            }
        }
        htmlstr += '</div>';
        return htmlstr;
    }