今天我给大家带来一个简单的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的触发的事件。之后我会继续写文章的。