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

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

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

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> 

版权声明:本文博客原创文章,博客,未经同意,不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/117605.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 最简单的分类算法之一:KNN(原理解析+代码实现)[通俗易懂]

    最简单的分类算法之一:KNN(原理解析+代码实现)[通俗易懂]KNN(K-NearestNeighbor),即K最邻近算法,是数据挖掘分类技术中最简单的方法之一。简单来说,它是根据“邻近”这一特征来对样本进行分类。

    2022年5月15日
    46
  • 大疆对手–派若特Parrot AR.Drone无人机详细拆解解决方案测评

    大疆对手–派若特Parrot AR.Drone无人机详细拆解解决方案测评法国的派若特Parrot在消费无人机领域的千年老二,大疆深圳华强北优势太厉害。其实派若特Parrot的技术还是领先的,在光流和超声波的应用上是比较前沿的。今天小编就拆解ParrotAR.Drone2.0的这款飞机详细的看下他的解决方案,说不定可以受到启发用于我们飞控研发设计工作喔!不得不说这个飞机安全性非常高,就是空心杯电机,转速较低,机身采用泡沫塑料可是方便的替

    2022年8月15日
    6
  • oracle 11g安装教程完整版

    oracle 11g安装教程完整版64位WIN7+oracle11g+plsql安装上部转自Oracle11gR2forWin7旗舰版(64位)的安装步骤1、下载Oracle11gR2forWindows的版本 下载地址:http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html 其中包括两个压

    2022年7月26日
    7
  • shell循环打印「建议收藏」

    shell循环打印「建议收藏」#!/usr/bin/envbashstart=”$1″end=”$2″while[${start}-le${end}]doecho”${start}”start=$((${start}+1))donewhile[${start}-le${end}];doecho”${start}”start=$((${start}+1))do…

    2022年7月24日
    11
  • C++实现贪吃蛇(控制台)

    C++实现贪吃蛇(控制台)游戏介绍有一条蛇,在屏幕上爬,用上下左右键控制吃东西,吃得多了,到了一定积分,就能过关。越吃越长,不能碰墙,不能咬自己的尾巴,没了,哈哈。这个蛇是条很有个性的蛇它会吃多少吐多少(如果要取消这个特性可以在代码中修改一行代码即可,我已经标注出来了)话不多说直接上代码(代码中有详细注释)!可以直接运行的://本来我是想用C语言实现的无奈水平有限,只能在C++下执行了,注意:这里使用的字符集为Unicode#define_CRT_SECURE_NO_WARNINGS#include<s

    2022年5月9日
    51
  • 【软件工程】详细设计文档——详细设计说明书

    【软件工程】详细设计文档——详细设计说明书文章目录1引言1.1编写目的1.2项目背景1.3定义1.4参考资料2总体设计2.1需求概述2.2软件结构3模块描述3.1模块基本信息3.2功能概述3.3算法3.4模块处理逻辑3.5接口3.6性能3.7测试计划1引言1.1编写目的​ ​ 本报告的目的是对Asking进行详细设计说明,以便用户及项目开发人员了解产品详细的设计与实现。为开发人员提供开发参考书。以下叙述将结合文字描述、伪代码,图表等来描述Asking的详细设计和相关的模块描述。本报告的预期读者有客户、项目经

    2022年6月12日
    40

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号