2017.11.15 表格的样式设定、AuguarJS服务和依赖注入、String 方法、_main__.py文件与 python -m、JS刷新页面

第一组:杨昊 有关表格的样式设定问题——固定头、列

前几天接到的任务中,有这样一个需求:就是表单的头部、首列需要固定,不要随着滚动条的变化而移动,如下:


image.png

去网上查了一下,这种操作主要是css方面的,方法有很多,但是都逃不过两个属性:

position: relative; 
z-index:99;

position属性:规定元素的定位类型,relative是指生成相对定位的元素,相对于其正常位置进行定位。比如"left:20" 会向元素的 left 位置添加 20 像素。

z-index属性:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。其中,元素可拥有负的 z-index 属性值。z-index 仅能在定位元素上奏效。

我在实现这个操作时使用的是jQuery的方式,将样式动态注入。代码如下:

image.png

附代码:

首列固定

    $(".table-p").scroll(function () {
        if ($(".table-p").scrollTop() > 0) {
            var Htable_flinew2 = $(".table-p").scrollTop() + "px";
            $(".tdwid2").css("position", "relative");
            $(".tdwid2").css("background", "#fff");
            $(".tdwid2").css("top", Htable_flinew2);
        } else {
            $(".tdwid2").css("top", "0");
        }
        if ($(".table-p").scrollLeft() > 0) {
            var Htable_flinew = $(".table-p").scrollLeft() + "px";
            $(".table tbody tr td:first-child").css("left", Htable_flinew);
            $(".table thead tr th:first-child").css("left", Htable_flinew);
        } else {
            $(".table tbody tr td:first-child").css("left", "0");
            $(".table thead tr th:first-child").css("left", "0");
        }            
    })

第二组:冯佳丽 使用ng-repeat指令来循环图片数组并且加入img模板、AuguarJS服务和依赖注入、 scopes

1. 使用ng-repeat指令来循环图片数组并且加入img模板
function AlbumCtrl($scope) {
    scope.images = [
        {"image":"img/image_01.png", "description":"Image 01 description"},
        {"image":"img/image_02.png", "description":"Image 02 description"},
        {"image":"img/image_03.png", "description":"Image 03 description"},
        {"image":"img/image_04.png", "description":"Image 04 description"},
        {"image":"img/image_05.png", "description":"Image 05 description"}
    ];
}
<div ng-controller="AlbumCtrl">
  <ul>
    <li ng-repeat="image in images">
      <img ng-src="http://m.cnblogs.com/142260/{{image.thumbnail}}" rel="nofollow"/>
    </li>
  </ul>
</div>
2. AuguarJS服务和依赖注入
function EditCtrl($scope, $location, $routeParams) {
     // Something clever here...
}

定义自己的服务并且让它们注入:

angular.module('MyServiceModule', []).
    factory('notify', ['$window', function (win) {
    return function (msg) {
        win.alert(msg);
    };
}]);
function myController(scope, notifyService) {
    scope.callNotify = function (msg) {
        notifyService(msg);
    };
}
myController.$inject = ['$scope', 'notify']; 
3. scopes

$scope是一个把view(一个DOM元素)连结到controller上的对象。在我们的MVC结构里,这个 $scope 将成为model,它提供一个绑定到DOM元素(以及其子元素)上的excecution context。

$scope 实际上就是一个JavaScript对象,controller和view都可以访问它,所以我们可以利用它在两者间传递信息。在这个 $scope 对象里,我们既存储数据,又存储将要运行在view上的函数。

每一个Angular应用都会有一个 $rootScope。这个 $rootScope 是最顶级的scope,它对应着含有ng-app 指令属性的那个DOM元素。

app.run(function($rootScope) { $rootScope.name = "张三"; });

如果页面上没有明确设定 $scope ,Angular 就会把数据和函数都绑定到这里。

这样,我们就可以在view的任何地方访问这个name属性,使用模版表达式{{}},像这样:{{ name }} 。


第三组:黄华英 String 方法和页面调用

1. String 方法
String 方法 含义
string.charAt(i) 返回在 string 中 i 位置处的字符。
string.charCodeAt(i) 返回在 string 中 i 位置处的字符编码。比如字符串“hello world!”charCodeAt(1) 为101
str.indexOf(aaa, start) 在 str 中查找另一个字符串 aaa返回第一个被匹配字符的位置,否则返回-1,start表示查找的起始位置
str.lastIndexOf(aaa, start) 与 indexOf 方法类似,但它是从该字符串的末尾开始查找
strA.localeCompare(strB) 比较两个字符串。如果 strA比strB小,结果为负数,若相等结果为0
string.match(regexp) 它匹配一个字符串或者一个正则表达式,该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置

比如

str=”123456”
匹配字符串str.match(“12”)得到12
匹配正则表达式str.match(/\d+/g)得到123456
str.replace(searchstr, replacestr)对 string 进行查找和替换操作,并返回一个新的字符串
string.split(select, limit),split 方法把这个 string 分隔成片段来创建一个字符串数组

