頁面中的代碼(自己引入easy插件)：
<body>
?? ?<div id="table"></div></body>
<script type="text/javascript">
$(function(){
?? ?$('#table').datagrid({?? ?
?? ???? url:'tt.json',?? ???????????? //顯示的數據
?? ???? striped:true,?? ??? ??? ?//設置斑馬紋效果
?? ???? fitColumns:true,?? ??? ?//適應父容器
?? ???? pagination:true,?? ??? ?//設置顯示分頁?? ??? ?
?? ???? rownumbers:true,?? ??? ?//顯示行號
?? ???? pageSize:5,?? ??? ??? ??? ?//頁面大小
?? ???? pageList:[5,10,20],?? ??? ?//頁面大小集合
?? ???? columns:[[?? ?
?? ???????? {field:'id',title:'學生ID',width:100,align:'center'},?? ?
?? ???????? {field:'name',title:'學生姓名',width:100,align:'center'},?? ?
?? ???????? {field:'age',title:'學生年齡',width:100,align:'center'},?? ?
?? ???????? {field:'sex',title:'學生性別',width:100,align:'center'},?? ?
?? ???????? {field:'handle',title:'操作',width:100,align:'center',
?? ??????? ??? ? formatter: function(value,row,index){
?? ??? ??? ??? ??? ?return '<a href="javascript:void(0)" οnclick="updateFun('+index+')" > 修改 </a>';
?? ??? ??? ??? ?}
?? ???????? }?? ?
?? ???? ]],
?? ?});
});
重點：
formatter: function(value,row,index){}詳解請自行查找easyui官方文檔。
return '<a href="javascript:void(0)" οnclick="updateFun('+index+')" > 修改 </a>';將操作這一列都設置為‘修改’，并取消a鏈接效果，以及添加一個事件，將當前行號傳入。
tt.json：表格中顯示的數據
{
?? ?"rows":
?? ?[
?? ??? ?{"id":"u001","name":"Tom1","age":"18","sex":"男"},?? ?
?? ??? ?{"id":"u002","name":"Tom1","age":"18","sex":"男"},?? ?
?? ??? ?{"id":"u003","name":"Tom1","age":"18","sex":"男"},?? ?
?? ??? ?{"id":"u004","name":"Tom1","age":"18","sex":"男"},?? ?
?? ??? ?{"id":"u005","name":"Tom1","age":"18","sex":"男"}
?? ?]
}
顯示效果
上面修改給了一個單擊事件，并傳了行索引。
編寫單擊事件函數：
function updateFun(index){
?? ?$("#table").datagrid("selectRow",index);??????????????????? //根據行索引選中它
?? ?var obj=$("#table").datagrid("getSelected");??????????? //獲取選中行，返回一個對象
?? ?alert(obj.id);??????????????????????????????????????????????????????????????? //彈出行上id
}
整體效果展示：
總結：
1、使用formatter: function(value,row,index){ return '修改' } 將操作列改為修改(取消鏈接，添加單擊事件并將行索引傳入)。
2、根據行索引將其設置為選中狀態
3、獲取選中行，返回當前行對象
4、通過對象獲取id
)害死了，差點)
