自己做一個table外掛 (一)Ajax獲取資料後動態生成table

今天我給大家帶來一個簡單的JQ外掛，Ajax獲取資料後動態生成table。當然，有這種功能的外掛有很多。著名的有DataTable、JqGrid……它們雖然功能豐富，成熟，拿來做二次開發是一個不錯的選擇。但是，我仍然自己寫了一個外掛，原因很簡單，它們太龐大了，它的百分之九十的功能我都用不上。

下面是效果展示：我是用的AmazeUI做的當然，這都不重要，你只需要一個有Table標籤的Html就可以了。

第一步：寫一段html

    <table style="border-spacing: 50px 20px;" id="table">
    <thead>
    <tr>
    <th>使用者名稱</th>				
    <th>角色</th>
    <th>狀態</th>
    <th>是否啟用</th>
    <th>建立時間</th>
    <th>最後登入</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
    </table>

效果是這樣的：

第二步：新建一個js檔案，因為是要作為一個外掛的存在，所以要這麼寫。

    $.fn.grid = function(options) {
    	var $tbody = $(this).find("tbody");
    	var colums = options.colums;
    	var url = options.url;
    	var content = [];
    	//ajax獲取資料來源後存入content資料中。
            $.ajax({
    		type: "get",
    		url: url,
    		dataType: "json",
    		async: false,
    		success: function(data) {
    		    content = data;
    		}
    	});
    	for(var c = 0; c < content.length; c++) {
    		//遍歷所有列
    		var cols = [];
    		$.each(colums, function(key, value) {
    			//遍歷json資料
    			$.each(content[c], function(key2, value2) {
    				if(key2 == value.Index) {
    					cols.push(value2);
    				}
    			});
    		});
    		var html="<tr>";
    			$.each(cols,function(k,v){
    				html += "<td>"+v+"</td>"
    			});
    		html += "</tr>";
    		$tbody.append(html)
    	}
    }

簡單解釋一下：

$.fn 和 jQuery.prototype一個意思。這是Jquery外掛的寫法，意思就是給jQuery物件增加一個屬性，這個屬性就是一個函式，我們就可以通過$("XX選擇器").grid(options)來呼叫這個方法。

options.colums這個引數的意思就是這個列的名稱。它是一個陣列，呼叫處要將這些列的名稱傳進來，然後把資料來源中的名字作對比；如果相同，那麼就儲存這個值，之後將他們拼接成html程式碼，附加到tbody中，這麼表述也不是很清楚，見諒，等會看看程式碼就明白了。

第三步：

在Html程式碼中引入這個js檔案，然後呼叫（不要忘了先引入Jquery檔案，我對Jquery比較熟，用jq寫程式碼量也比較少，所以我就用jq來寫了）。

第四步：

在html中呼叫這個方法，現在是不是明白colums這個引數的意義了。

    <script>
    	$(function() {
    		var options = {
    			url: "User.json",//json檔案或者資料庫查詢後的地址
    			colums: [{
    				"Index": "name",
    				"Name": "使用者名稱"
    			}, {
    				"Index": "rolename",
    				"Name": "角色"
    			}, {
    				"Index": "status",
    				"Name": "狀態"
    			}, {
    				"Index": "isActive",
    				"Name": "是否啟用"
    			}, {
    				"Index": "createTime",
    				"Name": "建立時間"
    			}, {
    				"Index": "lastLogin",
    				"Name": "最後登入"
    			}]
    		}
    		$("#table").grid(options);
    	});
    </script>

下面寫出User.json的內容 (模擬資料庫查詢後返回的資料)

    [
    	{
    		"name": "SheyPang",
    		"rolename": "管理員",
    		"status": "1",
    		"isActive": "1",
    		"createTime": "2018-01-01",
    		"lastLogin": "2018-02-02"
    	}, {
    		"name": "PPPPPPP",
    		"rolename": "管理員",
    		"status": "1",
    		"isActive": "1",
    		"createTime": "2018-01-01",
    		"lastLogin": "2018-02-02"
    	}, {
    		"name": "AAAAAA",
    		"rolename": "管理員",
    		"status": "1",
    		"isActive": "1",
    		"createTime": "2017-01-01",
    		"lastLogin": "2017-02-02"
    	}, {
    		"name": "VVVVVVVV",
    		"rolename": "管理員",
    		"status": "1",
    		"isActive": "1",
    		"createTime": "2018-06-04",
    		"lastLogin": "2018-02-02"
    	}
    ]

效果如下

總結：這個段程式碼的難點是資料名稱的對比，需要有一點點演算法的功力，要對js物件的遍歷（key-value）這種的稍微有點熟悉。演算法應該還有優化的空間。

作為一個外掛當然這只是一小部分；但是是比較重要的部分，還有其他的功能需要實現。比如，分頁、搜尋、排序、點選row的觸發的事件。之後我會繼續寫文章的。