EasyUI datagrid问题整理

yexiaobai 发布于2019-08-02 16:09 / 1848人阅读

摘要：什么是是一种基于和的用户界面插件集合。为创建现代化，互动，应用程序，提供必要的功能。是个完美支持网页的完整框架。很简单但功能强大的。返回则取消该动作。该函数有下列参数要传递到远程服务器的参数对象。当检索数据成功时调用的回调函数。

什么是easyUI

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。

使用背景

由于项目需要，主要利用easyUI的数据表格datagrid做后台系统前端部分
使用EasyUI for JQuery

使用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/download
官方中文文档：http://www.jeasyui.net/plugins
datagrid数据网格详细介绍：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
}

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: [] });//清空表格数据

云服务器 GPU云服务器 Easyui?datagrid easyui_datagrid_edit Ajax乱码问题整理 datagrid?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54746.html

EasyUI datagrid问题整理

摘要：什么是是一种基于和的用户界面插件集合。为创建现代化，互动，应用程序，提供必要的功能。是个完美支持网页的完整框架。很简单但功能强大的。返回则取消该动作。该函数有下列参数要传递到远程服务器的参数对象。当检索数据成功时调用的回调函数。什么是easyUI easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化，互动，JavaScr...

megatron 2019-08-23 16:24 评论0 收藏0
EasyUI datagrid问题整理

摘要：什么是是一种基于和的用户界面插件集合。为创建现代化，互动，应用程序，提供必要的功能。是个完美支持网页的完整框架。很简单但功能强大的。返回则取消该动作。该函数有下列参数要传递到远程服务器的参数对象。当检索数据成功时调用的回调函数。什么是easyUI easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化，互动，JavaScr...

Kross 2019-08-30 15:43 评论0 收藏0
EasyUI datagrid数据表格单元格内允许换行解决单元格内纯数字或英文文本不能换行问题

摘要：官方的数据表格属性中提供了属性其作用是设置为，则把数据显示在一行里。设置为可提高加载性能。官方的数据表格属性中提供了nowrap属性其作用是：设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。默认为true在设置数据表格属性时将nowrap属性设置为false时，并且设置表格的宽度，当单元格内数据内容超过宽度时就会自动换行 { field : khm...

junfeng777 2019-08-26 10:28 评论0 收藏0
EasyUI 数据表格datagrid列自适应内容宽度（不需重新加载表格）

摘要：项目初期在加载数据表格的时候为了提高表格数据渲染速度，设置了默认宽度。现需求需要加一个表格自适应的功能，触发改功能，改变列宽度，但是不重新渲染表格，不发生数据请求。设计思路，遍历每项的所有数据，比较字节符串长度，取最大长度。项目初期在加载数据表格的时候为了提高表格数据渲染速度，设置了默认宽度。现需求需要加一个表格自适应的功能，触发改功能，改变列宽度，但是不重新渲染表格，不发生数据请求...

FrozenMap 2019-08-26 10:11 评论0 收藏0
EasyUI中DataGrid动态参数的实现

摘要：在的表头列特别多的情况下，不可能一个个的手写，这时就需要使用动态创建的方式，把表头列创建出来。正在加载，请稍候组装动态参数，可以是后台返回的注意是数组对象，不能采用拼接字符串的方式构造应采用下面方式进行构造设备型号在datagrid的表头列特别多的情况下，不可能一个个的手写，这时就需要使用动态创建的方式，把表头列创建出来。下面是datagrid中columns的格式 col...

骞讳护 2019-08-20 13:45 评论0 收藏0