<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貢獻1864條經驗 獲得超2個贊
這不是HTML的標準屬性，是個自定義屬性，HTML是不認識它的，如果就這樣直接運行，它是不會產生任何效果的（但也不會造成出錯），必須結合JS代碼才能產生效果，比如遍歷頁面所有元素，發現帶有data-options（意思就是數據參數）屬性的就取出來并解析，具體怎么做就要看程序的設計者了。
這種技術的典型應用是類似淘寶的圖片延遲顯示技術，比方說（只是舉例，與淘寶的實際代碼無關），頁面代碼中的圖片是這樣的：
<img src="一個空圖片" src1="實際要顯示的圖片">
其中src1是自定義的屬性，上述代碼顯示的效果就是一個空圖片，如果有多個圖片，那么顯示的就是多個空圖片；
然后，給頁面的滾動事件綁定js代碼，當圖片滾動到瀏覽器的可見區域時，就把src1屬性賦值給src屬性，這樣的話實際的圖片就顯示出來了。
這樣做的好處就是頁面的整體顯示速度很快，因為不在可見區域的圖片是沒有實際下載的；其次就是可以減少頁面的下載量，因為不是所有人都會把頁面內的所有圖片都看完的，沒看的圖片就不下載。這種技術最適合一次性要顯示多個圖片的頁面，如網店的詳情頁。
添加回答
舉報
0/150
提交
取消