什么是easyUIeasyui是一个基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代的、交互式的JavaScript应用程序提供了必要的功能。你不需要写很多代码来使用easyui，你只需要写一些简单的HTML标签来定义用户界面。easyui是一个完美支持HTML5网页的完整框架。easyui可以节省您的Web开发时间和规模。easyui简单但功能强大。使用后台由于项目需要，主要使用easyUI的数据网格作为后台系统的前端部分。使用EasyUIforJQuery，使用js创建数据网格。$('#dg').datagrid({url:'datagrid_data.json',columns:[[{field:'code',title:'Code',width:100},{field:'name',title:'Name',width:100},{field:'price',title:'Price',width:100,align:'right'}]]});通过一些参数查询数据$('#dg').datagrid('load',{name:'easyui',address:'ho'});改数据到服务器后，更新前台数据$('#dg').datagrid('reload');官方文档路径官网：http://www.jeasyui。net/下载路径：http://www.jeasyui.net/下载官方中文文档：http://www.jeasyui.net/pluginsdatagrid数据网格详细介绍：http://www.jeasyui.net/plugin..。遇到的问题1.数据第一次没有加载需求：页面第一次加载时，datagrid没有加载页面数据，点击查询按钮，然后渲染数据//onBeforeLoad在发送请求前触发加载数据，若返回false，则取消加载动作。//第一次不加载页面数据onBeforeLoad:function(param){varfirstLoad=$(this).attr("firstLoad");if(firstLoad=="false"||typeof(firstLoad)=="undefined"){$(this).attr("firstLoad","true");返回假；}returntrue;}2.请求参数，服务器响应415无法修改content-Type可以使用loader自定义获取数据loader：定义如何从远程服务器加载数据。返回false以取消操作。该函数有以下参数：param：要传递给远程服务器的参数对象。success(data)：获取数据成功时调用的回调函数。error()：获取数据失败时调用的回调函数。loader:function(param,success,error){//console.log(param,success,error);$.ajax({type:"POST",url:'请求接口',contentType:"application/json",dataType:"json",data:JSON.stringify(param)//将数据转成JSON格式}).done(function(data){if(data.total!=0){success(data);}else{$.messager.alert('');error();}}).fail(function(){});},3.分页总页数，总条数设置问题后台返回json数据格式{total:总共有多少条数据,rows:[{,},{,}]//结果数据ofpagenumber}4.修改datagrid的默认请求参数名//重新制定请求参数名onBeforeLoad:function(param){varpage=param.page;//保存默认请求参数page值deleteparam.page;//删除默认请求参数pageparam.PageIndex=page;//更改默认请求参数名称page为PageIndex}5.设置提示信息在页面居中$.messager.show({})默认宽250高100使用style属性重新定位消息框的位置style:{left:document.body.clientWidth/2-125,//距左边框的距离top:document.body.clientHeight/2-50//距顶部的距离}空表数据$('#tableData).datagrid('loadData',{total:0,rows:[]});//空表数据
