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