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>
paip.提升效率--数据绑定到table原理和流程Angular js jquery实现的更多相关文章
- paip.提高工作效率--数据绑定到table原则和过程Angular js jquery实现
paip.提高工作效率--数据绑定到table原理和流程Angular js jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #----- ...
- paip.提升效率--批量变量赋值 “多元”赋值
paip.提升效率--批量变量赋值 "多元"赋值 ##石麻是批量变量赋值. 为一组变量赋值. 例子 1 <?php $my_array = array("Dog&q ...
- paip.提升效率---filter map reduce 的java 函数式编程实现
#paip.提升效率---filter map reduce 的java 函数式编程实现 ======================================================= ...
- paip.提升效率--调试--日志系统日志参数含义---python
paip.提升效率--调试--日志系统日志参数含义---python #同时向控制台和文件输出日志 #日志参数含义 import logging log_format = '%(filename)s ...
- paip.提升效率---request自动绑定domain object
paip.提升效率---request自动绑定domain object #.keyword,subtitle关键字,子标题 ------------------------- 复制request属性 ...
- paip.提升效率--僵尸代码的迷思
paip.提升效率--僵尸代码的迷思 僵尸代码是指你的代码库里被注释掉的那部分代码, 很少去使用它,就像僵尸一样, 看雷kill-the-zombies-in-your-code ========== ...
- paip.提升效率---提升绑定层次--form绑定取代field绑定
paip.提升效率---提升绑定层次--form绑定取代field绑定 =================== 编辑form中,常常需要,绑定一个对象到个form.. 传统上要绑定field开始. ...
- paip.提升效率--gui 的选择--swing最佳实践swt awt
paip.提升效率--gui 的选择--swing最佳实践swt awt ////////////////弹出消息框． ////////////////myeclipse swing 开发最佳实践.. ...
- PAIP.提升效率----论项目知识库的建设。。
PAIP.提升效率----论项目知识库的建设.. 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net ...
随机推荐
- 普林斯顿结构 VS 哈佛结构
1. 冯·诺依曼结构 冯·诺依曼结构,又称为普林斯顿体系结构,是一种将程序指令存储器和数据存储器合并在一起的存储器结构.取指令和取操作数都在同一总线上,通过分时复用的方式进行:缺点是在高速运行时,不能 ...
- hdu 4006 The kth great number (优先队列）
/********************************************************** 题目: The kth great number(HDU 4006) 链接: h ...
- c++ 递归斐波那契算法及时间复杂度
#include<iostream> int fib(int n){ ) return n; else ) + fib(n-); } int main(){ ;i<;i++){ st ...
- 设置随处都可以调用tcc的编译环境
tcc的短小精悍,编译速度快,以及独特的直接运行c代码功能,让tcc成为一个出色的编译器,横跨linux,windows平台. 笔者目前尚处于学习c(ANSI c/ISO c)阶段,为了加强手写代码的 ...
- 如何编译Less
什么是LESS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种.它编译后就是CSS了,大名鼎鼎的前端框架BootStrap就是用这个语言写的 下面示范下怎么用LESS编译成CSS,尽量简 ...
- Web服务器Nginx多方位优化策略
标签:性能 Web 架构 Nginx 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://dongsong.blog.51cto.co ...
- 结合Apache和Tomcat实现集群和负载均衡
http://fableking.iteye.com/blog/360870 TomcatApacheJSP应用服务器Web 本文基本参考自 轻松实现Apache,Tomcat集群和负载均衡,经由实 ...
- 浅析Linux下进程间通信：共享内存
浅析Linux下进程间通信:共享内存 共享内存允许两个或多个进程共享一给定的存储区.因为数据不需要在客户进程和服务器进程之间复制,所以它是最快的一种IPC.使用共享内存要注意的是,多个进程之间对一给定 ...
- JS，数组小练习
var arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0];要求将数组中的0项去掉,将不为0的值存入一个新的数组,生成新的数组 p.p1 { margin: 0.0p ...
- 用SQL语句,删除掉重复项只保留一条
用SQL语句,删除掉重复项只保留一条 在几千条记录里,存在着些相同的记录,如何能用SQL语句,删除掉重复的呢1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select ...