2017.11.16 AngularJs分页、 jquery、AppCan UI基础框架、Ajax 、实现全选执行批量操作

第一组:姚成栋 AngularJs分页

要正确并完整地显示分页信息,一定要注意以下几个点:

1. HTML页面上不能写错,模板如下
image.png

其中容易缺的是:max-size="10"最大显示页数(当页数很多时特别实用);

2. 对应的controller中
image.png

因为在Js/models.js中有定义


image.png

也可以自己对其进行定义。

3. 如果页面上有两个以上的小模块,类似于
image.png

则pageChanged方法要改成如下:


image.png
4. 还有一个类似于分页的,就是序号
image.png

要注意的点主要是,需要应写成如下,


image.png

不能写成{{$index+1}},会出现转到第二页后序号仍从1开始的情况

5. 总结

这个分页的注意事项主要是针对我们当前使用的新模板而言的,而且是针对分页出现的一些小问题。如果出现分页数据无法出现,或者刷新之后分页出现不同的情况,可以先看看controller中是否有多个$scope.page = data.Page字段,如果不是这个问题,那应该就需要调试后台传过来的分页数据了。


第二组:徐晋 jquery对象和DOM对象的相互转换、 删除节点:remove和detach的区别、 AppCan UI基础框架

1. jquery对象和DOM对象的相互转换
  • jquery --> DOM

    • var cr =("#cr"); //jquery对象
      var cr = $cr[0]; //DOM对象

    • var cr =("#cr"); //jquery对象
      var cr = $cr.get(0); //DOM对象

  • DOM --> jquery

    • var cr = document.getElementById("cr"); //DOM对象
      var cr =(cr); //jquery对象
2. 删除节点:remove和detach的区别
  • .remove()方法

当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。

var $li = $("ul li:eq(1)").remove();
$li.appendTo("ul");
  • .detach()方法

detach()和remove()一样,也是从DOM中去掉所有匹配的元素。但需要注意的是,这个方法不会把匹配的元素从jquery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

$("ul li").click(function(){
    alert($(this).html);
})
var $li = $("ul li:eq(1)").detach();
$li.appendTo("ul");

使用detach()后appendTo,该元素所绑定的click事件仍然存在;
若使用remove()后appendTo,click事件将不复存在。

总结来说:remove()与detach()的方法区别在于元素绑定的事件与附加数据是否被失效!

3. AppCan UI基础框架

在AppCan UI架构中进行了CSS类封装

ub 元素采用弹性BOX布局
ub-rev 子元素反序排列
ub-con 在子元素中加入一个容器,用于避免内容引起子元素大小变化
对应CSS代码为position:absolute;width:100%;height:100%;
ub-ac、ub-ae 子元素垂直居中对齐和尾对齐
ub-pc、ub-pe、ub-pj 子元素水平居中对齐、尾对齐和两端对齐
ub-ver 子元素纵向排列
ub-f1、ub-f2、ub-f3、ub-f4子元素占用区域份数

UI的分辨率适配

UI 中,我们在中间件中为不同屏幕密度(单位尺寸中可显示的点数),默认定义好了字体,开发者不再需要在代码中引入ui-media.css文件,即使有新的 分辨率手机问世,也会自动适配。目前参照Andorid屏幕密度划分为低密度、普通密度、高密度、超高密度、超超高密度,分别定义字体为14px 16px 24px 32px 48px。


第三组: liger中利用 js关闭alertpage 和 Ajax 简单操作步骤

1. liger中利用 js关闭alertpage

在调用完Ajax之后想要关闭当前页面回到父页面,如果用parent.CloseAlertPage();
是不起作用的,可以利用以下方法:

parent.$.ligerDialog.close();
parent.$(".l-dialog,.l-window-mask").remove();
2. Ajax 简单操作步骤

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

以下是根据我实际操作过程中的个人理解,具体解释在代码的注释中供参考:
.aspx

$.ajax({
    type: "post",
    url: "/Action/PmAsCheckHandler.ashx",
    data: {
        method: "getplantid",
        //Ajax引用的方法
        insplantid: planTid //调ajax时需要传入的参数
    },
    dataType: 'text',
    async: false,
    //同步异步操作,false表示异步,即在页面加载完之后再执行ajax;
    若是true,表示同步,即在页面加载时运行ajax;
    由于ajax运行速度较快,往往在页面加载之前便完成运行,
    所以在我们现在的实际运用过程中,多设置成false。
    success: function(data) {
        plancheckType = data; //data是用于接收执行完的Ajax返回值
    }
});

