jqueryEasyui 之滾動
1、實現場景為需要兩個datagruid同步滾動。
擼原始碼發現,其實在生成中,已經向返回資料層丟擲了一個叫做dc的物件,其指向dom層可以直接操作,於是在onAfterRender中可以對dom層進行二次事件繫結。
//生成datagruid
function _684(_685,_686){
function _687(){
var _688=[];
var _689=[];
$(_685).children("thead").each(function(){
var opt=$.parser.parseOptions(this,[{frozen:"boolean"}]);
$(this).find("tr").each(function(){
var cols=[];
$(this).find("th").each(function(){
var th=$(this);
var col=$.extend({},$.parser.parseOptions(this,["id","field","align","halign","order","width",{sortable:"boolean",checkbox:"boolean",resizable:"boolean",fixed:"boolean"},{rowspan:"number",colspan:"number"}]),{title:(th.html()||undefined),hidden:(th.attr("hidden")?true:undefined),formatter:(th.attr("formatter")?eval(th.attr("formatter")):undefined),styler:(th.attr("styler")?eval(th.attr("styler")):undefined),sorter:(th.attr("sorter")?eval(th.attr("sorter")):undefined)});
if(col.width&&String(col.width).indexOf("%")==-1){
col.width=parseInt(col.width);
}
if(th.attr("editor")){
var s=$.trim(th.attr("editor"));
if(s.substr(0,1)=="{"){
col.editor=eval("("+s+")");
}else{
col.editor=s;
}
}
cols.push(col);
});
opt.frozen?_688.push(cols):_689.push(cols);
});
});
return [_688,_689];
};
//生成datagruidView程式碼
var _68a=$("<div class=\"datagrid-wrap\">"+"<div class=\"datagrid-view\">"+"<div class=\"datagrid-view1\">"+"<div class=\"datagrid-header\">"+"<div class=\"datagrid-header-inner\"></div>"+"</div>"+"<div class=\"datagrid-body\">"+"<div class=\"datagrid-body-inner\"></div>"+"</div>"+"<div class=\"datagrid-footer\">"+"<div class=\"datagrid-footer-inner\"></div>"+"</div>"+"</div>"+"<div class=\"datagrid-view2\">"+"<div class=\"datagrid-header\">"+"<div class=\"datagrid-header-inner\"></div>"+"</div>"+"<div class=\"datagrid-body\"></div>"+"<div class=\"datagrid-footer\">"+"<div class=\"datagrid-footer-inner\"></div>"+"</div>"+"</div>"+"</div>"+"</div>").insertAfter(_685);
_68a.panel({doSize:false,cls:"datagrid"});
$(_685).addClass("datagrid-f").hide().appendTo(_68a.children("div.datagrid-view"));
var cc=_687();
var view=_68a.children("div.datagrid-view");
var _68b=view.children("div.datagrid-view1");
var _68c=view.children("div.datagrid-view2");
return {panel:_68a,frozenColumns:cc[0],columns:cc[1],dc:{view:view,view1:_68b,view2:_68c,header1:_68b.children("div.datagrid-header").children("div.datagrid-header-inner"),header2:_68c.children("div.datagrid-header").children("div.datagrid-header-inner"),body1:_68b.children("div.datagrid-body").children("div.datagrid-body-inner"),body2:_68c.children("div.datagrid-body"),footer1:_68b.children("div.datagrid-footer").children("div.datagrid-footer-inner"),footer2:_68c.children("div.datagrid-footer").children("div.datagrid-footer-inner")}};
};
相關文章
- jqueryEasyUi 入門模板jQueryUI
- Flutter(十)之Flutter的滾動WidgetFlutter
- 微信小程式之文字向上滾動效果微信小程式
- div滾動條樣式,水平滾動
- 隱藏滾動條保留滾動效果
- RecyclerView滾動位置,滾動速度設定View
- CSS 例項之滾動的圖片欄CSS
- iOS開發之UIScrollView無限滾動iOSUIView
- bootstrap原始碼分析之scrollspy(滾動偵聽)boot原始碼
- css隱藏滾動條並可以滾動CSS
- scrollable滾動條向下滾動至底部
- 移動端div跟隨滾動條滾動(自制
- html 滾動HTML
- 資料庫升級之-Dataguard滾動升級資料庫
- android之豎直滾動控制元件-ListViewAndroid控制元件View
- Unity 之 UGUI Scroll Rect滾動矩形元件詳解UnityUGUI元件
- Android控制之垂直滾動廣告條ViewFLipper解析AndroidView
- jqueryeasyui彈出訊息框(轉載)jQueryUI
- Flutter滾動動畫Flutter動畫
- 文字向上滾動
- Scroller平滑滾動
- react滾動屏React
- 三叉戟之橫向自定義滾動
- [vue] 大資料最佳化之虛擬滾動Vue大資料
- 原生JS控制多個滾動條同步跟隨滾動JS
- Android開源音樂播放器之自動滾動歌詞Android播放器
- 線上直播原始碼,JS動態效果之,側邊欄滾動固定效果原始碼JS
- 方寸之間見天地:遊戲介面中的滾動互動設計方法遊戲
- Flutter 滾動監聽及實戰appBar滾動漸變FlutterAPP
- css實現隱藏滾動條並可以滾動內容CSS
- 直播商城原始碼,vue 彈窗 慣性滾動 加速滾動原始碼Vue
- 直播平臺製作,禁止頁面滾動 / 滾動事件穿透事件穿透
- JS圖片滾動(無縫、平滑、上下左右滾動)效果JS
- 移動端模擬滾動
- 如何讓VB6程式碼編輯器垂直滾動條隨滑鼠滾輪滾動
- js無縫滾動JS
- vue文字滾動元件Vue元件
- CSS滾動條美化CSS