2018-01-31 AngularJs下拉框在编辑页面传值问题、map集合类迭代方法、JS与DOM编程艺术—— 最佳实践、获取list中具体某一元素某一字段的值、返回文档中匹配指定的选择器组

第一组:姚成栋 AngularJs下拉框在编辑页面传值问题

编辑页面的数据我们往往是通过查询页面的model传过来的,类似于


而编辑页面的js中只需要在头部引入model,就可以接收到查询页面的trainoutline数据。如果要展示在编辑页面上只需要用$scope.model=model即可。在一般情况下,数据能轻而易举传到前台,但是如果遇到下拉控件,类似于如下图


虽然能正常显示数据,但是因为传的值仅仅是赋给其中的model.BT_TheoryTeacherType,而不是ng-model的searchPara.BT_TheoryTeacherType,所以无法保存值。

解决这个问题也很简单,直接在控制器中将model的值直接给searchPara.BT_TheoryTeacherType,类似于


即可。
再扯一点,如果你用的是多选,则需要换成数组,


但是多选的编辑页面展示暂时没想到什么好的方法,因为我也没遇到,等到实在要用了我再去研究~


第二组:徐晋 map集合类迭代方法

java中的map集合类用于存储键值对,提供键(key)到值(value)的映射,不允许键重复,值可以重复。
代码提供Map的两种迭代方式:keyset方法和entryset方法。并使用传统Iterator方式和增强for循环的方式进行迭代。

工程开发实践中,更多的会使用到entryset方法,重点掌握entryset!基础例子

1.  /** 
2.   *  
3.   * 功能:Map的迭代方式: 
4.   *      1.keyset方法 
5.   *          获取Map集合中的所有键的Set集合,然后通过Set集合中的键访问Map集合中相应的值 
6.   *      2.entryset 
7.   *          获取Map集合中所有的键值对,并以Map.Entry的格式存入Set集合中,然后通过 
8.   *      Map.Entry的getKey()和getValue()方法访问键值对 
9.   */  
10.   
11. package com.test.map;  
12.   
13. import java.util.Iterator;  
14. import java.util.LinkedHashMap;  
15. import java.util.Map;  
16. import java.util.Set;  
17.   
18. import org.junit.Test;  
19.   
20. public class Demo1 {  
21.       
22.     //传统方法迭代  
23.     @Test  
24.     public void test1(){  
25.           
26.         Map<Integer,String> map = new LinkedHashMap<Integer,String>();  
27.         map.put(1, "aa");  
28.         map.put(2, "bb");  
29.         map.put(3, "cc");  
30.           
31.         //传统  1.keyset  
32.         //获取map集合中的所有键的Set集合  
33.         Set<Integer> set = map.keySet();  
34.         Iterator<Integer> it = set.iterator();  
35.         while(it.hasNext()){  
36.             int key = it.next();  
37.             String value = map.get(key);  
38.               
39.             System.out.println(key + ":" + value);  
40.         }  
41.     }  
42.       
43.     @Test  
44.     public void test2(){  
45.           
46.         Map<Integer,String> map = new LinkedHashMap<Integer,String>();  
47.         map.put(1, "aa");  
48.         map.put(2, "bb");  
49.         map.put(3, "cc");  
50.           
51.         //传统  2.entryset  
52.         Set<Map.Entry<Integer,String>> set = map.entrySet();  
53.         Iterator<Map.Entry<Integer,String>> it = set.iterator();  
54.         while(it.hasNext()){  
55.             Map.Entry<Integer,String> entry = it.next();  
56.             int key = entry.getKey();  
57.             String value = entry.getValue();  
58.               
59.             System.out.println(key + ":" + value);  
60.         }  
61.     }  
62.       
63.       
64.     //使用增强for循环进行迭代  
65.     @Test  
66.     public void test3(){  
67.           
68.         Map<Integer,String> map = new LinkedHashMap<Integer,String>();  
69.         map.put(1, "aa");  
70.         map.put(2, "bb");  
71.         map.put(3, "cc");  
72.           
73.         //增强for循环  1.keyset  
74.         Set<Integer> set = map.keySet();  
75.         for(int key : set){  
76.             String value = map.get(key);  
77.               
78.             System.out.println(key + ":" + value);  
79.         }  
80.     }  
81.       
82.     @Test  
83.     public void test4(){  
84.           
85.         Map<Integer,String> map = new LinkedHashMap<Integer,String>();  
86.         map.put(1, "aa");  
87.         map.put(2, "bb");  
88.         map.put(3, "cc");  
89.           
90.         //增强for循环   2.entryset  
91.         Set<Map.Entry<Integer,String>> set = map.entrySet();  
92.         for(Map.Entry<Integer,String> entry : set){  
93.             int key = entry.getKey();  
94.             String value = entry.getValue();  
95.               
96.             System.out.println(key + ":" + value);  
97.         }  
98.     }  
99.       
100.    }  

