zoukankan      html  css  js  c++  java
  • zclip结合easyui实现复制datagrid每行特定单元格数据的功能

    在easyui的datagrid里面,实现复制每行特定单元格的功能,关键是想想如何获取到每个单元格的数据,功能是点击按钮"复制",然后复制object的下载地址,截图如下所示:

    进行下面的代码展示之前假设你已经把环境准备好了,也就是说easyui和zclip的库文件等都已经能够正常访问。

    关键代码如下:

    html代码:

    <div style="height: 90%;overflow: auto;margin: 0px;padding: 0px;">
            <input type="hidden" name="slb.id" id="slbid" value="${oss.id}"  />
                <span style="color:blue; ">获取Object地址:</span>
                <table id='data_list' border="0" width="70%" height="60%"
                    style="padding: 10px">
                    <thead>
                    <tr>
                        <th data-options="field:'fileName', 100,align:'center' "></th>                    
                        <th data-options="field:'downLoadUrl', 400,align:'left'"></th>
                        <th data-options="field:'opt', 100,align:'left',formatter:showOpt"></th>
                    </tr>
                    </thead>
                </table>
        </div>

    javascript代码如下所示:

    onLoadSuccess: function (data) {
                    var loadUrl='';
                    //绑定行的mouseover事件
                    $(".datagrid-row").mouseover(function(){
                        var url = $(this).children("td").eq(1).text();
                        loadUrl=url;
                    }),
                    $('#copy_input').zclip({
                        path: '${pageContext.request.contextPath}/js/ZeroClipboard.swf',
                        copy: function(){
                            return loadUrl;
                        },
                        afterCopy:function(){
                            Alert('复制成功!');
                        }
                    });
                }

    javascript代码:

    function showOpt(value,row,index){
            return '<input type="button" value="复制" id="copy_input">';
        }

    上面的功能就是在datagrid加载成功之后在每一个按钮"复制"上面渲染一层透明的flash。点击"复制"按钮之后复制object的下载地址,这是正常的逻辑,在这个功能,我之所以记录下来,个人觉得用到最好的不是zclip,并不是为了记录zclip。而是巧妙地绑定了datagrid的行的鼠标靠近事件,在触发复制按钮的操作之前先一步拿到了下载地址地值,如果不这样做,我是没办法拿到值的。想了很多方法均是不行,我也认为是不行的,后来突发奇想想到要这么做。所以多想想总是能够解决问题的,总能找到解决问题的方案的。不要给自己妥协。

  • 相关阅读:
    Python 爬虫js加密破解(一) 爬取今日头条as cp 算法 解密
    Python 爬虫实例(2)—— 爬取今日头条
    Python 爬虫实例(1)—— 爬取百度图片
    python 操作redis之——HyperLogLog (八)
    python 操作redis之——有序集合(sorted set) (七)
    Python操作redis系列之 列表(list) (五)
    Python操作redis系列以 哈希(Hash)命令详解(四)
    Python操作redis字符串(String)详解 (三)
    How to Install MySQL on CentOS 7
    Linux SSH远程文件/目录 传输
  • 原文地址:https://www.cnblogs.com/longshiyVip/p/4745416.html
Copyright © 2011-2022 走看看