2018-01-24 有意思的博文、绑定数据到 ArrayLi

作者: 胡諾 | 来源:发表于2018-01-25 09:12 被阅读0次

第零组：杨昊几个有意思的博文

分享几个有意思的博文：

由 12306.cn 谈谈高并发+高负载网站性能技术：https://www.cnblogs.com/happyday56/p/3854400.html

飞机上终于能开着手机连 Wi-Fi 了，它背后的技术原理是什么？http://blog.csdn.net/csdnnews/article/details/79132353

暂时就这两个了······

第一组：陈辉数据绑定、创建 ArrayList、绑定数据到 ArrayList

数据绑定

下面的控件是支持数据绑定的列表控件：
• asp:RadioButtonList
• asp:CheckBoxList
• asp:DropDownList
• asp:Listbox
通常在一个或多个 asp:ListItem 控件中定义以上每个控件中的可选项目，类似这样：

<html>
    <body>
        <form runat="server">
            <asp:RadioButtonList id="countrylist" runat="server">
                <asp:ListItem value="C" text="China" />
                <asp:ListItem value="S" text="Sweden" />
                <asp:ListItem value="F" text="France" />
                <asp:ListItem value="I" text="Italy" />
            </asp:RadioButtonList>
        </form>
    </body>

</html>

不过，我们可以使用某种独立的源进行数据绑定，比如数据库、XML 文件或脚本来完成带有可选项目的列表。
通过使用导入的源，数据从 HTML 分离了出来，并且对项目的任何改变都是在独立的数据源中完成的。
在下面的三节中，我们将描述如何从脚本化的数据源中绑定数据。

创建 ArrayList

ArrayList 对象是包含单个数据值的项目的集合。
通过 Add() 方法向 ArrayList 添加项目。
下面的代码创建了一个名为 mycountries 的 ArrayList 对象，并添加了四个项目：

<script runat="server">
    Sub Page_Load
    if Not Page.IsPostBack then dim mycountries = New ArrayList mycountries.Add("Norway") mycountries.Add("Sweden") mycountries.Add("France") mycountries.Add("Italy") end
    if end sub
</script>

在默认情况下，一个 ArrayList 对象包含 16 个条目。可通过 TrimToSize() 方法把 ArrayList 调整为最终尺寸：

<script runat="server">
    Sub Page_Load
    if Not Page.IsPostBack then dim mycountries = New ArrayList mycountries.Add("Norway") mycountries.Add("Sweden") mycountries.Add("France") mycountries.Add("Italy") mycountries.TrimToSize() end
    if end sub
</script>

通过 Sort() 方法，ArrayList 也能够按照字母顺序或者数字顺序进行排序：

<script runat="server">
    Sub Page_Load
    if Not Page.IsPostBack then dim mycountries = New ArrayList mycountries.Add("Norway") mycountries.Add("Sweden") mycountries.Add("France") mycountries.Add("Italy") mycountries.TrimToSize() mycountries.Sort() end
    if end sub
</script>

要实现反向排序，请在 Sort() 方法后应用 Reverse() 方法：

<script runat="server">
    Sub Page_Load
    if Not Page.IsPostBack then dim mycountries = New ArrayList mycountries.Add("Norway") mycountries.Add("Sweden") mycountries.Add("France") mycountries.Add("Italy") mycountries.TrimToSize() mycountries.Sort() mycountries.Reverse() end
    if end sub
</script>

绑定数据到 ArrayList

ArrayList 对象可为下列的控件自动生成文本和值：
• asp:RadioButtonList
• asp:CheckBoxList
• asp:DropDownList
• asp:Listbox
为了绑定数据到 RadioButtonList 控件，首先要在 .aspx 页面中创建一个 RadioButtonList 控件（不带任何 asp:ListItem 元素）：

<html>
    <body>
        <form runat="server">
            <asp:RadioButtonList id="rb" runat="server" />
        </form>
    </body>
</html>

然后添加创建列表的脚本，并且绑定列表中的值到 RadioButtonList 控件：
实例

<script runat="server">
    Sub Page_Load
    if Not Page.IsPostBack then dim mycountries = New ArrayList mycountries.Add("Norway") mycountries.Add("Sweden") mycountries.Add("France") mycountries.Add("Italy") mycountries.TrimToSize() mycountries.Sort() rb.DataSource = mycountries rb.DataBind() end
    if end sub
</script>
<html>
    <body>
        <form runat="server">
            <asp:RadioButtonList id="rb" runat="server" />
        </form>
    </body>

</html>

RadioButtonList 控件的 DataSource 属性被设置为该 ArrayList，它定义了这个 RadioButtonList 控件的数据源。RadioButtonList 控件的 DataBind() 方法把 RadioButtonList 控件与数据源绑定在一起。

第二组：冯佳丽 I like for you to be still

