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

最新推荐文章于 2020-09-26 22:23:24 发布
原创 最新推荐文章于 2020-09-26 22:23:24 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用jQuery和AngularJS将JSON数据绑定到HTML表格中。首先通过jQuery清除多余行并获取列名，然后循环JSON数据填充表格。AngularJS部分展示了使用ng-repeat指令简化绑定过程。

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.youkuaiyun.com/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.提升效率---源码生成流程图工具
attilax的专栏
09-18 3379
paip.提升效率---源码生成流程图工具 常常，会发现一些又臭又长的代码。很难看清逻辑..最好的办法，就是一 款流程图生成器，从中生成流程图，以便分析流程，更改或者重构...   Code Visual 代码编辑器(code visual to flowchart v6.0) -------------------------------------------------------
paip.提升安全---网站登录密码明文传输的登录高危漏洞解决方案
attilax的专栏
09-21 1万+
paip.提升安全---绝大多数网站的登录高危漏洞解决方案   作者Attilax ， 1466519819@qq.com   WEB登录密码明文传输的严重性... 1 JS实现 RSA非对称加密算法... 1 加解密及传输流程... 1 后台产生一对公钥下发给WEB页... 2 WEB页JS调用公钥进行加密提交... 2 后台校验密码不能为空... 3
DataSet绑定数据到HTML的Table
weixin_30583563的博客
05-13 227
执行效果图 Default2.aspx页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:...
angular知识点--数据绑定
奇怪的人类
09-26 481
数据绑定一、绑定语法二、dom属性和html属性1. dom属性和html属性区别2. dom属性和html属性的关系三、html属性绑定四、双向绑定-ngModel 数据绑定： 将组件控制器的属性和方法跟组件的模板连接起来 一、绑定语法 插值表达式 {{ }} （将表达式的值显示在模板上） <p>{{productTitle}}</p> 属性绑定 [ ] （将标签属性绑定到表达式上） <img [src]="imgUrl"> 等价于 <img src="
paip.提高工作效率--数据绑定到table原则和过程Angular js jquery实现
weixin_33948416的博客
07-09 109
paip.提高工作效率--数据绑定到table原理和流程Angular js  jquery实现  html    #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #-----Angular 的实现 3     #--keyword  jquery 遍历表格tr  td Angular 模板绑定 #---原理和流程 获得全部的行,第...
动态绑定数据至Html Table
weixin_34278190的博客
10-29 883
学习或是开发asp.net程序，如果你很不喜欢使用GridView，DataList或是Repeater控件去显示来自数据库的数据，你完全可以使用html的table来完成。今天Insus.NET还让你知道动态去生成table的头以及数据行。asp.net有一个控件asp:Literal，它是能呈现html的代码。 OK，现在你可以在aspx网页布局你的显示布局：   去看看.aspx.cs...
squirrel-paip-v1.0.0-javadoc.jar
最新发布
10-18
squirrel-paip-v1.0.0-javadoc.jar
paip.提升用户体验---c++ qt 悬浮窗实现
attilax的专栏
09-23 7213
paip.提升用户体验---c++  qt 悬浮窗实现 作者Attilax ，  EMAIL:1466519819@qq.com  来源：attilax的专栏 地址：http://blog.csdn.net/attilax 功能:一个悬浮窗,一个普通窗体..  双击悬浮窗可以显示或者隐藏普通窗体... 1.建立悬浮窗: -----------------
Paip.语义分析----情绪情感词汇表总结
attilax的专栏
11-07 4901
Paip.语义分析----情绪情感词汇表总结   以下词语是按感情色彩共分为十四类：   作者Attilax  艾龙，  EMAIL:1466519819@qq.com  来源：attilax的专栏 地址：http://blog.csdn.net/attilax   一、喜 高兴、欢喜、满意、如愿、幸福、如意、顺心、随心、称心、快乐、高兴、豁朗、喜欢、愉快、甜美、愉快、舒服、甜蜜
angular中table绑定的值修改后，table不能渲染
qq_28584841的博客
11-20 919
记入坑angular之后，遇到的坑之一： <table mat-table [dataSource]="tableData"></table> 问题：直接给tableData push或者unshift添加值，输出的tableData是多了数据，但是页面不会渲染新添加的数据； 解决方案：先用深拷贝定义个临时变量缓存一下数组，操作临时变量，操作完了再把临时变量的值赋给tab...
table表格数据绑定
kevin的博客
04-18 4397
table表格数据绑定 开发工具与关键技术：VS、table表格数据绑定 作者：黄桂康 撰写时间：2019.04.16 上一次我们也讲了关于表格数据绑定的有关文章，但本篇是全表格数据绑定的介绍，table表格是我们经常用到的一种表格，用来组装数据的，也就相当一个书架子，上面堆满了整齐又排序的书籍，人们想查看什么书籍的时候，肯定是要从左到右或从右到左开始找书，第一层没有，就跳到第二层书架找，一层一...
angular 数据绑定的四种形式
四分之一工程师的博客
03-12 1256
&lt;div&gt; &lt;li&gt;{{hero.name}}&lt;/li&gt;&lt;app-hero-detail [hero]="selectedHero"&gt;&lt;/app-hero-detail&gt;&lt;li (click)="selectHero(hero)"&gt;&lt;/li&gt; &lt;/div
Table绑定数据源
zhangdepenghappy的专栏
12-18 1205
将一个list的数据源绑定到table中，再在div中显示出来    //绑定table     public void bindTAB(List lis)     {         //创建表格         Table tb = new Table() { ID = "tabsq" };         foreach (SurveyQuestion item in lis)
绑定表格数据
weixin_44540196的博客
05-16 1278
绑定表格数据 开发工具与关键技术：MVC专题技术 作者：彭春怡 撰写时间：2019/4/21 大家好，今天给大家介绍的是项目里面的表格是如何绑定数据。简单是挺简单的，不难理解就很容易了。就是在数据库查询出来进行绑定就可以了，绑定呢需要在视图里面进行绑定，把表格需要的内容进行绑定便可。 下面正式介绍表格的绑定： 图1： 图1是项目里面的表格，我们需要绑定的...
JSP页面Table的数据绑定
天高任鸟飞
07-27 4405
常规绑定方式 Controller @Controller @RequestMapping(value = "/biz/plan/daily-plan") public class DailyPlanController extends BaseController&lt;DailyPlanExt, String&gt; { // 日志记录 private static f...
angular6 table 使用ng for 添加列
huiqian1398的博客
11-15 3703
在使用过程中发现，后台获取到的数据，属性名称首字母到前台会变小写，而我们又想显示的列名首字母为大写 mat-heard-cell为显示名称，我们只需要使用管道将首字母大写即可 &lt;table mat-table [dataSource]="dataSource" matSort&gt; &lt;ng-container [matColumnDef]="column" *...
js 将json数据自动绑定到 html table 表格中
热门推荐
松龄的专栏
02-05 1万+
/*自動綁定到table*/ var f = new Function("+[{id:"1",name:"aa"},{id:"2",name:"bb"}]+"); var list = f(); var h= ""; h+= "" for(var headColumn in list[0]){ h+=""+headColumn+"" } h+="""; for(var i=0;i<list.l
paip
03-12
### PAIP编程珠玑中的示例代码解释 PAIP（Paradigms of Artificial Intelligence Programming）是一本深入探讨人工智能编程范式的书籍，其中包含了大量 Lisp 编写的程序实例。这些例子不仅展示了如何实现特定的人工智能算法，还提供了关于良好软件工程实践的重要见解。 #### 示例：通用求解器框架 书中介绍了一个名为 `defun` 的宏来定义函数，在构建通用问题解决器时非常有用[^1]： ```lisp (defun solve (problem) "Find a solution to the given problem." (let ((solution nil)) ;; Attempt to find a solution using backtracking. (labels ((try-next-option () (when (not solution) (if (no-more-options-p ()) (return-from try-next-option nil) (let* ((option (next-option))) (cond ((goal-reached-p option) (setf solution option)) (t (push-state option) (solve problem) (pop-state)))))))) (try-next-option) solution))) ``` 这段代码实现了回溯法解决问题的一般模式。通过递归调用自身并尝试不同的选项直到找到解决方案为止。如果当前路径无法通向目标，则会恢复之前的状态继续探索其他可能性。 此方法能够有效地处理许多复杂的组合优化类问题，并且由于其灵活性可以很容易地适应各种具体应用场景下的需求变化。 #### 示例：自然语言理解模块 另一个重要的部分涉及到了自然语言处理技术的应用案例——基于语法分析树结构来进行语义解析: ```lisp (defun parse-sentence (sentence) "Parse SENTENCE into its constituent parts and build an interpretation tree." (multiple-value-bind (subject verb-object) (split sentence 'verb) `(sentence :subject ,(parse-noun-phrase subject) :action ,verb-object))) (defun parse-noun-phrase (np-string) "Interpret NP-STRING as either a simple noun or compound phrase." ...) ``` 上述片段演示了如何将输入字符串分割成主谓宾成分，并进一步解析名词短语的具体含义。这种层次化的表示方式有助于后续更高级别的推理操作以及对话管理等功能的设计与实现。 #### 示例：专家系统规则引擎 最后值得一提的是书中对于专家系统的讨论，特别是有关于事实库管理和匹配机制的部分: ```lisp (defstruct fact id pattern bindings) (defun match-patterns (pattern facts) "Return all FACTS that unify with PATTERN, along with their BINDINGS." ...) (defun add-fact (kb new-fact) "Add NEW-FACT to knowledge base KB after checking consistency against existing rules." ...) ``` 这里展示了一种简单而有效的知识表达形式及其相应的查询接口设计思路。通过对模式进行统一化计算从而快速定位符合条件的事实条目；而在更新数据库前则需确保新加入的信息不会引起逻辑矛盾等问题的发生。 以上仅是从《Programming Pearls》一书摘取的一些精彩片段，实际上该著作涵盖了更为广泛的内容领域和技术细节等待读者去发掘学习。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值