Easyui DataGrid自定义视图和subGrid

最新推荐文章于 2025-10-19 14:11:41 发布

原创

最新推荐文章于 2025-10-19 14:11:41 发布 · 5.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #datagrid #DetailView #扩展

本文介绍了如何使用Easyui的DataGrid组件自定义视图divview，扩展一行以展示更多细节。通过重写默认的renderRow方法，实现了更多样化的视图效果。同时，讲解了DataGrid的subGrid应用，包括onExpandRow事件触发的子Grid创建和fixDetailRowHeight()方法用于调整主Grid和子Grid的高度。

使用DataGrid的自定义视图，可以扩展一行显示更多的细节

下文定义的divview其实是使用了datagrid的view配置，重写了其默认的renderRow方法。

基于这种实现，我们可以显示更多样式的view。

1、通过扩展$.fn.datagrid.defaults.view定义一个视图：

var divview = $.extend({}, $.fn.datagrid.defaults.view, {
		render : function (target, container, frozen) {
			var opts = $.data(target, 'datagrid').options;
			var rows = $.data(target, 'datagrid').data.rows;
			var fields = $(target).datagrid('getColumnFields', frozen);
			var table = [];
			if(frozen){
				$(container).parent().prev().remove();			
			}else{
				$(container).prev().remove();
				$(container).css('overflow-x','hidden');
			}
			for(var i = 0; i < rows.length; i++) {
				table.push(this.renderRow.call(rows[i], target, fiel