Easyui Datagrid自定義按鈕列(最后面的操作列)
做項(xiàng)目的時(shí)候因?yàn)樾枨?要在表格的最后添加一列操作列,easyUI貌似沒有提供這種功能,不過沒關(guān)系,我們可以自定義來實(shí)現(xiàn)
版本:jQuery easyUI 1.3.2
這里我的實(shí)現(xiàn)方式是采用HTML形式,js方式暫時(shí)還沒用到
首先是HTML部分
<table id="dg" title="學(xué)生信息" class="easyui-datagrid"
url="${ctx}listStudent.do"
toolbar="#toolbar" pagination="true"
rownumbers="false" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th data-options="field:'stuNo',sortable:true,width:20">學(xué)號</th>
<th data-options="field:'name',width:20">姓名</th>
<th data-options="field:'gender',width:20,formatter:formatGender">性別</th>
<th data-options="field:'nationality',width:20">名族</th>
<th data-options="field:'address',width:50,formatter:formatAddr">家庭地址</th>
<th data-options="field:'mobile',width:20">手機(jī)號</th>
<th data-options="field:'birthday',width:20">出生日期</th>
<th data-options="field:'registDate',sortable:true,width:20">入學(xué)時(shí)間</th>
<th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th>
</tr>
</thead>
</table>
<th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th>
注意紅色部分,就是我們的操作列,field的名字隨便取,我這里是_operate,關(guān)鍵是formatOper函數(shù)
function formatOper(val,row,index){
return '<a href="#" rel="external nofollow" onclick="editUser('+index+')">修改</a>';
}
formatOper()函數(shù)中有三個(gè)參數(shù),val指當(dāng)前單元格的值,row,當(dāng)前行對象,index當(dāng)前行的索引.這里我們就需要這個(gè)index
我把這個(gè)index傳入了一個(gè)叫editUser的函數(shù)中,為什么要傳這個(gè)index呢,我們在來看下這個(gè)editUser函數(shù)
function editUser(index){
$('#dg').datagrid('selectRow',index);// 關(guān)鍵在這里
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','修改學(xué)生信息');
$('#fm').form('load',row);
url = '${ctx}updateStudent.do?id='+row.id;
}
}
翻閱easyUI文檔可以發(fā)現(xiàn)datagrid有一個(gè)方法叫selectRow
selectRow index Select a row, the row index start with 0.
它的作用就是手動(dòng)選中表格的行,參數(shù)就是index值,從0開始
這樣,我們就能實(shí)時(shí)獲取到鼠標(biāo)點(diǎn)擊行所對應(yīng)的數(shù)據(jù)了
$('#dg').datagrid('selectRow',index);
var row = $('#dg').datagrid('getSelected');
這兩句話就是獲取選中的行
具體效果如圖
以上所述是小編給大家介紹的Easyui Datagrid自定義按鈕列(最后面的操作列)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- jQuery EasyUI中DataGird動(dòng)態(tài)生成列的方法
- EasyUI學(xué)習(xí)之Combobox下拉列表(1)
- EasyUI 數(shù)據(jù)表格datagrid列自適應(yīng)內(nèi)容寬度的實(shí)現(xiàn)
- easyUI下拉列表點(diǎn)擊事件使用方法
- easyui combogrid實(shí)現(xiàn)本地模糊搜索過濾多列
- EasyUI學(xué)習(xí)之Combobox級聯(lián)下拉列表(2)
- EasyUI使用DataGrid實(shí)現(xiàn)動(dòng)態(tài)列數(shù)據(jù)綁定
- jquery easyui如何實(shí)現(xiàn)格式化列
- jEasyUI 設(shè)置凍結(jié)列的實(shí)現(xiàn)示例
相關(guān)文章
EasyUi datagrid 實(shí)現(xiàn)表格分頁
這篇文章主要介紹了EasyUi datagrid 實(shí)現(xiàn)表格分頁的方法和示例分享,需要的朋友可以參考下2015-02-02
jQuery模擬爆炸倒計(jì)時(shí)功能實(shí)例代碼
本文通過代碼給大家介紹了jQuery模擬爆炸倒計(jì)時(shí)功能實(shí)例代碼，非常不錯(cuò)，代碼簡單易懂，需要的朋友參考下吧2017-08-08
jquery通過load獲取文件的內(nèi)容并跳到錨點(diǎn)的方法
這篇文章主要介紹了jquery通過load獲取文件的內(nèi)容并跳到錨點(diǎn)的方法,涉及l(fā)oad及animate等方法的使用技巧,需要的朋友可以參考下2015-01-01
jquery輪播的實(shí)現(xiàn)方式 附完整實(shí)例
這篇文章主要介紹了jquery輪播的實(shí)現(xiàn)方式，文中分享了jQuery輪播完整實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
本篇文章主要是對jquery中常用的函數(shù)和屬性進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
Jquery實(shí)現(xiàn)遮罩層的簡單實(shí)例(就是彈出DIV周圍都灰色不能操作)
下面小編就為大家?guī)硪黄狫query實(shí)現(xiàn)遮罩層的簡單實(shí)例(就是彈出DIV周圍都灰色不能操作)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
jQuery實(shí)現(xiàn)下拉菜單（內(nèi)容為時(shí)間）的實(shí)時(shí)更新及圖表的隨動(dòng)更新的方法
這篇文章主要介紹了實(shí)現(xiàn)下拉菜單（內(nèi)容為時(shí)間）的實(shí)時(shí)更新及圖表的隨動(dòng)更新的方法的相關(guān)資料,需要的朋友可以參考下2016-07-07
本篇文章給大家詳細(xì)分析了jQuery中的isPlainObject()使用方法，對此有需求的讀者們可以學(xué)習(xí)下。2018-02-02
Jquery修改image的src屬性,圖片不加載問題的解決方法
下面小編就為大家?guī)硪黄狫query修改image的src屬性,圖片不加載問題的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-05-05
ThinkPHP+jquery實(shí)現(xiàn)“加載更多”功能代碼
本篇文章主要介紹了ThinkPHP+jquery實(shí)現(xiàn)“加載更多”功能代碼，以實(shí)例代碼講訴了加載更多的代碼實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-03-03