easyui、表格中添加操作一列，将操作下设置为修改，点击修改弹出该行对象的编号。
頁面中的代碼(自己引入easy插件)：
<body>
?? ?<div id="table"></div></body>
<script type="text/javascript">
$(function(){
?? ?$('#table').datagrid({?? ?
?? ???? url:'tt.json',?? ???????????? //顯示的數(shù)據(jù)
?? ???? striped:true,?? ??? ??? ?//設(shè)置斑馬紋效果
?? ???? fitColumns:true,?? ??? ?//適應(yīng)父容器
?? ???? pagination:true,?? ??? ?//設(shè)置顯示分頁?? ??? ?
?? ???? rownumbers:true,?? ??? ?//顯示行號
?? ???? pageSize:5,?? ??? ??? ??? ?//頁面大小
?? ???? pageList:[5,10,20],?? ??? ?//頁面大小集合
?? ???? columns:[[?? ?
?? ???????? {field:'id',title:'學(xué)生ID',width:100,align:'center'},?? ?
?? ???????? {field:'name',title:'學(xué)生姓名',width:100,align:'center'},?? ?
?? ???????? {field:'age',title:'學(xué)生年齡',width:100,align:'center'},?? ?
?? ???????? {field:'sex',title:'學(xué)生性別',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>';
?? ??? ??? ??? ?}
?? ???????? }?? ?
?? ???? ]],
?? ?});
});
重點(diǎn)：
formatter: function(value,row,index){}詳解請自行查找easyui官方文檔。
return '<a href="javascript:void(0)" οnclick="updateFun('+index+')" > 修改 </a>';將操作這一列都設(shè)置為‘修改’，并取消a鏈接效果，以及添加一個事件，將當(dāng)前行號傳入。
tt.json：表格中顯示的數(shù)據(jù)
{
?? ?"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":"男"}
?? ?]
}
顯示效果
上面修改給了一個單擊事件，并傳了行索引。
編寫單擊事件函數(shù)：
function updateFun(index){
?? ?$("#table").datagrid("selectRow",index);??????????????????? //根據(jù)行索引選中它
?? ?var obj=$("#table").datagrid("getSelected");??????????? //獲取選中行，返回一個對象
?? ?alert(obj.id);??????????????????????????????????????????????????????????????? //彈出行上id
}
整體效果展示：
總結(jié)：
1、使用formatter: function(value,row,index){ return '修改' } 將操作列改為修改(取消鏈接，添加單擊事件并將行索引傳入)。
2、根據(jù)行索引將其設(shè)置為選中狀態(tài)
3、獲取選中行，返回當(dāng)前行對象
4、通過對象獲取id
總結(jié)
以上是生活随笔為你收集整理的easyui、表格中添加操作一列，将操作下设置为修改，点击修改弹出该行对象的编号。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高质量解读《高性能mysql》——第1章
- 下一篇： spring学习（40）:注入数组类型