第三组: JS与DOM编程艺术—— 最佳实践

笔记:

平稳退化:确保网页在没有JavaScript的情况下也能正常工作。
分离JavaScript:把网页的结构和内容与JavaScript脚本动作行为分开
向后兼容性:确保老版本的浏览器不会因为你的JavaScript脚本而死掉。
性能考虑:确定脚本执行的性能最优。

  • 渐进增强:所谓渐进增强就是用一些额外的信息层去包裹原始数据。按照“渐进增强”的原则创建出来的网页几乎(如果不是全部的话)都符合“平稳退化”原则。
    类似与CSS,JavaScript和DOM提供的所有功能也应该构成一个额外的指令层。CSS代码负责提供关于“表示”的信息,JavaScript代码负责提供关于“行为”的信息。行为层的应用方 式与表示层一样。

  • 分离JavaScript

var links= document.getElementsByTagName(“,”);
for(var i = 0;i<links,length;i++){
    if(links[i].getAttribute("class")=="popup"){
        links[i].onclick = function(){
          popUp(this.getAttribute("href"));
          return false;
      }
    }
}

以上代码把调用popUp()函数的onclick事件添加到有关的链接上。只要把它们存入一个外部的JavaScript文件,就等于是把这些操作从HTML文档里分离出来了。而这就是“分离JavaScript”的含义。

还有个问题需要解决:如果把这段代码存入外部文件,它们将无法运行。因为这段代码的第一行是:
var links= document.getElementsByTagName(“,”);

这条语句将在JavaScript文件被加载时立即执行。如果JavaScript文件是从HTML文档的<head>部分用<script>标签调用的,它将在HTML文档之前加载到浏览器。同样,如果<script>标签位于文档底部<body>之前,就不能保证哪个文件最先结束加载(浏览器可能一次加载多个)。因为脚本加载时文档可能不完整,所以模型也不完整。没有完整的DOM,getElementsByTagName等方法就不能正常工作

必须让这些代码在HTML文档全部加载到浏览器之后马上开始执行。还好,HTML文档全部加载完毕时将触发一个事件,这个事件有它自己的事件处理函数。

文档将被加载到一个浏览器窗口里,document对象又是window对象的一个属性。当window对象出发onload事件时,document对象已经存在。

我将把我的JavaScript代码打包在prepareLinks函数里,并把这个函数添加到widow对象的onload事件上去。这样一来,DOM就可以正常工作了:

window.onload = prepareLinks;
function prepareLinks(){
  var links= document.getElementsByTagName(“,”);
  for(var i = 0;i<links,length;i++){
      if(links[i].getAttribute("class")=="popup"){
          links[i].onclick = function(){
            popUp(this.getAttribute("href"));
            return false;
        }
      }
  }
}

别忘记把popUp函数也保存到那个外部JavaScript文件里去:

function popUp(winURL){
  window.open(winURL,"popup","windth=320,height=480");
}

第四组:李俊 获取list中具体某一元素某一字段的值

在增加信息的过程中,往往需要对新数据与原数据进行对比,以此判断新数据是否与原数据重复。若重复则添加(修改)无效,返回原值。而原值保存在一个list里面。如果将重复值的行、列值得到,就可从list中获取原值。本例中,newData是新数据,nameType=1表示是对机型进行重复检测,caption存放原值,row表示当前行值,column表示当前列值:

