jQuery 实现图片下载代码jQuery 实现图片下载代码

jQuery 实现图片下载代码

function downloadImage(src) {
    var $a = $("<a></a>").attr("href", src).attr("download", "meitu.png");
    $a[0].click();
}

关键调用downloadImage函数代码

onclick=downloadImage(url) 

完整 js 代码

$(function () {
    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN'])
    var searchText = $('.search').find('input').val()

    var columns = []

    columns.push({
        title: '分类',
        field: 'category',
        align: 'center',
        valign: 'middle',
        formatter: function (value, row, index) {
            return value
        }
    }, {
        title: '美图',
        field: 'url',
        align: 'center',
        valign: 'middle',
        formatter: function (value, row, index) {
            return "![](" + value + ")"
        }
    }, {
        title: ' 操作',
        field: 'id',
        align: 'center',
        formatter: function (value, row, index) {
            var html = ""
            html += "<div onclick='addFavorite(" + value + ")' name='addFavorite' id='addFavorite" + value + "' class='btn btn-default'>收藏</div><p>"
            html += "<div onclick='deleteById(" + value + ")' name='delete' id='delete" + value + "' class='btn btn-default'>删除</div>"
            return html
        }
    })

    $('#meituTable').bootstrapTable({
        url: 'meituSearchJson',
        sidePagination: "server",
        queryParamsType: 'page,size',
        contentType: "application/x-www-form-urlencoded",
        method: 'get',
        striped: false,     //是否显示行间隔色
        cache: false,      //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
        pagination: true,  //是否显示分页(*)
        paginationLoop: true,
        paginationHAlign: 'right', //right, left
        paginationVAlign: 'bottom', //bottom, top, both
        paginationDetailHAlign: 'left', //right, left
        paginationPreText: ' 上一页',
        paginationNextText: '下一页',
        search: true,
        searchText: searchText,
        searchTimeOut: 500,
        searchAlign: 'right',
        searchOnEnterKey: false,
        trimOnSearch: true,
        sortable: true,    //是否启用排序
        sortOrder: "desc",   //排序方式
        sortName: "id",
        pageNumber: 0,     //初始化加载第一页,默认第一页
        pageSize: 10,      //每页的记录行数(*)
        pageList: [5, 10, 20, 50, 100], // 可选的每页数据
        totalField: 'totalPages',
        dataField: 'content', //后端 json 对应的表格数据 key
        columns: columns,
        queryParams: function (params) {
            return {
                size: params.pageSize,
                page: params.pageNumber,
                sortName: params.sortName,
                sortOrder: params.sortOrder,
                searchText: params.searchText
            }
        },
        classes: 'table table-responsive full-width',
    })


    $(document).on('keydown', function (event) {
        // 键盘翻页事件
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 38 || e && e.keyCode == 37) {//上,左
            // 上一页
            $('.page-pre').click()
        }
        if (e && e.keyCode == 40 || e && e.keyCode == 39) {//下,右
            // 下一页
            $('.page-next').click()
        }

    })

})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

用 React 分页显示数据用react分页显示数据

展示一下主要三个组件:父组件listBox、列表组件List、按钮组件PageButton

8330
来自专栏iOS开发随笔

Xib、Nib、Storyboard下修改控件边框颜色、大小、圆角

23820
来自专栏程序员宝库

分享前端开发常用代码片段

如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。

18350
来自专栏向治洪

React Native控件之ListView

概述 ListView作为核心组件之一,主要用于高效地显示一个可以垂直滚动的变化的数据列表。经过自定义组装,我们还可以用它实现九宫格等页面效果。 在Reac...

29370
来自专栏游戏杂谈

INVALID_STATE_ERR: DOM Exception 11

在使用jQuery的ajax且网络很慢、设置了timeout的情况下,直接不判断ajax的readyState而直接取responseText将出会错(此时xh...

13820
来自专栏ios 技术积累

iOS 根据UIView获取所在的UIViewController

本文将讲述在iOS开发中如何根据某个UIView来获取所属的UIViewController

57320
来自专栏非典型技术宅

iOS中手势的应用1. 四类事件的主要方法2. 响应者链3. 手势识别功能(Gesture Recognizer)4. 手势的使用

14840
来自专栏陈满iOS

iOS· UIGestureRecognizer 与UITouch 的 locationInView方法含义区别

UIGestureRecognizer 与UITouch 都有一个 locationInView: 方法。

16610
来自专栏進无尽的文章

UI篇-UIResponder之事件传递和响应精析

这篇文章只讨论触摸事件。对于触摸事件UIResponder内部提供了以下方法来处理事件:

26420
来自专栏hightopo

基于HTML5 Canvas 实现弹出框

34730

扫码关注云+社区

领取腾讯云代金券