DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Jquery自定義button按鈕的幾種方法
Jquery自定義button按鈕的幾種方法
編輯:JQuery特效代碼     
1、第一種方法比較簡單
. 代碼如下:
"columns": [

{ "data": null,defaultContent: '<input type="button" onclick="" value="呵呵" />', orderable: false },

],

從代碼字面意思就能明白什麼意思,但是怎樣從裡邊獲取改行的信息我還不知道,所以顯得不是太實用,定義默認值還可以。
. 代碼如下:
{ "data": "id",orderable: false,
"mRender":function(data,type,full){
return "<input type='button' onclick='' value='"+data+"'/>";
}
},

剛看到一種方法就是使用回調,也可以獲取該列的值並傳遞,但也只能獲取一個值,仍然沒有第二種方法好。

2、第二種稍微麻煩,但比較實用
. 代碼如下:
"fnRowCallback":function(nRow,aData,iDataIndex){
var id = $('td', nRow).eq(0).text();
var ip = $('td', nRow).eq(3).text();
$('td:eq(-1)',nRow).html('<a href="javascript:onUpdate(\''+id+'\',\''+ip+'\')">修改</a> '+
'<a href="javascript:onDel('+iDataIndex+')">刪除</a>');
return nRow;
},

在初始化行數據時調用一個回調方法,可以輕松的獲取該行數據,完成提交功能,但是有個缺點,需要後台json傳一個空字段,也不夠靈活。

3、第三種方法,就是將兩種方法結合使用,可以完全前台無需後台操作
. 代碼如下:
{ "data": null,orderable: false,}

. 代碼如下:
"fnRowCallback":function(nRow,aData,iDataIndex){
var id = $('td', nRow).eq(0).text();
var ip = $('td', nRow).eq(3).text();
$('td:eq(-1)',nRow).html('<a href="javascript:onUpdate(\''+id+'\',\''+ip+'\')">修改</a> '+
'<a href="javascript:onDel('+iDataIndex+')">刪除</a>');
return nRow;
},
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved