精华内容
下载资源
问答
  • datalist

    千次阅读 2017-01-16 15:09:56
    在Web设计中,经常会用到如输入框的自动下拉提示,这将大大方便用户的输入。在以前,如果要实现这样的功能,必须要求开发者使用一些Javascript的技巧或相关的框架进行ajax调用,需要...一、datalist标签的使用示例  

    在Web设计中,经常会用到如输入框的自动下拉提示,这将大大方便用户的输入。在以前,如果要实现这样的功能,必须要求开发者使用一些Javascript的技巧或相关的框架进行ajax调用,需要一定的编程工作量。但随着HTML5 的慢慢普及,开发者可以使用其中的新的DataList标记就能快速开发出十分漂亮的 AutoComplete组件的效果

     

    一、datalist标签的使用示例

     
    HTML 代码    复制
    
    
    <!DOCTYPE html>
    
    <html>
    
     <head>
    
        <title>HTML5 datalist tag</title>
    
        <meta charset="utf-8">
    
     </head>
    
        <p>
    
            浏览器版本:<input list="words">
    
        </p>
    
        <datalist id="words">
    
            <option value="Internet Explorer">
    
            <option value="Firefox">
    
            <option value="Chrome">
    
            <option value="Opera">
    
            <option value="Safari">
    
            <option value="Sogou">
    
            <option value="Maxthon">
    
        </datalist>
    
     </body>
    
    </html>
    

     

    datalist提供一个事先定义好的列表,通过id与input关联,当在input内输入时就会有自动完成(autocomplete)的功能,用户将会看见一个下拉列表供其选择。

    效果如下

     


    要注意的是IE 10和Opera 中,不需要用户必须输入一个字符才看到下拉的建议列表,而其他浏览器需要用户至少输入一个字符才能看到效果。
     

     

    二、Datalist中,同样可以为每一个下拉列表选项指定一个value值,如下代码:

     
    HTML 代码    复制
    
     <label for="state">State:</label>
     <input type="text" name="state" id="state" list="state_list">
     <datalist id="state_list">
       <option value="AL">Alabama</option>
       <option value="AK">Alaska</option>
       <option value="AZ">Arizona</option>
       <option value="AR">Arkansas</option>
     </datalist>
     

     

    如果在option中一旦指定了value的值,则用户通过下拉列表选择后,文本框中显示的将会是value的值,如下图

     

     

    三、Autocomplete属性

    该属性可以设置为on或off,表示输入字段是否应该启用自动完成功能,如下代码所示:

     
    HTML 代码    复制
    
    <form>
       <!-- 如果设置了autocomplete属性,则将会继承父元表单元素中autocomplete的值得,   如果也没设置,则默认autocomplete为on,这里没进行任何设置,所以firstName的autocomplete属性为on   -->
        <input type="text" name="firstName">
       <!-- autocomplete设置为on,浏览器将记忆下用户每次输入的值   -->
       <input type="text" name="address" autocomplete="on">   <!-- 设置为off,代表浏览器将不记忆用户在该文本框本次的输入,也不进行建议提醒   -->
       <input type="text" name="secret" autocomplete="off"> 
    </form> 
    

     

    要注意的是,在opera浏览器中,如果设置autocomplete为off,则根本不显示datalist,而在其他浏览器中,是会显示datalist的,只不过失去自动建议提醒功能。

     

     

    四、什么时候该使用DataList

    要注意的是,使用这种下拉的智能提示框也要注意场合。比如在一些要选择不是太多的场景下,使用一般的下拉框其实就可以了。而如果在需要用户在很多数据中去选择,则可以建议使用Datalist下拉建议提示框,因为可以方便用户快速检索去选择。

     

     

    五、如何应对不支持的浏览器

    在写本文的时候,依然只有IE 10,Firefox 4+,Chrome 20+和Opera是支持datalist的,这意味着不少旧版本的浏览器的用户不能使用datalist的功能,但办法总是有的,下面分别介绍一个折衷的办法

     

    datalist中嵌套使用传统的select下拉选择框

    一个不错的解决方法,是在提供传统的select下拉文本框的同时,提供给用户能输入普通文本的文本框,如下代码:

     
    HTML 代码    复制
    
    <label for="country">Country:</label>
      <datalist id="country_list">
        <select name="country">
          <option value="AF">Afghanistan</option>
          <option value="AX">Åland Islands</option>      <option value="AL">Albania</option>
          <option value="DZ">Algeria</option>
          <option value="AS">American Samoa</option>
          <!-- more -->
        </select>
        If other, please specify:  
    </datalist>
      <input type="text" name="country" id="country" list="country_list"> 
     
    

     

    在上面的代码中,在datalist中嵌套了传统的select下拉文本框,而input文本框中依然绑定了datalist,这样的好处是,当在不支持datalist的浏览器中运行的时候会有上图的效果:一边是下拉选择,另外的是可以允许用户输入下拉列表中不存在的记录。而上面的代码如果在支持datalist的浏览器中运行,则是原来的只显示一个datalist的效果。

     

     

    六、Datalist的限制

     

    当然,Datalist也有限制和不足之处,体现在:

    1)不能使用CSS去随意控制或改变其下拉建议列表中的项

    2)不能控制datalist的位置

    3) 不能控制每次当用户输入多少个字符后,就出现下拉建议列表

    4)不能控制大小写敏感,或当匹配什么样的字符就出现下拉建议列表

    5)不能将其与服务端的数据源绑定



    一般我们通常使用select制作下拉菜单,但是H5之后,datalist也可以充当select的角色,而且两者还有一点小的不同。

    对于select来说,select的下拉菜单是供用户选择的,用户只能选择其中的选项不能自己添加。

    但是datalist就不同了,datalist不仅可以供用户选择,用户还可以自己输入,而且datalist还可以达到模糊匹配的效果,使用很方便。

    据代码示例如下:

    [html]  view plain  copy
     print ?
    1. <input type="text" list="addr"/>  
    2.             <datalist id="addr">  
    3.                 <option value="上海">上海</option>  
    4.                 <option value="北京">北京</option>  
    5.                 <option value="杭州">杭州</option>  
    6.             </datalist>  
    7.               
    8.             <select>  
    9.                 <option value="上海">上海</option>  
    10.                 <option value="北京">北京</option>  
    11.                 <option value="杭州">杭州</option>  
    12.             </select>  
    运行结果如下:




    展开全文
  • DataList

    2015-03-20 09:00:00
    DataList: DataList在呈显的时间会自动为模板内容加上Table表格 DataList多了两个模板:SelectedItemTemplate(选中项模板),EditItemTemplate(编辑项模板) 常用属性: RepeatColumns:每行显示的列数 RepeatDirection...

    DataList:
    DataList在呈显的时间会自动为模板内容加上Table表格
    DataList多了两个模板:SelectedItemTemplate(选中项模板),EditItemTemplate(编辑项模板)

    常用属性:
    RepeatColumns:每行显示的列数
    RepeatDirection:显示的方向
    RepeatLayout:布局模式(Table-表格布局,Flow-流式span布局)

    常用命令按钮的CommandName
    选择按钮-Select
    编辑按钮-Edit
    更新按钮-Update
    取消按钮-Cancel
    删除按钮-Delete

    虽然DataList控件中每个按钮都有各自的事件,但尽量不要为每个按钮编写事件。
    应当把所有的按钮事件全都写在其DataList控件中,进行统一控制。这种方式称之为“事件反升机制”

    "选中"按钮被点击的时候会做两件事情:
    1.触发SelectedIndexChange事件
    2.显示SelectedItemTemplate模板

    在DataList事件中找主键值:
    1.设置DataKeyField属性为主键列的名子
    2.在代码中使用DataList1.Datakeys[索引号].ToString();来取得主键值


    "编辑"按钮被点击时候会做两件事情:
    1.触发EditCommand事件
    2.显示EditTemplate模板

    "取消"按钮被点击时会做一件事情
    触发CancelCommand事件

    "更新"按钮被点击时会做一件事情
    触发UpdateCommand事件
    1.取当前项的主键值
    2.从数据库查出当前项的数据
    3.把界面上的值改回对象中去
    4.把对象更新回数据库去
    5.退出编辑状态,重新绑定显示

    datakeyfiled用来存储主键,可以通过 string key = DataList1.DataKeys[e.Item.ItemIndex].ToString();

    转载于:https://www.cnblogs.com/mxx0426/p/4352774.html

    展开全文
  • 主要介绍了C#实现DataList里面嵌套DataList的折叠菜单,以实例形式详细分析了DataList嵌套实现折叠菜单所涉及的JavaScript、HTML与C#相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • 一个DataList 嵌套DataList的例子,希望对各位有帮助。
  • DataList用法

    2010-11-20 22:48:46
    DataList用法DataList用法DataList用法DataList用法DataList用法DataList用法DataList用法DataList用法DataList用法
  • datalist 中嵌套datalist

    2008-12-02 23:26:06
    datalist 中嵌套datalist,纯文本格式,非常小·
  • DataList嵌套

    2012-08-08 10:04:45
    DataList嵌套
  • DataList翻页

    2015-07-14 09:37:11
    asp.net 用 DataList控件显示数据并且能分页 保证好用
  • datalist编辑

    2013-03-25 10:58:37
    datalist编辑实现更新、取消、删除、分页等功能
  • DataList简介

    2021-01-05 10:12:34
    DataList 也用于多行多列的数据展示,但差别在于,GridView的一个单元格对应于数据表中的一个单元,而DataList的一个单元格对应于数据表中的一行记录。除此之外,DataList 也不支持双向绑定(Bind绑定),分页和排序...

    使用GridView 进行数据的展示时,一般用于多行数据的展示,提供了分页,编辑,排序等特性。DataList 也用于多行多列的数据展示,但差别在于,GridView的一个单元格对应于数据表中的一个单元,而DataList的一个单元格对应于数据表中的一行记录。除此之外,DataList 也不支持双向绑定(Bind绑定),分页和排序,并且需要手工编写才能实现编辑,删除和更新功能。
    DataList 拥有强大的模板特性,灵活性高,在DataList控件中除了支持Repeater控件中的两个模板:
    1,SelectedItemTemplate:控制如何格式化被选定的项
    2,EditItemTemplate:控制如何格式化被编辑的项
    当选定DataList的一个项时(即DataList的SelectedIndex 属性值为当前选定项的索引值),将显示SelectedItemTemplate,当在DataList中选择一个项来编辑(即DataList的EditItemIndex属性值为当前选定项的索引值)时,将显示EditItemTemplate.

    展开全文
  • datalist分页

    2012-08-18 18:06:46
    datalist分页,包含使用方法,简单易懂。
  • datalist标签定义选项列表,并且规定了input元素可能的选项列表,datalist标签和input元素配合使用该元素,来定义input可能的值,datalist及其选项不会被显示出来,仅仅是合法的输入值列表。【推荐教程:HTML教程】...

    datalist标签是什么意思?

    37e2d75fd140b2323fcf93f1bb88378e.png

    datalist标签定义选项列表,并且规定了input元素可能的选项列表,datalist标签和input元素配合使用该元素,来定义input可能的值,datalist及其选项不会被显示出来,仅仅是合法的输入值列表。【推荐教程:HTML教程】

    作用:定义选项列表,并且规定了input元素可能的选项列表。

    说明:请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。

    注释:所有主流浏览器都支持 标签,除了 Internet Explorer 和 Safari。 标签是 HTML 5 中的新标签。

    实例:

    Title
    展开全文
  • asp.net datalist 用法

    2020-10-29 19:26:38
    asp.net datalist 用法,需要的朋友可以参考下。
  • datalist标签

    2020-10-03 09:06:01
    关于datalist标签 <datalist> 标签定义选项列表,应该与 <input>标签配合使用该,它定义 input 可能的值; <datalist> 及其选项不会被显示出来,它仅仅是合法的输入值列表; 应使用<input>...
  • html datalist标签用于定义选项列表...datalist标签是什么意思?html datalist标签怎么用?作用:定义选项列表,并且规定了input元素可能的选项列表。说明:请与 input 元素配合使用该元素,来定义 input 可能的值。...
  • h5 datalist

    2020-12-20 17:22:00
    datalist id="city_list"> <option value="before"> <option label="bt">中间</option> <option value="after">最后</option> </datalist> datalist 定义选项...
  • Datalist 嵌套DataList

    2010-09-13 20:30:00
    datalist 嵌套 datalist 就相当于双循环,里面的那个datalist 显示的内容跟外面的那个datalist 的值有关联, 下面是个小练习,代码如下 =======页面代码    ...<div><br /> <asp:DataList ID=...
  • 本影片中Datalist包含DataList,大类别包含小类别以及程式重构.片长:0:43:48; 大小:17088KB
  • datalist简单用法

    2015-11-20 00:02:28
    简述html中datalist的一些简单应用场景以及示例。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 57,661
精华内容 23,064
关键字:

datalist