給Jquery easyui 的datagrid 每行增加操作鏈結接，jqueryeasyui

給Jquery easyui 的datagrid 每行增加操作鏈結接，jqueryeasyui

背景　　我們都知道Jquery的Easy-UI的datagrid可以添加並且自訂Toolbar，這樣我們選擇一行然後選擇toolbar的相應按鈕就可以對這行的資料進行操作。但實際項目裡我們可能需要在每行後面加一些操作鏈結接，最常見的就是比如“修改”、“刪除”、“查看”之類。如：

　　　　　　　　　　

　　凡事都怕但是！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函數語句即可。

jquery easyui datagrid 載入成功，選中某一行

你好！！

jquery easyui datagrid中的 reload 不是這樣用的~
1.首先你需要設定datagrid的onLoadSuccess$('#dg').datagrid({onLoadSuccess : function(data){ $('#dg').datagrid('selectRow',3);}});2.onLoadSuccess如果是通過 data-options的方式設定的沒問題，如果通過js指令碼設定的話，需要保證在loadData之前綁定這個事件函數，類似下面這樣$('#dg').datagrid({"onLoadSuccess":function(data){ $(this).datagrid('selectRow',3);}}).datagrid("loadData",XXXXX);否則在載入資料之後，可能不會去執行onLoadSuccess裡面的代碼；3.reload方法重新載入當前頁面資料$('#dg').datagrid("reload");
至於loading一隻顯示，說明你的資料應該沒有載入成功吧··

希望對你有協助！！

 
jquery easyui datagrid 編輯一行時 是怎擷取行id的？

你好！

擷取選中的行對象：

var row = $('#dg').datagrid('getSelected');
if (row){
alert("ID : "+row.itemid);
}

-------------------------------------------------------