很久不写文档,平时只写日记,所以对这个有点生疏,如果写的不好别介意。

  今天闲的蛋疼,于是要写写白天的东西,并且以后也会一直更新(一直写)下去。

  时间太仓促了,这几个月,今天算最晚的一次凌晨1点,吃不消的路过。

  进入正题!

  这是一个每次点击添加指定数据的插件,基于jQuery封装,调用方法名batchLoading,简单到一键操作,不用每次都来一次了,爽滋滋。

  实现方法如下:

  HTML

<div class="default-batch-box batch-box">
<ul class="default-list-box">
</ul>
<div class="default-batch-unlock">
<span></span>
</div>
</div>

  JAVASCRIPT

<script>
var data = [1,2,3,4,'a','b','c','d',1,2,3,4,5,6,9,]
batchLoading({
node: ['.default-list-box','.default-batch-unlock'], // 第一个节点为添加数据class 第二个为点击事件class
data: data, // 总数据
default: 2, // 默认从第几条数据开始
everyTime: 4, // 每次添加多少条数据
method: function (data) { // 循环数据
var str = ''
var tiny = data
str += '<li>'
str += '<span>' + tiny +'</span>'
str += '<span>上海</span>'
str += '<span>机械业</span>'
str += '<span>加载器</span>'
str += '<span>去参团</span>'
str += '</li>'
return str
},
complate: function () {
alert('加载结束')
}
})
</script>

  封装的方法 batchLoading.js

 (function  (g) {
var _plus = 1
function addBatchTemplate (data, start, stop, everyTimes, fallBack, complate) {
var str = ''
if ((stop-everyTimes) <= data.length) {
for (var i = start; i < stop; i++) {
if (data[i]){
var tiny = data[i]
str += fallBack(tiny)
}
}
}
else {
complate()
}
return str
} function implementionAddBatchTemplate (option, start, stop, everyTimes, fallBack, complate) {
$(option.node[0]).append(addBatchTemplate(option.data, start, stop, everyTimes, fallBack, complate))
} function excuteBatchLoadData (option, everyTimes, fallBack, complate) {
var start = _plus
implementionAddBatchTemplate(option, start * everyTimes, ++_plus * everyTimes, everyTimes, fallBack, complate)
} function handleEventLoadData (option, everyTimes, fallBack, complate) {
$(option.node[1]).unbind('click').on('click', function (e) {
excuteBatchLoadData(option, everyTimes, fallBack, complate)
})
} function batchLoading (params) {
implementionAddBatchTemplate(
{
data: params.data,
node: params.node
},
params.default,
params.everyTime,
params.everyTime,
params.method,
params.complate
)
handleEventLoadData(
{
data: params.data,
node: params.node
},
params.everyTime,
params.method,
params.complate
)
} g.batchLoading = batchLoading
})(this ? window : global)

  上效果图,目前看到的是每点击一次加4条数据,默认从第二条数据开始,完成之后点击调用complate方法。

  演示DEMO(从0开始)点击加载数据

  git代码:https://github.com/ZWLTZ/batchLoading/tree/master