.ashx.cs

public void ProcessRequest(HttpContext context) {
    context.Response.ContentType = "text/plain";
    string method = !string.IsNullOrEmpty(context.Request["method"]) ? context.Request["method"].ToLower() : "";
    string result = "";
    switch (method) {  //method表示从前台传进来的方法,上面的代码只需复制即可
    
    case "getplantid":
        result = GetPlanType(context);//方法返回值
        break;
        
    }
    context.Response.Write(result);
}


//下面的实际方法与我们在后台写的方法类似;需要注意的是loginUser不能直接用,需要用DB.Config.systemAdmin代替
/// <summary>
/// 通过plantid查问题类型
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public string GetPlanType(HttpContext context) {
    string plantid = context.Request["insplantid"];
    Model.PmAsFormulatePlan dbpafplan = DB.PmAsFormulatePlan.SelectById(DB.Config.systemAdmin, plantid.ToLong());
    string planType = Model.EnumHelper.GetEnumDescription(dbpafplan.PmAsFormulateCheckType);
    return planType;

}

第四组:张元一 兴趣分享

《惊魂记》(Psycho)中正对喷水莲蓬头的镜头是怎么拍出来的?
image.png

比较正式的记载,如Alfred Hitchcock and the Making of Psycho这本书中,给出的答案指解决方案是由希区柯克本人设想的,把喷头的中间孔堵住,然后将摄影机放在比较远的地方用长焦镜头拍摄,再把景别取紧一点,就让观众有一种水柱直冲镜头而去的感觉了。

另外有一种流言,例如IMDb的trivia等处,说剧组设计了一个直径6英尺(约合180cm)的巨型喷头(把道具放大,希区柯克不是没干过类似的事),然后把摄影机放底下拍来。但这种说法找不到有力的支持,有的工作人员表示不知道此事。虚假的可能性比较大。

原文抄录如下:

希区柯克还让拉塞尔想办法,设计一个主观视角镜头,以提高观众的代入感。这镜头要拍的就是,花洒喷出的水,直接冲着镜头而来。“那是个老式花洒,无法随意控制喷水方向。”场记施罗姆注意到,“所以大家都很疑惑,‘如果直接对着它拍,那又如何保证镜头不会被淋湿?’希区柯克先生解释,‘用长焦镜拍,再把花洒上面靠里的几个洞堵上,水就不会乱喷了。’用长焦镜,我们可以退得更靠后一些,水看似要打在镜头上,其实却只是从两侧喷过去了。站在边上的人倒是确实都被淋到了,但也拍到了我们需要的画面。”


第五组: 周倩宇 实现全选执行批量操作

在做页面功能时,经常会遇到需要批量执行的操作,例如:批量删除,批量发布,批量提交等。当数量少的时候可以像图中一个个勾选。


image.png

但是当数据量很大的时候,勾选单选框很费时间,这时就需要勾选全选框。然而全选框对应的那行是没有数据的,我们需要一些方法在勾选全选框的同时,排除掉全选框那一行。

也就是说,在勾选全选框执行批量操作时,在对应的执行方法中排除图中红框那一行,从序号1那一行开始获取数据。


image.png

代码举例:


image.png

先在此处给全选框所对应的那一行加个ID

<table class="tablelist" style="width: 3000px" id="tbodyID">

然后在方法中进行处理

<script> 
    function changeApply() {
        var items = document.getElementsByName("cb");
        var rows = document.getElementById("tbodyID").rows;
        var count = 0;
        var tid = "";
        for (var i = 0; i < items.length; i++) {
            //当前checkbox实现勾选
            if (items[i].checked) {
                var row = items[i].parentElement.parentElement.rowIndex;
                var status = rows[row].cells[3].innerHTML;
                if (status != "已发布" && row != 0) {
                    alert("请选择已发布状态的数据!");
                    return false;
                }
                count += 1;
                tid += items[i].value + ','
            }        
        }
        if (count == 0) {}
        else if (count != 0) {
            var r = confirm("确认xx?")
            if (r == true) {
openTab();
            }
        }
}
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,193评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,306评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,130评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,110评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,118评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,085评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,007评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,844评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,283评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,508评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,395评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,985评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,630评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,797评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,653评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,553评论 2 352

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,380评论 0 44
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 810评论 0 8
  • 1:jQuery节点创建与属性的处理 创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构...
    码农小杨阅读 603评论 0 1
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 1,013评论 0 9
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,643评论 18 503