EasyUI是一個能夠快速創建Web界面的Javascript庫,是JQuery的一種擴展和增強。它擁有簡單易用的API,提供了大量易于使用的UI組件,其中包含了json橫向滾動。
//創建json數據源 var data = { 'total':3, 'rows':[ { 'id':'1', 'name':'Apple iPhone6s', 'price':3800, 'image':'./images/1.jpg' }, { 'id':'2', 'name':'華為P9', 'price':2988, 'image':'./images/2.jpg' }, { 'id':'3', 'name':'小米Note2', 'price':2599, 'image':'./images/3.jpg' } ] }; //將json數據源轉化為EasyUI可識別的數據源格式 var arrayData = []; for (var i = 0; i< data.total; i++) { arrayData.push(data.rows[i]); } //使用EasyUI的jquery插件進行橫向滾動 $('#scrollDiv').scrollview({ scrollbarWidth:20, scrollbarMargin:0, handlerWidth:false, arrows:true }); //加載橫向滾動數據源 $('#scrollDiv').scrollview('load', arrayData);
上述代碼中,首先創建了json數據源data,利用循環將其轉化為EasyUI組件可識別的數組格式。然后使用scrollview插件使得該組件能夠進行json橫向滾動,并且傳入數組數據。scrollbarWidth、scrollbarMargin等選項可以用于控制滾動條的寬度和距離,handlerWidth選項決定組件是否可以拖動,arrows選項決定是否顯示滾動箭頭。這樣就非常便捷地實現了json橫向滾動。
下一篇python 空值填補