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>

paip.提升效率--数据绑定到table原理和流程Angular js jquery实现的更多相关文章

  1. paip.提高工作效率--数据绑定到table原则和过程Angular js jquery实现

    paip.提高工作效率--数据绑定到table原理和流程Angular js  jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #----- ...

  2. paip.提升效率--批量变量赋值 “多元”赋值

    paip.提升效率--批量变量赋值 "多元"赋值 ##石麻是批量变量赋值. 为一组变量赋值. 例子 1 <?php $my_array = array("Dog&q ...

  3. paip.提升效率---filter map reduce 的java 函数式编程实现

    #paip.提升效率---filter map reduce 的java 函数式编程实现 ======================================================= ...

  4. paip.提升效率--调试--日志系统日志参数含义---python

    paip.提升效率--调试--日志系统日志参数含义---python #同时向控制台和文件输出日志 #日志参数含义 import logging log_format = '%(filename)s ...

  5. paip.提升效率---request自动绑定domain object

    paip.提升效率---request自动绑定domain object #.keyword,subtitle关键字,子标题 ------------------------- 复制request属性 ...

  6. paip.提升效率--僵尸代码的迷思

    paip.提升效率--僵尸代码的迷思 僵尸代码是指你的代码库里被注释掉的那部分代码, 很少去使用它,就像僵尸一样, 看雷kill-the-zombies-in-your-code ========== ...

  7. paip.提升效率---提升绑定层次--form绑定取代field绑定

    paip.提升效率---提升绑定层次--form绑定取代field绑定 =================== 编辑form中,常常需要,绑定一个对象到个form..   传统上要绑定field开始. ...

  8. paip.提升效率--gui 的选择--swing最佳实践swt awt

    paip.提升效率--gui 的选择--swing最佳实践swt awt ////////////////弹出消息框． ////////////////myeclipse swing 开发最佳实践.. ...

  9. PAIP.提升效率----论项目知识库的建设。。

    PAIP.提升效率----论项目知识库的建设.. 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net ...

随机推荐

  1. Scrum会议10.19

    Scrum会议 组名称:好好学习 项目名称:记账本 参会成员:林莉(Master)胡丽娜 宫丽君 汪东涵 时间:2016.10.19 已完成内容: 1.完成新项目的查找,查找学姐的代码和项目. 2.理 ...

  2. [刘阳Java]_Java程序员的成长路线_第3讲

    按照Java从业人员的职位晋升来说,Java程序成长路线大致如下 Java程序员 JavaEE初级软件工程师 JavaEE中级软件工程师 JavaEE高级软件工程师 Java架构师 按照职业发展方向, ...

  3. java多线程 ThreadPoolExecutor 策略的坑

    无论是使用jdk的线程池ThreadPoolExecutor 还是spring的线程池ThreadPoolTaskExecutor 都会使用到一个阻塞队列来进行存储线程任务. 当线程不够用时,则将后续 ...

  4. 解决: Can’t connect to local MySQL server through socket /var/lib/mysql/mysql.sock

    今天在搬瓦工上使用mysql 命令行,总报一个这样的错:Can't connect to local MySQL server through socket '/xxxxx/mysql.sock',一 ...

  5. AngularJs 返回上一页

    html <script src="lib/angular/angular-1.4.9/angular.js"></script> <script s ...

  6. Silverlight C1.Silverlight.FlexGrid 表格动态列

    很多时候,我们对于表格展示的数据,需要根据条件不停的变化,这就需要表格列能动态生成,即没有Model的概念(万物始于无形).先上主要代码: 一.根据参数绑定列定义 二.根据数据动态创建数据对象,并添加 ...

  7. sublime构建执行go程序真爽

    1.安装gosublime插件 2.直接在sublime下调试运行共程序,不用去cmd了: 选择编译系统,编译,出现下面的模拟命令行,直接执行go的命令即可,比如go run process.go,结 ...

  8. php pdo预处理语句与存储过程

    很多更成熟的数据库都支持预处理语句的概念.什么是预处理语句?可以把它看作是想要运行的 SQL 的一种编译过的模板,它可以使用变量参数进行定制.预处理语句可以带来两大好处: 1.查询仅需解析(或预处理) ...

  9. java图形化编程

    转载 学习Java Swing图形化编程,我们首先要了解三个最基本的概念:顶层容器,控件,布局. 下面就来介绍一下这三个基本概念 1.顶层容器 什么是顶层容器?当我们使用Java进行图形编程的时候,图 ...

  10. python 静态方法，类方法 ，类的继承

    转自:  http://cowboy.1988.blog.163.com/blog/static/75105798201091141521583/ 1.关于定义类的一些奇特之处  今天在Python中 ...