自己做一个table插件 (一)Ajax获取数据后动态生成table

妖狐艹你老母 2021-06-26 16:06 343阅读 0赞

今天我给大家带来一个简单的`JQ`插件，`Ajax`获取数据后动态生成`table`。当然，有这种功能的插件有很多。著名的有`DataTable、JqGrid`……它们虽然功能丰富，成熟，拿来做二次开发是一个不错的选择。但是，我仍然自己写了一个插件，原因很简单，它们太庞大了，它的百分之九十的功能我都用不上。

下面是效果展示：我是用的`AmazeUI`做的当然，这都不重要，你只需要一个有`Table`标签的`Html`就可以了。  
![在这里插入图片描述][20190406223348530.png]  
第一步：写一段`html`

效果是这样的：  
![在这里插入图片描述][20190406223447643.png]  
第二步：新建一个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`这个参数的意义了。

下面写出`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"
        	}
        ]

效果如下

![在这里插入图片描述][2019040622370744.png]  
总结：这个段代码的难点是数据名称的对比，需要有一点点算法的功力，要对js对象的遍历（`key-value`）这种的稍微有点熟悉。算法应该还有优化的空间。

作为一个插件当然这只是一小部分；但是是比较重要的部分，还有其他的功能需要实现。比如，分页、搜索、排序、点击row的触发的事件。之后我会继续写文章的。

[20190406223348530.png]: /images/20210626/570ac32bc593449781658998c1840f82.png
[20190406223447643.png]: /images/20210626/8a1ad3a870ff48ce8291aef8bc747eea.png
[2019040622370744.png]: /images/20210626/9194e5282c644d39842ad7aaa35752d6.png