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的行的鼠標靠近事件，在觸發復制按鈕的操作之前先一步拿到了下載地址地值，如果不這樣做，我是沒辦法拿到值的。想了很多方法均是不行，我也認為是不行的，后來突發奇想想到要這么做。所以多想想總是能夠解決問題的，總能找到解決問題的方案的。不要給自己妥協。