动态加载页面数据的小工具 javascript + jQuery (持续更新)

使用该控件,可以根据url,参数,加载html记录模板(包含json参数对应,以及具体记录位置Index根据参数描述加载对应的属性,并可以根据简单的判断分支加载对应html或者控件)至列表容器内(JQuery选择器字符串)
注:
该控件在使用前需引入JQuery框架支持,使用该控件,可极大的减少Ajax列表数据动态加载开发工作的实际工作量。

使用方式:

首先,添加控件引用,并加入Jquery支持

<script src="js/jquery.js"></script>
<script src="js/dynamicLoad.js"></script>

  其次,加入需要绑定数据的模版(有两种方式添加该模版),可在同一页面中绑定多个模板。

    添加模板调用方法

html_tmplt.addCtnr(arguments);
  arguments详解:slt, length, temp, url, data, first, end, callback

  • slt:JQuery selector

  • length:显示数量(暂未正式使用)

  • temp:模版内容

  • url:请求url地址(该控件会针对此url对数据进行前台缓存)

  • data:请求参数

  • first:在数据迭代前插入的第一项内容

  • end:在数据迭代后插入的最后一项内容

  • callback:绑定完成后执行的回调方法
 

  

  • 在调用添加绑定的方法内部,直接加入字符串格式的模版内容;

("#dgReckoningInfo1 tbody", 5,

‘<li{[class][no1;no2]}><span>{key3}</span><a href="{InfoList}"{[style][color:red;color:blue]}>{key1[1:试一下样式{key1};2:efg]}{GII_Head}</a></li>‘

, ‘handler.ashx‘, { r: Math.random(), type: "serviceList" });

  

  • 将模版内容放置在一个容器内部,通过dom得到该容器内的模板。

    html_tmplt.addCtnr(".pcomment", 10,$("#tmlCommentItm").html(), "getCommentByRelationId.do", { relationId: "1", pageIndex: pageIndex, pageSize: pageSize });

    执行绑定数据调用
    dynamicLoad.init({options});
模板绑定表达式说明:

        //temp 内置参数说明:
// {parmName}为仅根据json内的key替换对应的value 如:{key3};
// {parmName[value1:output1;value2:output2;value3:output3...]} 如:{key1[1:<input type="button" value="下载" />;2:已下载]};
// {[attrName][count1_AttrValue;count2_AttrValue...]} 如:{[style][color:red;color:blue;color;]};

 并可以根据实际情况,添加绑定数据完成后的事件操作,绑定表达式不需区分大小写。

控件下载地址以及详细使用方法:https://dljdtc.codeplex.com/

最新版现在已经支持对日期格式化、为每个模板添加回调函数等操作。我会尽快更新最新版,供大家使用。

动态加载页面数据的小工具 javascript + jQuery (持续更新),布布扣,bubuko.com

时间: 2024-10-25 16:57:33

动态加载页面数据的小工具 javascript + jQuery (持续更新)的相关文章

爬虫再探实战(三)———爬取动态加载页面——selenium

自学python爬虫也快半年了,在目前看来,我面临着三个待解决的爬虫技术方面的问题:动态加载,多线程并发抓取,模拟登陆.目前正在不断学习相关知识.下面简单写一下用selenium处理动态加载页面相关的知识.目标——抓取页面所有的高考录取分数信息. 对于动态加载,开始的时候是看到Selenium+Phantomjs的强大,直接就学的这个.打开网页查看网页源码(注意不是检查元素)会发现要爬取的信息并不在源码里面.也就是说,从网页源码无法通过解析得到数据.Selenium+Phantomjs的强大一方

ext combobox动态加载数据库数据

前台: var provinceStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: basePath + "/stationManage/station_getProvinceJSON.action" }), reader: new Ext.data.JsonReader( { root: "" }, ["PROVINCEID", "PROVINCENAME

viewpager动态加载listView数据

package com.example.viewpage; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.annotation.SuppressLint; import android.app.Activity; import android.graphics.BitmapFactory; import androi

Echarts使用及动态加载图表数据

Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地域.访问者).全方位分析网站流量的统计标准,形成原始数据,数据视觉化,数据行为化,数据深入挖掘的数据分析的模式 2.指标(衡量数据) 指标是指可以按总数或比值衡量的具体维度元素.例如,维度"城市"可以关联指标"人口",其值为具体城市的居民总数  

动态加载表格数据(自定义)

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> tr>td{ width: 100px; border: 1px solid red; } </style></head><body><ul id="boxU

在页面中使用拼接字符串的方式显示动态加载的数据

在做页面的时候为了使页面美化,我们经常会用拼接字符串的方式,动态加载后台的数据,这里我们使用的前台框架是bootstrap,但是很多效果还是要用jquery来实现 (1)方法传参与字符串的拼接  (拼接用的replace) 先声明一个展示数据的页面模型(使用过的模型1) var userModel = "<div class=\"itemdiv commentdiv\" style=\"margin-left: 7%;\">"+ &q

Echarts动态加载后台数据

注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后台返了个二维数组过去. 前端JSP页面:为Echarts准备一个具有高宽的dom容器 前端JS:初始化时即加载Echarts,将不需要进行加载的配置项(例如title.tooltip等)不作改动,将需要动态加载数据的配置放入ajax的success:function(){}中进行处理. 定义一个为s

Echarts ajax动态加载json数据

后台php写的,给前台准备好json格式数据 public function actionGetOffline(){ $userid = Yii::$app->user->identity->user_id; $connection = Yii::$app->db; $command = $connection->createCommand("SELECT proc_phase_id from tb_pro where user_id like '%$userid%

python获取动态网站上面的动态加载的数据(初级)

我们在处理一些网站数据的时候,有时候我们需要的数据很多都是动态加载的,而不都是静态的,以下以一个实例来介绍简单的获取动态数据,首先申明本人小白,还在学习python中,这个方法还是比较笨拙的,但是对于初学者还是需要知道的. 首先我们的要求是获取下面文章的参考文献: 刚刚开始,我的想法是使用lxml.BeatifulSoup.正则表达式来处理,这几个是处理静态网站的常用方法,查看网页源码我们会发现相应的div里面是空,也就是说上面的数据不是静态的,而是后面动态加载的,利用googl浏览器可以看到: