Esayui-datagrid 表格数据初始化的三种方式

前言

        Esayui-datagrid中的表格有三种初始化数据的方式，分别是纯html式，使用ajax方式初始化表格和把数据接口和表格初始化分开处理的方式。三种方式各有优缺点，交错使用，可以使Esayui框架的容错性更高。解决远程数据接口返回数据和框架所需求的数据不适配的问题，复杂请求参数的不适配问题。

---

首先是第一种：纯html式

        这种方式是官方文档默认的方式

<div>
	<table class="easyui-datagrid" url="数据接口地址" 
				fitColumns="true" id="tableDemo" fit="true"
				striped="true" idField="field1" rownumbers="true" queryParams="{请求参数}">
		<thead>   
			 <tr>
			      <th data-options="field:'field1',checkbox:true">
			      <th data-options="field:'field2'" width="100" align="center" hidden="true">展示字段1</th>  
			      <th data-options="field:'field3'" width="130">展示字段2</th>		    
			</tr>   
		</thead> 
	</table>
</div>

        rownumbers属性是显示行数的意思

第二种：使用ajax方式初始化表格

html:

<div>
		<table id="tableId"></table>
</div>  

js:

$("#tableId").datagrid({
			fitColumns:true,
			fit:true,
			striped:true,
			idField:"field1",
			rownumbers:true,
			pagination:true,
			sortOrder:"desc",
			pageSize:20,
			url:'数据接口地址',
			queryParams:{请求参数},
			columns:[[
				{field:'field1',checkbox:true},
				{field:'field2',title:'field2',align:'center',widthe:100,hidden:true},
				{field:'field3',title:'field3',align:'center',widthe:120,},
				{field:'field4',title:'field4',align:'center',widthe:60,}
			]],
			onLoadSuccess:function(data){
				//表格加载成功事件
			},
			onClickRow:function(index, row){
				//点击行事件
			}
});

        属性pagination:true的意思是启用自带的换页器

        这种方法明显html文件的代码更简洁，是页面结构更清晰，有利于我们开发

第三种，把数据接口和表格初始化分开处理的方式

html：

<div>
		<table id="tableId"></table>
</div>  

js:

//初始化表格
    function loadTable() {
        $('#tableId').datagrid({
            fit:true,
            striped:true,
            fitColumns:true,
            nowrap:false,
            // rownumbers:true,
            idField:"field1",
            pagination:true,
            pageSize:20,
            columns:[[
                {field:'field1',title:'字段1',align:'center',width:'100'},
                {field:'field2',title:'字段2',align:'center',width:'240',
                {field:'field3',title:'字段3',align:'center',width:'150'}
            ]],
            onLoadSuccess:function(){
                //这里是重新定义换页事件，没有需求是可以不写的
                hyClick();
                initData();
            },
        });
    }
    //初始化数据
    function initData() {
        $("#tableId").datagrid('loading');
        $.ajax({
            dataType: 'json',
            data:请求参数,
            method:'post',
            contentType : "application/json;charset=UTF-8",
            url:base+'数据接口地址',
            success:function (data) {
                //使返回数据适应datagrid框架
                let newData = {
                    rows:data.jg,
                    total:data.totalCount
                };
                $("#tableId").datagrid('loaded');
                //这句代码，是初始化前端处理好的数据
                $("#tableId").datagrid('loadData',newData);
            }
        })
    }

        那么这样写有什么好处呢，首先在开发中，有一些接口提前写好的或者通用的，但是接口的请求参数和返回数据，不符合datagrid的格式就会造成请求失败，或者数据展示不出来的错误。而像上面这样做的话，就可以使数据灵活变化，减少工作量，但是这样改的话，如果需要使用换页功能，则需要对换页事件做一下微调。