abp 列表和明细页面的规则说明

Posted 2020-11-06 另一个梦境

0>列表区域mainviewbody

 

1>列表头mainviewheader

名称

2>列表条件mainviewcodtionbody

条件区

3>列表工具栏mainviewtoolbar

工具栏区

表格高度

js中的设置，可单独设置为一个服务，方便所有list页面可通用。

$(".mainviewbody").height(bodyheight);//整个高
//$(".mainbody").height(bodyheight - 50);//整个高
var gridheight = bodyheight - $(".mainviewcodtionbody").outerHeight() - $(".mainviewheader").outerHeight()
- $(".mainviewtoolbar").outerHeight() - 5;
vm.gridHeightStyle = {
‘height‘: gridheight + ‘px‘
};

resize，

需要使用函数节流和函数防抖

var w = angular.element($window);
var timeroutid;
w.bind(‘resize‘, function () {
if(timeroutid) $timeout.cancel(timeroutid);
timeroutid = $timeout(function () {

var mainheight = $(‘body‘).height() - ($(‘.main-header‘).outerHeight() + $(‘.main-footer‘).outerHeight());
console.warn("old:"+$rootScope.mainheight);
console.warn("new:"+mainheight);

if($rootScope.mainheight === mainheight){
isrun = false;
return;
}
$rootScope.mainheight = mainheight;
//console.warn(mainheight);

//vm.setHeight($rootScope.mainheight);
$scope.$broadcast(‘wresize‘, { mheight: $rootScope.mainheight }); //事件通知
},500);
});

 

编辑页面

外面的区域panelscrollout

明细页面可滚动区域 panelscrollin