I like for you to be still

我喜欢你是寂静的

I like for you to be still， it is as though you were absent,
我喜欢你是寂静的，仿佛你消失了一样，

and you hear me from far away， and you voice does not touch you.
你从远处聆听我，我的声音却无法触及你。

It seems as though your eyes had flown away
好像你的双眼已经飞离远去。

and it seems that a kiss had sealed your mouth.
如同所有的事物充满了我的灵魂，

As all things are filled with my soul
你从所有的事物中浮现，

you emerge from the things, filled my soul.
充满了我的灵魂

You are like my soul, a butterfly of dream,
你像我的灵魂，一只梦的蝴喋，

and you are like the word Melancholy.
你如同忧郁这个字

I like for you to be still， and you seem far away.
我喜欢你是寂静的，好像你已远去。

It sounds as though you were lamenting, a butterfly cooinglike a dove.
你听起来像在悲叹，一只如同鸽悲鸣的蝴蝶。

And you hear me from far away and you voice does not rouch you:
你从远处听见我，我的声音无法企及你：

Let me come to be still in your silence.
让我在你的沉默中安静无声。

And let me talk to you with your silence
并且让我借你沉默与你说话，

that is brightas a lamp,simple as a ring.
你的沉默明亮如灯，简单如指环。

You are like the night, with it's stillness and constellations.
你就像黑夜，拥有寂静与群星。

Your silence is that of a star, as remore and candid.
你沉默就是星星的沉默，遥远而明亮。

I like for you to be still， it is as though you were absent,
我喜欢你是寂静的，仿佛你消失了一样，

distant anf fullof sorrow as though you had died.
遥远而且哀伤，仿佛你已经死了。

One word then,one smile,is enough.
彼时，一个字，一个微笑，已经足够。

And I am happy, happy that it's not true.
而我会觉得幸福，因那不是真的

by 聂鲁达

编者附：<维基百科>巴勃罗·聂鲁达

第三组：黄华英 Vue --– 组件

组件是vue一个强大的功能，组件是可以扩展html元素，封装可以重用的代码。

全局注册组件：

<div id="id">
  <my-component></my-component>
</div>

Vue.component('my-component', {
  template: '<p>我是一个组件</p>'
})

new Vue({
  el: '#id'
})

局部注册组件：

var child = {
  template: '<p>我是一个组件</p>'
}
new Vue({
  component: {
    'my-component': child
  }
})

在使用组件的时候代理数据data必须是一个函数，函数返回的是代理的数据。

组件之间的通信

父组件可以通过Prop来给子组件传递数据

prop是父组件用来传递数据的一个自定义属性。子组件需要显示的用props选项声明prop:

Vue.component('child', {
  // 子组件显示的声明props
  props: ['message'],
  // prop就像data一样可以再模板中使用也可以通过this来调用
  template: '<span> {{ message }} </spam>'
})

我们可以通过v-bind动态的绑定props的值到父组件的数据中，每次当绑定的数据在父组件中发生改变的时候，该组件也会相应的传递给子组件。

<child v-bind:child-message='message'></child>

如果要给prop传递一个字面的时候必须要使用v-bind这样传递下去的才是正真的字面量，否则都会当做字符串。

<child v-bind:number="1"></child>

prop是单向绑定的：当父组件的属性变化时，将传递给子组件，但是在子组件中改变数据的时候并不会传递给父组件，为了防止子组件无意间修改父组件的状态，所以不应该在子组件中改变prop的数据。

如果想在子组件中想改变prop的值通常有二种情况：

• prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用。

props: ['initialCounter'],
data: function () {
  return {
    couter: this.initialCounter
  }
}

prop 作为需要被转变的原始值传入。

props: ['size'],
  computed: {
    childSize: function () {
      return this.size.trim().toLowerCase()
    }
  }

组件可以给props指定一个验证要求，验证数据是否是某一个类型的数据，例如：

Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

第四组：王芳选项卡

效果图：

HTML结构：

JavaScript结构：

源代码-HTML：

<div class="row dongtaiChooseBox">
        <div class="col-sm-6 col-xs-6 col-lg-6 text-center dongtaiByNo" ng-model="srhType" ng-click="chooseSrhType(0)"><span class="FontSize12">按航班号</span></div>
        <div class="col-sm-6 col-xs-6 col-lg-6 text-center dongtaiByCity" ng-model="srhType" ng-click="chooseSrhType(1)"><span class="FontSize12">按城市名</span></div>
    </div>
    <div class="row dongtaiCityBox" id="sub_city" style="display: none;">
        <div class="col-sm-5 col-xs-5 col-lg-5"><input class="CityInput FontSize18" type="text" ng-click="ChooseCityBtn(0);" id="startCity"></input></div>
        <div class="col-sm-2 col-xs-2 col-lg-2"><img src="img/AppImg01.png" class="img-responsive center-block Img_Mid"/></div>
        <div class="col-sm-5 col-xs-5 col-lg-5"><input class="CityInput FontSize18 text-right" type="text" ng-click="ChooseCityBtn(1);" id="endCity"></input></div>
    </div>
    <div class="row dongtaiNoBox" id="sub_no">
        <div class="col-sm-2 col-xs-2 col-lg-2"><span class="FontSize18">GJ</span></div>
        <div class="col-sm-10 col-xs-10 col-lg-10"><input class="CityInput FontSize18" type="text" id="flightNum"></div>
    </div>

