javascript, bsgrid网格点击对应单元格才能操作

 $(function () {
            //1.1初始化题目信息表格
            tbTitlesInfor = $.fn.bsgrid.init('tbTitlesInfor', {
                url: "GetWeManagement",
                autoLoad: false,
                //stripeRows: true,//隔行变色
                // rowHoverColor: true,//划过行变色
                // rowSelectedColor: true,//是否显示选中行背景色
                pageSize: 8,//
                // pageSizeSelect: false,//是否选择分页页数下拉框
                //pagingLittleToolbar: true,//精简的图标按钮分页工具条
                //pagingToolbarAlign: "left",//分页工具条的显示位置
                rowHoverColor: true,//鼠标移入行高亮
                rowSelectedColor: true,//选择行时有背景色
                pagingLittleToolbar: true,//是否是精简工具条
                event: {
                    customRowEvents: {
                        click: function (record, rowIndex, trObj, options) {
                            Check("#tbTitlesInfor tr", rowIndex + 1);
                            OrderId = record.OrdersGUID;
                        }
                        
                    },
                    customCellEvents: {
                        click: function (record, rowIndex, cell, cellMode, rowtrObj) {
                            console.log("行坐标:"+rowIndex);
                            console.log("选中单元格坐标:" + cell);
                            if (cell == 8) {
                                //如果选中是 图片单元格列才做预览放大图片
                                //网格数据 点击行事件
                                var previewImg = rowtrObj[0].cells[8].innerHTML;//一行的第8个单元格
                                //console.log(oo);
                                imgShow("#outerdiv", "#innerdiv", "#bigimg", $(previewImg));//预览

                            }

                        }
                       
                    }
                }
            });
            searchTitles();
        });

 function imgShow(outerdiv, innerdiv, bigimg, _this) {
            var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
            $(bigimg).attr("src", src);//设置#bigimg元素的src属性
            /*获取当前点击图片的真实大小,并显示弹出层及大图*/
            $("<img/>").attr("src", src).load(function () {
                var windowW = $(window).width();//获取当前窗口宽度
                var windowH = $(window).height();//获取当前窗口高度
                var realWidth = this.width;//获取图片真实宽度
                var realHeight = this.height;//获取图片真实高度
                var imgWidth, imgHeight;
                var scale = 0.8;//缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放
                if (realHeight > windowH * scale) {//判断图片高度
                    imgHeight = windowH * scale;//如大于窗口高度,图片高度进行缩放
                    imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
                    if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度
                        imgWidth = windowW * scale;//再对宽度进行缩放
                    }
                } else if (realWidth > windowW * scale) {//如图片高度合适,判断图片宽度
                    imgWidth = windowW * scale;//如大于窗口宽度,图片宽度进行缩放
                    imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度
                } else {//如果图片真实高度和宽度都符合要求,高宽不变
                    imgWidth = realWidth;
                    imgHeight = realHeight;
                }
                $(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放
                var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距
                var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距
                $(innerdiv).css({ "top": h, "left": w });//设置#innerdiv的top和left属性
                $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
            });
            $(outerdiv).click(function () {//再次点击淡出消失弹出层
                $(this).fadeOut("fast");
            });
        }

HTML:

 <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值