easyui之datagrid的使用

var searchResult = [];
$(function(){

   getData();
   initTable();

});

//获取数据
function getData(){
    for(var i=0;i<features.length;i++){
		//searchResult的数据结构：[{OBJECTID:  ,YWBH: ,DKMC: ,DKMJ: ,DKYT: ,Shape_Length: ,Shape_Area: }，{}，{},...,{}],
		//数组中的每个对象的各个属性值跟表头一样，若不一样，后面loadData的时候可以再拼接成这样的
         searchResult.push(features[i].attributes);
    }

}

function initTable(){

	var dataHead = [];//表头数组
	//表头数组拼接方式一（变量的方式），数据结构[{field:'OBJECTID',title:'OBJECTID',width:68},{},{},...,{}]
	for(var i=0;i<fields.length;i++){
		var obj = {};//每次定义一个新的obj,保证dataHead中存储的不是同一个obj
		obj.field = fields[i].name;
		obj.title = fields[i].name;
		dataHead.push(obj);

	}
	
	//表头数组拼接方式二（固定值的方式）
	// dataHead.push({field:'OBJECTID',title:'OBJECTID',width:68});
	// dataHead.push({field:'YWBH',title:'YWBH',width:68});
	// dataHead.push({field:'DKMC',title:'DKMC',width:100});
	// dataHead.push({field:'DKMJ',title:'DKMJ',width:68});
	// dataHead.push({field:'DKYT',title:'DKYT',width:80});
	// dataHead.push({field:'Shape_Length',title:'Shape_Length',width:100});
	// dataHead.push({field:'Shape_Area',title:'Shape_Area',width:100});
	
	
	var resTable = $("#dg");
		resTable.datagrid({
			url:null,
			width:600,
			height:380,
			fitColumns:false,//设置为true将自动使列适应表格宽度以防止出现水平滚动,false则自动匹配大小
			loadMsg:"正在努力加载数据中...",//加载数据时向用户展示的语句
			singleSelect:true,//是否只能选择一行
			columns:[dataHead],
			
		});
		
		loadData();

}

function loadData(){
	var resTable = $("#dg");
	//searchResult的数据格式已经在getData()函数拼接好了，拼接成getData()函数中的格式就可以了
	//total表示表格的行数，rows表示表格中的数据
	var obj = { 'total': searchResult.length, 'rows': searchResult };
	resTable.datagrid("loadData", obj);
}


<body>
	<div id="message" style="weight:600px;height:500px;">
        <table id="dg"></table>
    </div>
</body>
easyui之datagrid的使用

猜你喜欢
