自己做一个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的触发的事件。之后我会继续写文章的。

热门工具换一换