JS每点击一次添加多少条数据的更多相关文章

  1. mybatis+oracle添加一条数据并返回所添加数据的主键问题

    最近做mybatis+oracle项目的时候解决添加一条数据并返回所添加数据的主键问题 controller层 @RequestMapping("/addplan") public ...

  2. 新建一个DataTable如何手动给其添加多条数据!

    早晨起来,想起昨天利用winform做类似于sqlserver数据库导入数据功能的时候,用到了新建一个DataTable手动给其添加多条数据,平时用不到,需要的时候想不起来了,这次不妨把他记下来.以下 ...

  3. 向数据库添加100W 条数据 性能测试

    向数据库添加100W 条数据 性能测试 : 参考的相关网站目录: JDBC实现往MySQL插入百万级数据 https://www.cnblogs.com/fnz0/p/5713102.html MyS ...

  4. mvc添加多条数据到数据库

    from : http://www.th7.cn/Program/net/201502/387849.shtml mvc的视图太强大了,个人刚刚接触.(初级菜鸟,懂的不多,往大神们指点)需求是,客户点 ...

  5. asp.net mvc添加多条数据到数据库

    mvc的视图太强大了,个人刚刚接触.(初级菜鸟,懂的不多,往大神们指点)需求是,客户点击添加按钮弹出一个框选择产品后直接添加到表单中,在表单可以自己更改产品的数量,以及一些信息.mvc表单提交的时候只 ...

  6. MySQL 快速添加百万条数据

    需要向数据库添加100W条测试数据,直接在普通表中添加速度太慢,可以使用内存表添加,然后将内存表数据复制到普通表 创建表 # 内存表 DROP TABLE IF EXISTS `test_memory ...

  7. JS 通过点击事件动态添加文本框

    直接拷贝到浏览器就能实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <htm ...

  8. ThinkPHP框架 【 AJAX方法返回 】 例子:简单添加一条数据 和 查询一个表里的数据

    注:thinkphp使用ajax和之前使用ajax的方法一样,不同点在于之前的ajax中的url指向了一个页面,而thinkphp里面的url需要指向一个操作方法. 在模块控制器Controller文 ...

  9. 利用bulk添加百万条数据,进行测试

    (1)连接数据库 public static void BulkToDB(DataTable dt) { //数据库连接 SqlConnection sqlCon = new SqlConnectio ...

随机推荐

  1. Window 7 安装Docker toolbox , 启动terminal时遇到的小问题

    参考:http://blog.csdn.net/tina_ttl/article/details/51372604 参考前面网页成功安装后打开terminal,出现下面问题: Looks like s ...

  2. linux下编译Boost库

    下载源码 boost_1_66_0.tar.gz 生成编译工具 # tar axf boost_1_66_0.tar.gz # cd boost_1_66_0 # yum install gcc gc ...

  3. 二维偏序 tree

    tree(二维偏序) 最近接触到一些偏序的东西. 传统线段树非叶子节点的划分点mid=(l+r)/2,但小R线段树mid是自己定的.但满足l<=mid<r,其余条件同原来线段树.那么不难发 ...

  4. Python Day24

    AJAX 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作 ...

  5. HDU2047 阿牛的EOF牛肉串

    题目:https://blog.csdn.net/qq_40932661?t=1 表面上看去似乎无从下手.但是可以从前面地推出后面的 递推: 假如涂第N个位置,有两种可能,①涂O ②不涂O. 如果涂O ...

  6. angularjs 使用angular-sortable-view实现拖拽效果(包括拖动完成后的方法使用)

    首先还是看效果图吧,方便大家可以快速得知是否是自己需要的功能:(抱歉电脑还未安装动图软件,先用.png) 如果上图是你需要的功能效果图,那么请往下看,我有写出来例子哦~ 使用这个插件有几个好处,首先: ...

  7. Proxy模式(代理[延迟]模式)

    Proxy?? Proxy是"代理人"的意思,它指的是代替别人进行工作的人.代理实际上就是使用委托的机制,在代理的过程中你可以做点其他的事情,然后再来执行被代理对象的代码. 知识储 ...

  8. JOS lab1 part2 分析

    lab1的Exercise 2就是让我们熟悉gdb的si操作,并知道BIOS的几条指令在做什么就够了,所以我们也会尽可能的去分析每一行代码. 首先进入到6.8282/lab这个目录下,输入指令make ...

  9. Flask&&人工智能AI --3

    一.flask中的CBV 对比django中的CBV,我们来看一下flask中的CBV怎么实现? from flask import Flask, render_template, url_for, ...

  10. docker镜像的分层结构三

    docker的镜像分层 docker里的镜像绝大部分都是在别的镜像的基础上去进行创建的,也就是使用镜像的分层结构. 实验 比如说使用dockerfile去创建一个最简单的hello镜像.创建好对应的d ...