动态加载页面数据的小工具 javascript + jQuery （更新时间：2014/8/28）

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

 

更新记录

//更新记录
//2014年8月28日 重命名的对象，由 dynamicLoad 重命名为 dljdtc

 

使用方式：

首先，添加控件引用，并加入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

dl_html_tmplt.addCtnr("#list", 0, $("#tmpItem").html(), url, "", "", $("#lastItm").html(), function (oData) { 
　　　　　　　　　　　　　doSomething() ;             });

 

• 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" });


//也可使用 <script id="tmpItem" type="text/template"> template </script>指定模板内容，如下：

<script id="tmpItem" type="text/template">

        <div class="h127 pt20 bbline1cE4 chkItm" _id="{代码}" _htcode="{编号}">
            <div class="chk fl"></div>
            <div class="fl ml20 mb7 w80">
                <p class="mt4">
                    <span class="fs16 fwb fc30">{名称}</span>
                    <span class="fs11 fcA8 ml30">质押时间：{date("{日期}","yyyy-MM-dd")}</span>
                </p>
                <p class="fcAC fs12 mt23">
                    Name：
                </p>
            </div>
            <div class="fs25 pl50 mt7 fc5D toDetail">
                {金额}元
                <img class="fr" style="height:26px;" src="img/arrow.png" />
            </div>
        </div>

    </script>

 

<script id="beginItm" type="text/template">
<p class="fs15 fc30 fwb">可撤销的委托</p>
<p class="fs12 mt6">注：当日申请15:00前可撤</p>
<div class="bbline1cD mt7"></div>
</script>
<script id="lastItm" type="text/template">
<div class="h125 w100"></div>
</script>

　　//绑定可以使用如下以下方法

             dl_html_tmplt.addCtnr("#list", 0, $("#tmpItem").html(), url, "", "", $("#lastItm").html(), function (oData) { 
　　　　　　　　　　　　　doSomething() ;             });
             dljdtc.init({options});

 

　　

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

 

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

 

    执行绑定数据调用

    dynamicLoad.init({options});　　---old，1.2之前的版本使用dynamicLoad

模板绑定表达式说明：

        //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/

现在版本已经是1.2。

 绑定效果1：

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