例如

var Strarray =“123456789”
Strarray.split(‘’,4)得到{1},{2},{3},{456789}四个数组
string.ToLower(),把 string 中的所有字母转换为小写格式
string.ToUpper(),把 string 中的所有字母转换为大写格式
string.fromCharCode(char...),从一串数字中返回一个字符串

2. 页面调用
  • 后台调用父页面方法并且关闭当前页面
Page.ClientScript.RegisterStartupScript(this.GetType(), "", "alert('操作成功!'); 
parent.ParentFunction ();parent.CloseAlertPage();", true);
  • 前台子页面调用父页面方法
parent.Parent Function();
  • 父页面调用子页面(iframe)的js方法
window.frames["iframe子页面的name"].方法名();

第四组:张元一 __main__.py文件与 python -m

PYTHON 的 -M 参数用于将一个模块或者包作为一个脚本运行,而__MAIN__.PY 文件则相当于是一个包的”入口程序“。

首先我们需要来看看 PYTHON XXX.PY 与 PYTHON -M XXX.PY 的区别。两种运行 PYTHON 程序的方式的不同点在于,一种是直接运行,一种是当做模块来运行。

先来看一个简单的例子,假设有一个 PYTHON 文件 RUN.PY,其内容如下:

IMPORT SYS
PRINT SYS.PATH

我们用直接运行的方式启动(PYTHON RUN.PY),输出结果:

['/HOME/HUOTY/ABOUTME/PYTHONSTUDY/MAIN', ...]

然后以模块的方式运行(PYTHON -M RUN.PY):

['', ...]
/USR/BIN/PYTHON: NO MODULE NAMED RUN.PY

由于输出结果只列出了关键的部分,应该很容易看出他们之间的差异。直接运行是把 RUN.PY 文件所在的目录放到了 SYS.PATH 属性中。以模块方式运行是把你输入命令的目录(也就是当前工作路径),放到了 SYS.PATH 属性中。以模块方式运行还有一个不同的地方是,多出了一行 NO MODULE NAMED RUN.PY 的错误。实际上以模块方式运行时,PYTHON 先对 RUN.PY 执行一遍 IMPORT,所以 PRINT SYS.PATH 被成功执行,然后 PYTHON 才尝试运行 RUN.PY 模块,但是,在 PATH 变量中并没有 RUN.PY 这个模块,所以报错。而正确的运行方式,应该是 PYTHON -M RUN.

这个例子并不能明显的说明问题。接着我们来看看__MAIN__.PY的作用。

仍然先看例子,有如下一个包:

package
├── __init__.py
└── __main__.py
__init__.py
import sys
print "__init__"
print sys.path
__main__.py
import sys
print "__main__"
print sys.path

用 PYTHON -M PACKAGE 运行结果:

__init__
['', ...]
__main__
['', ...]

用 PYTHON PACKAGE 运行结果:

__main__
['package', ...]
  • 加上 -m 参数时会把当前工作目录添加到 sys.path 中,而不加时则会把脚本所在目录添加到 sys.path 中。
  • 加上 -m 参数时 Python 会先将模块或者包导入,然后再执行
  • __main__.py文件是一个包或者目录的入口程序。不管是用 python package 还是用python -m package 运行时,__main__.py文件总是被执行。

第五组:姜葳 JS刷新页面

1. 刷新当前页面
<script> 
window.location.reload(); 
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>
2. JS实现刷新iframe的方法
<input type="button" name="Button" value="Button" 
onclick="document.frames('ifrmname').location.reload()"> 

< input type="button" name="Button" value="Button" 
onclick="document.all.ifrmname.document.location.reload()">
3. 子页面刷新父页面
(1)parent.location.href = parent.location.reload();

(2)<script language=JavaScript>
self.opener.location.reload();
</script> 

(或<a href="javascript:opener.location.reload()">刷新</a> )
4.开窗时刷新和关闭时刷新
<body onload="opener.location.reload()"> 开窗时刷新
<body onUnload="opener.location.reload()"> 关闭时刷新
5. AlertPage弹出的窗口,关闭时刷新

代码:

function InvoiceDetail() {
           AlertPage("AmInvoiceDetails.aspx?isNeedVerify=no&Type=verify”, "发票详情", 900, 800);
           OpeningDialog.openingDialog.bind("close", function () {
               location.reload();
           })
       }

流水落花春去也,天上人间

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

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,518评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139
  • 通过AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小恋阅读 1,726评论 1 21
  • python学习笔记 声明:学习笔记主要是根据廖雪峰官方网站python学习学习的,另外根据自己平时的积累进行修正...
    renyangfar阅读 2,949评论 0 10
  • Python 四五事 介绍 Python 相关工具,工作流程和测试框架。 发布于 2014.1.19最后更新 20...
    hzyido阅读 64,977评论 0 4