<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>
2 回答
慕斯王
TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊
這不是HTML的標(biāo)準(zhǔn)屬性，是個(gè)自定義屬性，HTML是不認(rèn)識(shí)它的，如果就這樣直接運(yùn)行，它是不會(huì)產(chǎn)生任何效果的（但也不會(huì)造成出錯(cuò)），必須結(jié)合JS代碼才能產(chǎn)生效果，比如遍歷頁(yè)面所有元素，發(fā)現(xiàn)帶有data-options（意思就是數(shù)據(jù)參數(shù)）屬性的就取出來(lái)并解析，具體怎么做就要看程序的設(shè)計(jì)者了。
這種技術(shù)的典型應(yīng)用是類(lèi)似淘寶的圖片延遲顯示技術(shù)，比方說(shuō)（只是舉例，與淘寶的實(shí)際代碼無(wú)關(guān)），頁(yè)面代碼中的圖片是這樣的：
<img src="一個(gè)空?qǐng)D片" src1="實(shí)際要顯示的圖片">
其中src1是自定義的屬性，上述代碼顯示的效果就是一個(gè)空?qǐng)D片，如果有多個(gè)圖片，那么顯示的就是多個(gè)空?qǐng)D片；
然后，給頁(yè)面的滾動(dòng)事件綁定js代碼，當(dāng)圖片滾動(dòng)到瀏覽器的可見(jiàn)區(qū)域時(shí)，就把src1屬性賦值給src屬性，這樣的話實(shí)際的圖片就顯示出來(lái)了。
這樣做的好處就是頁(yè)面的整體顯示速度很快，因?yàn)椴辉诳梢?jiàn)區(qū)域的圖片是沒(méi)有實(shí)際下載的；其次就是可以減少頁(yè)面的下載量，因?yàn)椴皇撬腥硕紩?huì)把頁(yè)面內(nèi)的所有圖片都看完的，沒(méi)看的圖片就不下載。這種技術(shù)最適合一次性要顯示多個(gè)圖片的頁(yè)面，如網(wǎng)店的詳情頁(yè)。
添加回答
舉報(bào)
0/150
提交
取消