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

第一组:姚成栋 AngularJs分页

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

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

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

2. 对应的controller中
image.png

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


2017.11.16 AngularJs分页、 jquery、AppCan UI基础框架、Ajax 、实现全选执行批量操作_第1张图片
image.png

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

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

则pageChanged方法要改成如下:


2017.11.16 AngularJs分页、 jquery、AppCan UI基础框架、Ajax 、实现全选执行批量操作_第2张图片
image.png
4. 还有一个类似于分页的,就是序号
2017.11.16 AngularJs分页、 jquery、AppCan UI基础框架、Ajax 、实现全选执行批量操作_第3张图片
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"); //jquery对象
      var cr = $cr[0]; //DOM对象

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

  • DOM --> jquery

    • var cr = document.getElementById("cr"); //DOM对象
      var (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代替
/// 
/// 通过plantid查问题类型
/// 
/// 
/// 
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)中正对喷水莲蓬头的镜头是怎么拍出来的?
2017.11.16 AngularJs分页、 jquery、AppCan UI基础框架、Ajax 、实现全选执行批量操作_第4张图片
image.png

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

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

原文抄录如下:

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


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

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


image.png

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

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


2017.11.16 AngularJs分页、 jquery、AppCan UI基础框架、Ajax 、实现全选执行批量操作_第5张图片
image.png

代码举例:


2017.11.16 AngularJs分页、 jquery、AppCan UI基础框架、Ajax 、实现全选执行批量操作_第6张图片
image.png

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

然后在方法中进行处理


你可能感兴趣的:(2017.11.16 AngularJs分页、 jquery、AppCan UI基础框架、Ajax 、实现全选执行批量操作)