使用该控件,可以根据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