給Jquery easyui 的datagrid 每行增長操做連接

　　咱們都知道Jquery的Easy-UI的datagrid能夠添加而且自定義Toolbar，這樣咱們選擇一行而後選擇toolbar的相應按鈕就能夠對這行的數據進行操做。但實際項目裏咱們可能須要在每行後面加一些操做連接，最多見的就是好比「修改」、「刪除」、「查看」之類。以下圖：

　　　　　　　　　　

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

解決方法

　　一、在須要添加超連接的列進行格式化處理（formater：格式化函數），以下：
 　　　<th data-options="field:‘Title‘,width:150,align:‘center‘,formatter: rowformater">消息名稱</th>
　　二、根據documentation的描述，formatter的格式化函數有3個parameters，分別是：
　　　　value: the field value，也就是field:‘id‘。
　　　　rowData: the row record data。就是這一行的Json數據，包括你已經選擇在Datagrid上顯示的內容，和沒顯示的內容。
　　　　rowIndex: the row index.當前行的Index。
　經過這個函數來執行相應的javaScript函數就能夠達到目的．

　　三、腳本函數&前臺代碼

    <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>

  四、效果

      

小結

　　因爲Easy-UI自己就是Jquery封裝的庫，因此其本質仍是javascript．雖然自己沒有link屬性，可是經過其定義的屬性或是方法，按照其格式構造一個javascript函數語句便可。