給Jquery easyui 的datagrid 每行添加操作鏈接

背景

　　我們都知道Jquery的Easy-UI的datagrid能夠加入而且自己定義Toolbar，這樣我們選擇一行然后選擇toolbar的對應button就能夠對這行的數據進行操作。但實際項目里我們可能須要在每行后面加一些操作鏈接，最常見的就是比方“改動”、“刪除”、“查看”之類。例如以下圖：

　　　　　　　　　　

　　凡事都怕可是！Easy-UI的Datagrid沒有直接加入link的屬性。查看Easy-UI的幫助文檔，看到一個formater：格式化函數。能夠對某一行進行格式化，然后通過URL+ID的方式把頁面跳轉到新頁面．

解決方法

　　1、在須要加入超鏈接的列進行格式化處理（formater：格式化函數），例如以下：
 　　　 <th data-options="field:'Title',width:150,align:'center',formatter: rowformater">消息名稱</th>
　　2、依據documentation的描寫敘述。formatter的格式化函數有3個parameters。各自是：
　　　　value: the field value。也就是field:'id'。
　　　　rowData: the row record data。就是這一行的Json數據，包含你已經選擇在Datagrid上顯示的內容，和沒顯示的內容。
　　　　rowIndex: the row index.當前行的Index。

　通過這個函數來運行對應的javaScript函數就能夠達到目的．

　　3、腳本函數&前台代碼

    <script type="text/javascript">
        //查看詳情
        function rowformater(value, row, index) {
            return "<a href='NewsDetial.aspx?
NoticeID=" + row.ID + "' target='_block'>" + row.Title + "</a>";
        }

    </script>

<table id="dg" title="已公布消息" class="easyui-datagrid" style="width: 1090px; height: 430px; padding-left: 200px;" data-options="rownumbers:true,url:'EasyUITotalNews.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],method:'get',toolbar:'#tb' ," toolbar="#toolbar" pagination="true" rownumbers="true" fitcolumns="true" striped="true" singleselect="true">

            <thead>
                 <tr>
                    <th data-options="field:'ck',checkbox:true"></th>
                    <th data-options="field:'ID',width:150,align:'center'">消息編號</th>
                    <th data-options="field:'Title',width:150,align:'center',formatter: rowformater">消息名稱</th>
                    <th data-options="field:'PublishDepart',width:150,align:'center'">發送單位</th>
                    <th data-options="field:'ReceiveDepart',width:150,align:'center'">接收單位</th>
                    <th data-options="field:'PublishTime',width:150,align:'center'">發送時間</th>
                    <th data-options="field:'NoticeState',width:80,align:'center'">是否讀取</th>
                </tr>
            </thead>
        </table>

  4、效果

     

小結

　　因為Easy-UI本身就是Jquery封裝的庫，所以其本質還是javascript．盡管本身沒有link屬性。可是通過其定義的屬性或是方法，依照其格式構造一個javascript函數語句就可以。