自己做一个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的触发的事件。之后我会继续写文章的。
自己做一个table插件 (一)Ajax获取数据后动态生成table相关推荐
- ajax异步获取数据后动态向表格中添加数据的页面
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...
- ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...
- ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
- highcharts ajax 数据格式,Highcharts ajax获取json对象动态生成报表生成 .
最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得. 重点说明此代码是针对一个报表显示多个项对比显示. 直接贴代码:web端 $(documen ...
- ajax获取数据后渲染到页面方法
$.ajax({url:"apiAttachmentAction_uploadAttachment.action", type:"post", data:for ...
- Echarts通过ajax获取数据定时更新轮询的解决方案及问题分析
一.目前网上常用的解决方案 //将ajax封装起来启用一个定时器达到三秒抓一次数据 window.function(){setInterval(ajaxNew(),3000); } 存在的问题是,首次 ...
- 商品类型的下拉框绑定一个事件,通过ajax获取属性
html代码这么写 <!-- 商品属性 --> <table cellspacing="1" cellpadding="3" width=&q ...
- Datatables学习(二)ajax获取数据
上一篇文章,讲解了datatables的基本创建,这一讲讲解datatables通过ajax异步获取数据 1.前提准备 以一个图书管理的表格为例,后台java代码就不细说了,这里主要讲解前端 数据库表 ...
- Chart.js使用及ajax获取数据
图表插件Chart.js使用 插件简介 安装 插件简介 chart.js是一个优秀的开源图表处理插件,内置条形,折现,雷达,时间刻度等等图表渲染. 安装 chart.js官网. 我这里使用2019年3 ...
最新文章
- 17-爬虫之scrapy框架五大核心组件工作流程及下载中间件介绍04
- hutool的定时任务不支持依赖注入怎么办_设计一个任务调度算法,时间轮算法,比优先队列更高效...
- angularjs html标签,jquery – 如何使用AngularJS获取和设置HTML标签的属性值?
- SQL多条件查询拼接in中条件方法
- webstorm的下载以及React环境搭建
- 工具使用教程 (一)【Git从原理到入门实用教程】
- html5用户注册页面代码,HTML5注册页面示例代码
- eop 文件打包下载大全 - 9000多首歌曲打包免费百度云下载
- 修复计算机会没有桌面文件吗,电脑桌面文件不见了怎么恢复
- win10和win8双系统安装
- 如果去掉数学前后的空格_excel表格数据消除前后空格-EXCEL表格中数据后面的空格怎么去掉,一条条手工删......
- 滴滴23届校招薪资正式开奖!算法岗最高 55w
- 北京电子科技学院计算机考研资料汇总
- “区块链+农业”助力乡村振兴
- 智慧农业:自动气象站
- Oracle表误操作恢复历史数据方法
- 物联网流量卡能用在手机上吗
- error: unrecognized arguments:问题
- MyBioSource丨艾美捷抗eIF4E抗体
- [数字规律、加减法] 罗马数字转整数