首页 > 代码库 > paip.提升效率--数据绑定到table原理和流程Angular js jquery实现

paip.提升效率--数据绑定到table原理和流程Angular js jquery实现

paip.提升效率--数据绑定到table原理和流程Angular js  jquery实现

 html 

 

#--keyword 1

#---原理和流程 1

#----jq实现的代码 1

#-----Angular 的实现 3

 

 

#--keyword 

jquery 遍历表格tr  td

Angular 模板绑定

#---原理和流程

获得所有的行,第一的头行..排除,,,在的所有的删除.

遍历表格tr获得tds的所有的id数组.

根据id/id索引来获得绑定的数据源里面的数据字段..绑定到个td..

或者容易的使用mvc框架 Angular JS,Angular 也能绑定,实现dsl  4 html

 

作者 老哇的爪子 Attilax 艾龙,  EMAIL:1466519819@qq.com
转载请注明来源: http://blog.csdn.net/attilax

#----jq实现的代码

<table id="table1">  

        <tr id="tem">  

            <td id="awd">  

                awd  

            </td>  

            <td id="timex">  

                timex  

            </td>  

            <td id="BusinessName">  

                BusinessName  

            </td>  

            <td id="btn">  

                <input id="Button2" type="button" value=http://www.mamicode.com/"button" />

            </td>  

        </tr>  

    </table>

<p> </p>

<p><script src=http://www.mamicode.com/"jquery-1.11.0.min.js"></script>

 

<script>

bindJson2table("li.json","table1")

function bindJson2table(jsonUrl, tableID) {

    $.getJSON(jsonUrl, null,

    function(obj) {

 

        $("#" + tableID + " tr").eq(0).nextAll().remove(); //将除模板行的tr删除 

        //o430

        //todox jquery trav tr td 

        //jq get element list

        var tds = $("#tem td");

        var prpts = new Array();

        for (var i = 0; i < tds.length; i++) {

            prpts.push(tds[i].id);

        }

 

        //将获取到的数据动态的加载到table中  

        for (var i = 0; i < obj.length; i++) {

 

            //获取模板行,复制一行  

            var row = $("#tem").clone();

 

            //将新一行的按钮添加click事件  

            //    row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);  

            //注意:在jquery1.4.2中,上面的方法会出错,具体原因我也不知道,反正1.7.1这样写是没有问题的  

            //如果上面代码不行,你可以试一下  

            //row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);  

            //亲测上面的代码在1.4.2.min...中可以运行,这个问题的解决浪费了很长事件,都怪用了比较老的框架  

            for (var j = 0; j < prpts.length; j++) {

                var prpt = prpts[j];

                row.find("#" + prpt).text(obj[i][prpt]);

            }

            //    row.find("#awd").text(obj[i].awd); //流水号  

            //    row.find("#timex").text(obj[i].timex);   //汽车车牌号  

            //    row.find("#BusinessName").text(obj[i].BCRNAME);     //所办理的业务名称  

            //将新行添加到表格中  

            row.appendTo("#" + tableID);

        }

    });

 

}

</script>

 

#-----Angular 的实现

<html  ng-app>  //must jeig ,beirs ma fein.

 

  <script src=http://www.mamicode.com/"angular.min.js"></script>

 

<script>

 

 

function AlbumCtrl($scope) { 

    $scope.images = [ 

        {"url":" image_01.png", "description":"url 01 description"}, 

        {"url":" image_02.png", "description":"url 02 description"}, 

        {"url":" image_03.png", "description":"url 03 description"}, 

        {"url":" image_04.png", "description":"url 04 description"}, 

        {"url":" image_05.png", "description":"Image 05 description"} 

    ]; 

 

</script>

 

<div ng-controller="AlbumCtrl"> 

   

  <table width="600" border="1" cellspacing="0" cellpadding="0" ng-controller="AlbumCtrl">

    <tr>

      <td>img</td>

      <td>name</td>

      <td>op</td>

    </tr>

    <tr ng-repeat="image in images">

      <td>{{image.url}}---------</td>

      <td>{{image.description}}</td>

      <td>aaa</td>

    </tr>

  </table>