テーブル行の並び変えを行いデータの更新を行う

仕事でとあるリストの編集をする際にプライオリティ順にする必要があり、途中の行にデータを追加した際に番号の変更が簡単に出来ないか探したのが始まり。

エクセルなら簡単に行えるけど、データはウェブ上（DBや、JSONとか）に収めたい。エクセルやスプレッドシートから都度呼び出してもいいかと思ったけれども、手間が増えるのでブラウザ上で完結出来るように作成してみた。

といった感じに更新していく。

セルをドラッグアンドドロップで並び替える

GoogleのCDNを利用してjqueryとjquery ui のリンクを張る

GoogleのCDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

html と javascript は以下

<table id="fruit_lists" class="sort_table">
	<thead>
	<tr>
		<th>ID</th>
		<th>名前</th>
	</tr>
	</thead>
	<tbody id="tbody_status">
	<tr>
		<td>1</td>
		<td>りんご</td>
	</tr>
	<tr>
		<td>2</td>
		<td>みかん</td>
	</tr>
	<tr>
		<td>3</td>
		<td>いちご</td>
	</tr>
	<tr>
		<td>4</td>
		<td>ぶどう</td>
	</tr>
	</tbody>
</table>

<script>		
	var curPosition;
	$(".sort_table tbody").sortable({
	    
	    //ドラッグアンドドロップを開始
	    start: function (e, ui) {
		    
		    //移動させた行の位置を取得
	    	curPosition = $(".sort_table tr:not(.ui-sortable-placeholder)").index($(ui.helper));
	    },
	    
	    //ドラッグアンドドロップを終了
	    beforeStop: function(e, ui) {   
		  	
		  	//テーブルの情報を取得
	        var rowId = $(ui.helper).attr("data-row-id");
	        var newPosition = $("sort_table tr:not(.ui-sortable-placeholder)").index($(ui.helper));
	        var tblTbody = document.getElementById('tbody_status');
			
			//セル情報が空白が出来る時があり、その対策
			let n = 0;
			
			for (var i=0, rowLen=tblTbody.rows.length; i<rowLen; i++) {
				
				for (var j=0, colLen=1 ; j<colLen; j++) {
					
					var cells = tblTbody.rows[i].cells[j];
					
					if(cells.innerHTML !== ' ' && n == 0){	
					//値が空白ではなく、nの値が0の場合の処理を書き込む
							
					}else if(cells.innerHTML == ' '){
					//値が空白の場合は、対策用変数に1を足す
					n = n+1;
					}else{
					//値が空白ではなく、nの値が0以外の場合の処理を書き込む
							
					}
				}
			}
			
	    }
	});
</script>

入れ替え自体はすぐに行えるようになるが、データーの更新を合わせて行う場合にいくつかのポイントがある。

0番から始まる為、実際の行番号を得るには+1をする必要があるが、テーブルの各行のデータを取得する際、動かした行だけの情報なら問題ないが、すべて取得すると空白行が一行出来てしまう。空白行では処理は行わない。そのため、空白行以降では見た目の実際の行番号をそのまま取得することができる。

なので、空白行以前と以降で処理を少し変えるようにした。

ただのHTMLデータなのでこれでは並び替えても更新してしまうと元通り。

【DEMO】

ajaxでデータの更新を行う

入れ替えた時に即時にデータを更新したいので、ajaxを使用して、データの更新と取得を行う。

データの更新方法は割愛するが、ajaxはだいたいこんな感じ

//これらは、先ほどのjavascriptの「nの値が0の場合の処理を書き込む」のところに書き込む
//iは、空白行の前後で処理をかえる（空白行以下の場合は+1はしない）
$.ajax({
	type: "POST",
	url: "hoge.php",
	
	// 受け取りデータの種類
	datatype: "json",
	
	// 送信データ
	//
	data: {
		//API側に渡す値を書き込む
	    "id" : cells.innerHTML,
	    "p_no" : i+1
	},
	}).success(function(data) {
		   
	}).error(function(XMLHttpRequest, textStatus, errorThrown) {
	    alert('error!!!');
});	

PHP

//PHＰで更新する場合、は以下を記載して更新後のデータなどを渡して、ajax処理の中にある、.successの中に受け取ったデータの処理を記載すれば、リロードせずに表示のデータ更新を行える。

$List[] = array(
	        'test'    => 'test'
	    );

header('Content-type:application/json; charset=utf8');
echo json_encode($List);

PHPでのDB操作などは割愛。上記にあるようにJSON形式で変更したデータ内容などを取得して返して、innerTextなどで書き換えればいい。