paip.提升效率--数据绑定到table原理和流程Angular js jquery实现
paip.提升效率--数据绑定到table原理和流程Angular js jquery实现
html
#--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>
相关文章
- AngularJS进阶(五)Angular实现下拉菜单多选
- php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码[通俗易懂]
- Js排序算法_js 排序算法
- angular面试问题_kafka面试题
- Angular 面试题汇总2-Component/Service (Angular v8+)
- angular基础面试题_java web面试题
- angular 路由懒加载_angular路由
- JS获取当前年份_js获取当前时间年月日
- Angular 应用里 ng-package.json 文件的作用是什么?
- 关于 Angular 应用的 Bootstrap 过程
- Angular 依赖注入错误消息:ERROR Error NullInjectorError No provider for XX
- 【源码】PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
- 使用JS连接MySQL数据库:实现化繁为简(js连接mysql数据库)
- 创建JS文件:在Linux下实现自动化任务(linux创建js文件)
- 用SQL Server和JS实现数据库管理技术(sqlserver.js)
- 数据JS技术实现实时获取Oracle数据(js实时获取oracle)
- JavaScript探索之旅掌握Oracle和JS的完美融合(js与oracle)
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- angular中使用路由和$location切换视图