下列代码中data-options属性是啥意思

Posted 2023-05-01

<table class="easyui-datagrid" title="Frozen Columns in DataGrid" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
<thead data-options="frozen:true">
<tr>
<th data-options="field:'itemid',width:100">Item ID</th>
<th data-options="field:'productid',width:120">Product</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'listprice',width:90,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:90,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>

这不是html的标准属性，是个自定义属性，HTML是不认识它的，如果就这样直接运行，它是不会产生任何效果的（但也不会造成出错），必须结合JS代码才能产生效果，比如遍历页面所有元素，发现带有data-options（意思就是数据参数）属性的就取出来并解析，具体怎么做就要看程序的设计者了。
这种技术的典型应用是类似淘宝的图片延迟显示技术，比方说（只是举例，与淘宝的实际代码无关），页面代码中的图片是这样的：
<img src="一个空图片" src1="实际要显示的图片">
其中src1是自定义的属性，上述代码显示的效果就是一个空图片，如果有多个图片，那么显示的就是多个空图片；
然后，给页面的滚动事件绑定js代码，当图片滚动到浏览器的可见区域时，就把src1属性赋值给src属性，这样的话实际的图片就显示出来了。
这样做的好处就是页面的整体显示速度很快，因为不在可见区域的图片是没有实际下载的；其次就是可以减少页面的下载量，因为不是所有人都会把页面内的所有图片都看完的，没看的图片就不下载。这种技术最适合一次性要显示多个图片的页面，如网店的详情页。 参考技术A

data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性，通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中。

例如： 1<div class="easyui-dialog" style="width:400px;height:200px"   2dataoptions="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function()。

data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性，通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中。

参考技术B data-options就是来定义各种组件的样式和内容、事件的，可以用liveQuery实现，动态添加的属性也能起作用。

“white-space: nowrap;”此代码是啥意思？

禁止文件自动换行。

white-space，英语词组意思为空余时间，在计算机术语中的意思是泛空格符。white-space 属性设置如何处理元素内的空白。

nowrap :强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。

设置或检索对象内空格字符的处理方式。

空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体 来添加空格，用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响是一样的。

此属性作用于块对象。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 whiteSpace 。

示例：

normal：轻轻地我走了正如我轻轻地来。

pre：轻轻地我走了（这里接很多测试文字）正如我轻轻地来。

pre - wrap：轻轻地我走了（这里接很多测试文字）正如我轻轻地来pre - line轻轻地我走了（这里接很多测试文字）正如我轻轻地来。

nowrap：轻轻地我走了正如我轻轻地来。

扩展资料：

在使用white-space: nowrap强制文本不换行后，发现之前自动换行的问题解决了，但同时空格也合并了。

因为是代码块，可能有很多行，而每行的前面都需要用空格表示代码的层次关系，所以不希望空格被合并。

所以强制文本不换行的前提下保留原有的空格不合并

设置或检索对象内空格字符的处理方式。

空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体   来添加空格，用 br 元素来添加换行。

此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。

此属性作用于块对象。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 whiteSpace 。

参考资料来源：百度百科-white-space

参考技术A 禁止文字自动换行 参考技术B 定义和用法
white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

默认值： normal
继承性： yes
版本： CSS1
JavaScript 语法： object.style.whiteSpace="pre"

实例
规定段落中的文本不进行换行：
p

white-space: nowrap

TIY

浏览器支持
所有浏览器都支持 white-space 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

可能的值
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

参考资料：http://www.w3school.com.cn/css/pr_text_white-space.asp

本回答被提问者采纳