源代码-JS：

/**
     * 切换查询类型
     */
    $scope.srhType=0;
    $scope.chooseSrhType = function (v) {
        if(v==0){
            $(".dongtaiByNo").css("color","#FF0000");
            $(".dongtaiByCity").css("color","#333333");
            $('#sub_no').show();
            $('#sub_city').hide();
            $scope.srhType=0;
        }else if(v==1){
            $(".dongtaiByCity").css("color","#FF0000");
            $(".dongtaiByNo").css("color","#333333");
            $('#sub_city').show();
            $('#sub_no').hide();
            $scope.srhType=1;
        }
    };

第五组：王颢 C#中String.Length对数字文字字母的解决思路

string 对象的length属性，只是在机械的统计一下string对象上面的字符个数，而没有区分文字或数字说占字符的长度

微软官方针对改属性给的解释是“当前字符串中字符的数量 ”

其实在c#.net 这样的支持unicode字符集的环境下，字符串处理时，英文、数字、汉字以及标点符号都是当着一个字符来看待的，但是英文、中文显示时所占宽度不一致，比如中文一个汉字占用2个字节长度，而英文占用1个字节长度。

比如有这样一个场景，当根据一个字符串长度，截取部分文字显示到界面上，这时字符串中数字和文字都存在的话，这个长度显然是有错误的，最终界面上显示的也将会相当不整齐。

下面我就给出c#.net中中英文混排的字符串，如何获取真实长度

我先给出目前网络上大家普遍的做法，主要有两种方式：

方式一：

     string tipinfo = "123测ss试*.。空 格";
     int length = system.text.unicodeencoding.default.getbytecount(tipinfo);

方式二：

      string tipinfo = "123测ss试*.。空 格";
       int length = encoding.getencoding("gb2312").getbytes(tipinfo.tochararray()).length;

以上两种方案解决的方式是一样的，统一将数字，字母，文字，按两个字节来处理，也就是unicode的做法。但这样做，截取的时候长度还是不统一，显示到界面上还是不对齐。当然想的快的朋友会说了，在结果的基础上除以2不就是总个数了吗，这样截取的结果应该是相同的了吧。这样想是没错，可你自己运行下就会发现，截取出来的长度还是不统一，有的长，有的短。

以下是我解决该问题的方式，我把数字，字母，文字分别统计，数字和字母两个为一个，这样显示到界面上，截取出来的长度是相同的。

       private static int getseparatesubstring(string tstring)
       {
           string tempstr = tstring;
           int count = 0;
           int temp = 0;
           for (int i = 0; i < tempstr.length; i++)
           {
               string char = tempstr.substring(i, 1);
               int bytecount = encoding.default.getbytecount(char);

               if (bytecount == 1)
               {
                   temp++;
                   if (temp == 2)
                   {
                       count++;
                       temp = 0;
                   }
               }
               else if (bytecount > 1)
               {
                   count++;
               }
           }
           return count;
       }

2018-01-24 有意思的博文、绑定数据到 ArrayLi

第零组：杨昊几个有意思的博文

第一组：陈辉数据绑定、创建 ArrayList、绑定数据到 ArrayList

数据绑定

创建 ArrayList

绑定数据到 ArrayList

第二组：冯佳丽 I like for you to be still

I like for you to be still

我喜欢你是寂静的

第三组：黄华英 Vue --– 组件

第四组：王芳选项卡

第五组：王颢 C#中String.Length对数字文字字母的解决思路

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

2018-01-24 有意思的博文、绑定数据到 ArrayLi

第零组：杨昊 几个有意思的博文

第一组： 陈辉 数据绑定、创建 ArrayList、绑定数据到 ArrayList

数据绑定

创建 ArrayList

绑定数据到 ArrayList

第二组：冯佳丽 I like for you to be still

I like for you to be still

我喜欢你是寂静的

第三组：黄华英 Vue --– 组件

第四组：王芳 选项卡

第五组：王颢 C#中String.Length对数字文字字母的解决思路

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第零组：杨昊几个有意思的博文

第一组：陈辉数据绑定、创建 ArrayList、绑定数据到 ArrayList

第四组：王芳选项卡