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', width:100,align:'center' "></th>
                    <th data-options="field:'downLoadUrl', width:400,align:'left'"></th>
                    <th data-options="field:'opt', width: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的行的鼠标靠近事件，在触发复制按钮的操作之前先一步拿到了下载地址地值，如果不这样做，我是没办法拿到值的。想了很多方法均是不行，我也认为是不行的，后来突发奇想想到要这么做。所以多想想总是能够解决问题的，总能找到解决问题的方案的。不要给自己妥协。