private void checkDataRepeat(string newData, int nameType, string caption, int row, string column) {
    if (nameType == 1) {
        //机型重复检测
        if (checkShortRepeats.Contains(newData)) {
            XtraMessageBox.Show("所填机型数据已存在,请勿重复");
            //返回原值
            UIT4007 ACTypeInfo = new UIT4007();
            Loc.Support.GetT4007SearchPara SearchParam = new Loc.Support.GetT4007SearchPara {
                UIT_Model = ACTypeInfo
            };
            UIModelListResult < UIT4007 > originalData = DispatchHandler.GetAcTypeList(SearchParam);
            //对原数据进行更改失败的时候返回原值
            if (row < originalData.List.Length) {
                //取对应字段的值
                Model.UIT4007 fieldData = originalData.List[row];
                string testValue = "";
                Type type = typeof(Model.UIT4007);
                System.Reflection.PropertyInfo property = type.GetProperty(column);
                if (property != null) {
                    object cellValue = property.GetValue(fieldData, null);
                    testValue = (cellValue == null ? "": cellValue.ToString());
                }
                //修改失败的单元格数据重新返回原值,方法是通过以原值进行赋值     
                gridView1.SetRowCellValue(row, column, testValue);
                gridView1.RefreshRow(row);
            }
            //在新增数据过程中,对单元格增加失败时返回单元格最初空值状态
            else {
                gridView1.SetRowCellValue(row, column, "");
                gridView1.RefreshRow(row);
            }
        }
    }

第五组:周倩宇

返回文档中匹配指定的选择器组的第一个元素(使用深度优先先序遍历文档的节点 | 并且通过文档标记中的第一个元素,并按照子节点数量的顺序迭代顺序节点)。

语法

element = document.querySelector(selectors);
element 是一个 element 对象(DOM 元素)。
selectors 是一个字符串,包含一个或是多个 CSS 选择器 ,多个则以逗号分隔。

例子

这个例子中,会返回当前文档中第一个类名为 "myclass" 的元素:
var el = document.querySelector(".myclass");

例子:一个强大的选择方式

这个例子中,你将感受到selectors的强大。例子将返回<div class="user-panel main">标签中的<input name="login"/>标签。

<div class="user-panel main">
    <input name="login"/> //这个标签将被返回
</div>

<script>
    var el = document.querySelector("div.user-panel.main input[name=login]");
</script>
注意

如果没有找到匹配元素,则返回 null,如果找到多个匹配元素,则返回第一个匹配到的元素。

如果选择器是一个 ID,并且这个 ID 在文档中错误地使用了多次,那么返回第一个匹配该 ID 的元素。

如果指定的选择器不合法,则抛出 SYNTAX_ERR 异常。

querySelector()在 Selectors API 中引入。

传递给 querySelector 的字符串参数必须符合 CSS 语法。

CSS 伪类不会返回任何元素,见 Selectors API 中的相关规定。

如果要匹配的ID或选择器不符合 CSS 语法(比如不恰当地使用了冒号或者空格),你必须用反斜杠将这些字符转义。由于 JavaScript 中,反斜杠是转义字符,所以当你输入一个文本串时,你必须将它转义两次(一次是为 JavaScript 字符串转义,另一次是为 querySelector 转义):

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log('#foo\bar')               // "#fooar"
  document.querySelector('#foo\bar')    // 不匹配任何元素

  console.log('#foo\\bar')              // "#foo\bar"
  console.log('#foo\\\\bar')            // "#foo\\bar"
  document.querySelector('#foo\\\\bar') // 匹配第一个div元素

  document.querySelector('#foo:bar')    // 不匹配任何元素
  document.querySelector('#foo\\:bar')  // 匹配第二个div
</script>

例子:http://www.runoob.com/jsref/met-document-queryselector.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • 概述 document节点是文档的根节点,每张网页都有自己的document节点。window.document属...
    许先生__阅读 603评论 0 2
  • 在韩国刘在石的人气可以说是到达了家喻户晓的程度。在中国,爱好韩国综艺节目的人对刘在石这个名字也许也都不陌生。 人物...
    简单的亲故阅读 1,065评论 6 9
  • 简粉下载是一款可以将简书上的文章保存为HTML文件的Windows软件,图文排版与简书保持一致,为文章(包括插图)...
    逸之阅读 687评论 10 5
  • 我选择,安于烟花巷陌 煮酒消茶 听蝉时雨 闻叶下歌 我选择,游离烟火之外 描江夜花 绘红尘梦 浪迹天涯
    予行其前雾徙而随阅读 343评论 2 3