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 ...
随机推荐
- 创建 XMLHttpRequest 对象
var _createHttpRequest = function () { var obj; if (window.XMLHttpRequest) obj = new XMLHttpRequest( ...
- libcurl多线程超时设置不安全(转)
from http://www.cnblogs.com/kex1n/p/4135263.html (1), 超时(timeout) libcurl 是 一个很不错的库,支持http,ftp等很多的协议 ...
- 《机器学习实战》学习笔记——第13章 PCA
1. 降维技术 1.1 降维的必要性 1. 多重共线性--预测变量之间相互关联.多重共线性会导致解空间的不稳定,从而可能导致结果的不连贯.2. 高维空间本身具有稀疏性.一维正态分布有68%的值落于正负 ...
- to_char 详解
对TO_CHAR的讨论可以分为从两种类型的数据到字符的转换:DATE和NUMBER. TO_CHAR函数返回VARCHAR2数据类型的值. 1. NUMBER TO CHAR 语法: TO_CHAR( ...
- win8.1 vs2010 C++环境下 编译Android Adb.exe
1 IntelliSense: cannot open source file "usb100.h" adb 这是因为没有安装sdk造成的.win7下安装wdk,vs2010能够 ...
- RTX2010服务器端的主要通信端口有哪些？
RTX服务端程序在安装之后,如果安装服务端电脑的操作系统有防火墙(如Windows XP.Windows2003等)或者安装了防火墙(如瑞星.Norton等),那么需要在防火墙上打开RTX所需要使用的 ...
- [转载] 散列表(Hash Table) 从理论到实用（下）
转载自: 白话算法(6) 散列表(Hash Table) 从理论到实用(下) [澈丹,我想要个钻戒.][小北,等等吧,等我再修行两年,你把我烧了,舍利子比钻戒值钱.] ——自扯自蛋 无论开发一个程序还 ...
- Daily Scrum 12.2
今日完成任务: 完成数据库文档说明:整理数据库(没整理完),明天继续:文档功能的修改以及在服务器上测试 明日任务: 黎柱金 整理数据库 孙思权 整理数据库 晏旭瑞 文档上传下载功能 冯飘飘 修复问题提 ...
- Json&Razor&控制器
JsonJson 属于JavaScript所以要书写在<script></script>中1.语法规则: 1.1:键值对 1.2:逗号分隔 1.3:花括号保存对象 1.4:方括 ...
- BufferedOutputStream的学习
今天写了一下一段代码,结果打开文件却发现要写入文件的内容不仅没写入,原来的内容也消失了,而控制台却显示原文件的内容都被读取出来了,代码如下: FileInputStream fileInputStre ...