jQuery是一種廣泛應(yīng)用于前端開(kāi)發(fā)中的JavaScript庫(kù)。在前端開(kāi)發(fā)過(guò)程中,表格是一個(gè)常見(jiàn)的需求。而利用jquery表格行拖拽插件,可以極大地方便我們的表格編輯和管理。
{ //引入jQuery "dependencies": ["jquery"], //設(shè)置選中行的css類名 "rowDraggingClass": "row-dragging", //設(shè)置拖拽起始行和結(jié)束行時(shí)的回調(diào)函數(shù) "onDragStart": function(from, to) {}, "onDrop": function(from, to) {} } //調(diào)用插件 $("table").tableDnD({ onDrop: function(from, to) { //發(fā)送ajax請(qǐng)求,更新表格數(shù)據(jù) var data = { fromIndex: $(from).index(), toIndex: $(to).index() }; $.post("/updateTableData", data, function(response) { console.log(response); }); } });
代碼解釋:
首先在依賴中引入了jQuery,是使用該插件的前提。
接著設(shè)置選中行的css類名,可以自定義樣式。
同時(shí),通過(guò)設(shè)置回調(diào)函數(shù)可以實(shí)現(xiàn)拖拽起始行和結(jié)束行時(shí)的操作。
最后調(diào)用插件的方法,傳入回調(diào)函數(shù),實(shí)現(xiàn)表格數(shù)據(jù)的動(dòng)態(tài)更新。
使用jquery表格行拖拽插件,可以讓我們不用手動(dòng)編寫拖拽事件等繁瑣代碼,更加便捷地進(jìn)行表格數(shù)據(jù)編輯和管理。