共计 1754 个字符，预计需要花费 5 分钟才能阅读完成。
什么是 easyUI
easyui 是一种基于 jQuery、Angular.、Vue 和 React 的用户界面插件集合。easyui 为创建现代化，互动，JavaScript 应用程序，提供必要的功能。使用 easyui 你不需要写很多代码，你只需要通过编写一些简单 HTML 标记，就可以定义用户界面。easyui 是个完美支持 HTML5 网页的完整框架。easyui 节省您网页开发的时间和规模。easyui 很简单但功能强大的。
使用背景
由于项目需要，主要利用 easyUI 的数据表格 datagrid 做后台系统前端部分使用 EasyUI for JQuery
使用 js 创建数据网格
<table id=”dg”></table>
$(‘#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/download 官方中文文档：http://www.jeasyui.net/pluginsdatagrid 数据网格详细介绍：http://www.jeasyui.net/plugin…
遇到的问题
1. 初次不加载数据
需求：页面首次加载，datagrid 不加载页面数据，点击查询按钮再进行数据渲染
//onBeforeLoad 发送加载数据的请求前触发，如果返回 false 加载动作就会取消。
// 首次不加载页面数据
onBeforeLoad: function (param) {
var firstLoad = $(this).attr(“firstLoad”);
if (firstLoad == “false” || typeof (firstLoad) == “undefined”)
{
$(this).attr(“firstLoad”,”true”);
return false;
}
return true;
}
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:[{,},{,}]// 请求页数的结果数据
}
4. 修改 datagrid 默认请求参数名称
// 重新制定请求参数名称
onBeforeLoad : function(param){
var page = param.page; // 保存下默认请求参数 page 值
delete param.page; // 删掉默认请求参数 page
param.PageIndex = page; // 将默认请求参数名称 page 换为 PageIndex
}
