easyUI之tabs的应用

最新推荐文章于 2022-06-06 16:55:20 发布

WithYou_wy

最新推荐文章于 2022-06-06 16:55:20 发布

阅读量730

点赞数 1

CC 4.0 BY-SA版权

分类专栏：技术与感悟文章标签： easyui tabs

本文链接：https://blog.youkuaiyun.com/WithYou_wy/article/details/53810805

技术与感悟专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何利用 EasyUI 的 tabs 组件实现不同面板动态加载数据，通过索引 index 获取当前面板并加载相应数据，有效节省资源。

最近用到的easyUI的知识比较多，今天就记录一下easyUI中tabs的用法，先显示效果图：

在这里使用tabs可以实现不同的动态的加载数据，点击不同的名称加载不同的数据，减少数据加载页面时将三个表格的数据全加载出来造成资源浪费。

这里的主要精华之处在于三个表格索引index的获得，方法如下：

var index = $("#tabs").tabs('getTabIndex',$('#tabs').tabs('getSelected'));

接下来就说一下如何使用tabs的用法：

step1:先写好布局

//注意id="tabs"添加的地方
<div id="tabs" class="easyui-tabs" style=" width:100%;height:500px;">
	<div class="tabs-relative" title="区县" style="padding-top:10px;">
        	<table id="page-table-qx" style="width:100%;height:400px;"></table>
        </div>
	<div class="tabs-relative" title="职能部门" style="padding-top:10px;">
		<table id="page-table-znbm" style="width:100%;height:400px;"></table>
        </div>
</div>

step2：加载数据动态调用的方法

//选中的tabs进行数据的加载
$('.easyui-tabs').tabs({ 
    onSelect:function(title, index){ 
		load();
    }
});
//注意index的获得以及url的写法
function load(){
	/*获得开始时间和结束时间  */
	var startTime =$("#startTime").datebox("getValue");
	var endTime =$("#endTime").datebox("getValue");
	var areaId =$("#areaId").val();
//index的获得
        var index = $('#tabs').tabs('getTabIndex',$('#tabs').tabs('getSelected'));
	$('#' + id[index]).datagrid({
		url:'/performance/' + url[index] + '?startTime=' + startTime + '&endTime=' +endTime 			+ '&areaId='+areaId,
		rownumbers:true,
		singleSelect:true,
		autoRowHeight:false,
		pagination:true,
		pageSize:20,
		columns:[columns[index]]
	});
}

//注意columns的写法
var id = ["page-table-qx", "page-table-znbm", "page-table-cgwl"];
var url = ["getDomain","getDept","getGrid"];
var columns=[
[ 
	{field:'groupName',title:'地区名称',width:150},
	{field:'activeDiscoveryScore',title:'案件主动发现得分',width:120}
],[
	{field:'groupName',title:'地区名称',width:150},
	{field:'activeDiscoveryScore',title:'案件主动发现得分',width:120}
]
];

在dao中完成加载的数据，即可在显示页面上调用加载的数据。

欢迎交流~~

愿你是一个有思维的人！