datagrid数据格式解析－自定义过滤函数loadFilter-优快云博客

本文链接：https://blog.youkuaiyun.com/Jabbar2012/article/details/84426042

本文介绍如何使用 EasyUI 的 datagrid 组件，并实现自定义数据加载及过滤功能。主要内容包括设置 datagrid 属性如宽度、高度、排序方式等，通过示例展示如何配置并加载数据，同时提供了一种解决 appendRow 时无法解析新行数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$('#tTable').datagrid({
		fit:true,
		iconCls:'icon-liebiao',
		width:200,
		height:450,
		singleSelect : true,
		loadMsg : '请稍候......',
		nowrap: false,
		striped: true,
		url:'',
		sortName: 'id',
		sortOrder: 'asc',
		remoteSort: false,
		idField:'id',
		pageSize : 20,
		showFooter:false,
		columns : [ [ {
			field : 'base.name',
			title : '名称',
			width : 100
		},
		{
			field : 'base.das.base.name',
			title : '服务器',
			width : 100
		},
		{
			field : 'base.model.firm.name',
			title : '厂商',
			width : 100
		},
		{
			field : 'base.model.name',
			title : '型号',
			width : 100
		}

		 ] ],
                 loadFilter:function(data){
			return loadFilter(data);	//自定义过滤方法		
		 }

自定义过滤数据方法：


//datagrid数据格式过滤器
function loadFilter(data){
	var value = {
			total:data.total,
			rows:[]
	};
	for (var i = 0; i < data.rows.length; i++) {
		var o = {};
		_loadArray(data.rows[i],o,"");
  	value.rows.push(o);
    }
	return value;
}
function _loadArray(data,o,pre){
	if(pre)
			pre = pre+".";
	 for (var att in data) {
    	   var row = data[att];
    	   if(typeof(row) == "object"){
    		   _loadArray(row,o,pre+att);
    	   }else{
    					o[pre+att] = row;    			   
    	   			}

       }
}

[size=medium][color=red]
测试数据如下，最终生成的数据格式：[/color][/size]
[img][/img]

[color=red][size=medium]取值方法[/size][/color] node["base.name"]以此类推

[color=red][size=medium]解决appendRow时无法解析新的行数据的方法：[/size][/color]

//改变数据格式
var node = {};	
_loadArray(res.data.data,node,"");				
$('#tTable').datagrid('appendRow',node);