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

html

#--keyword 1

#---原理和流程 1

#----jq实现的代码 1

#-----Angular 的实现 3

#--keyword

jquery 遍历表格tr  td

Angular 模板绑定

#---原理和流程

获得全部的行,第一的头行..排除,,,在的全部的删除.

遍历表格tr获得tds的全部的id数组.

依据id/id索引来获得绑定的数据源里面的数据字段..绑定到个td上..

或者easy的使用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();

//将新一行的button加入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 #-----An ...

  2. 怎样使用ListView实现一个带有网络请求，解析，分页，缓存的公共的List页面来大大的提高工作效率

    在寻常的开发中常常会有非常多列表页面.每做一个列表页就须要创建这个布局文件那个Adapter适配器文件等等一大堆与之相关的附属的不必要的冗余文件. 假设版本号更新迭代比較频繁,如此以往,就会使项目pr ...

  3. Android Studio in OSX 提高工作效率的快捷键

    前言 本篇文章参考了<倍数提高工作效率的Android Studio>一文,快捷键基于OS X系统. OS X Yosemite 10.10.5 Android Studio 1.3.1 ...

  4. 倍数提高工作效率的 Android Studio 奇技

    来源:JeremyHe 链接:http://zlv.me/posts/2015/07/13/14_android-studio-tips/ 这是从Philippe Breault的系列文章<An ...

  5. [转]倍数提高工作效率的 Android Studio 奇技

    转自:http://android.jobbole.com/81687/ 倍数提高工作效率的 Android Studio 奇技 2015/10/08 · 技术分享 · 4 评论· Android S ...

  6. 15款提高工作效率的 Web 项目管理工具

    在今天的快节奏的商业世界里,能够通过计划.组织.和管理资源池以及评估开发资源的模式来管理一个项目,是一个很艰巨的任务. 有很多现成的项目管理软件来帮助减轻项目管理的负担,并且他们几乎覆盖了所有类型的业 ...

  7. 程序员提高工作效率的15个技巧【Facebook】

    程序员提高工作效率的15个技巧[Facebook] 作者: habadog 日期: 2015 年 02 月 13 日发表评论 (0)查看评论 程序员提高工作效率的15个技巧[Facebook] 1,D ...

  8. 线上操作使用tmux提高工作效率

    对于常常在线上操作的人来说有一种烦恼,就是在操作过程中,有事离开了一下,电脑自己主动睡眠了.然后网络断开连接.这时候任务就要又一次跑.非常烦恼. tmux能够解决问题. tmux能够看成虚拟屏幕,不受 ...

  9. Vin码识别（车架号识别）技术，摆脱手动录入提高工作效率

    本文主题:Vin码识别(车架号识别)技术,摆脱手动录入提高工作效率 本文关键词:Vin码识别,汽车Vin码识别,车架号识别,汽车车架号识别,车代码识别,车代号识别 本文主旨:一.Vin码(车架号)在什 ...

随机推荐

  1. deque,list,queue,priority_queue

    1.deque deque双端队列容器与vector一样,采用线性表顺序存储结构,但与vector唯一不同的是,deque采用分块的线性存储结构来存 储数据,每块的大小一般为512字节,称为一个deq ...

  2. CacheHelper工具类的使用

    package com.bbcmart.util; import net.sf.ehcache.Cache; import net.sf.ehcache.CacheManager; import ne ...

  3. silverlight游戏在坑内发展

    最初做<金X>使用silverlight它是由于右手锯的深蓝色silverlight游戏开发教程,在这里,好评,写得很好的教程!基于这样的思想游戏覆盖.你可以给游戏开发商新提供的非常多的思 ...

  4. iOS ，呼叫捕获抛出勉未知方法的障碍

    iOS 捕获未知方法的调用,避勉抛出异常 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...

  5. Mit 分布式系统导论,Distributed Systems ,lab1 -lab6 总结，实验一到实验六总结

    终于把Mit的分布式系统导论课的实验1-6写完了 做得有些痛苦,但是收获也很大 http://pdos.csail.mit.edu/6.824-2012/labs/index.html 把实验1-6用 ...

  6. eclipse3.1.1汉化版安装

    确认安装好jdk以后,下载eclipse3.1.1及多语言包eclipse3.1.1 下载地址   http://eclipse.areum.biz/downloads/drops/R-3.1.1-2 ...

  7. myeclipse中，项目上有个叉报错，文件没有错误

    同事将他的java项目交接给了我.和平时的交接一样.他把他最新的源码.打成压缩包,发给我. 我解压后.使用myeclipse开发工具.通过导入,将项目导入到我的开发工具中.这个时候有一个问题出现了.在 ...

  8. Javascrpt 页面工具

    /**  *  笔者:DL  *  时间:2014-3-19   * PagingTool模块提供最基本的.网页工具栏.和页面数据 回电话 可扩展性 分页工具栏介绍,和页面呈现的数据   *   主意 ...

  9. Akka边学边写（3）-- ByteString介绍

    Akka的IO层设计能够參考这篇文档,本文简介一下ByteString的设计. Immutable消息 Actor之间是通过消息沟通的.但为了避免同步问题,消息必须是Immutable. 因此.Akk ...

  10. Python学习入门基础教程(learning Python)--3.2 if-else分支语句

    if-else分支语句结构的特点是当conditon条件满足时,执行if下的语句块,当condition条件不满足时执行else下的语句块,也就是说根据条件来控制让某些语句执行,某些语句不被执行. i ...