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

时间:2022-05-22 16:30:11

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="button" />

</td>

</tr>

</table>

<p> </p>

<p><script src="jquery-1.11.0.min.js"></script> </p>

<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="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>