EasyUI datagrid问题整理

站长手记 作者: 2024-08-28 00:20:01
easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。

什么是easyUI

使用背景

使用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');

官方文档路径

遇到的问题

1.初次不加载数据

//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

 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.分页总页数,总条数设置问题

{
total:总共有多少条数据,
rows:[{,},{,}]//请求页数的结果数据
}

4.修改datagrid默认请求参数名称

//重新制定请求参数名称
onBeforeLoad : function(param){ 
    var page = param.page; //保存下默认请求参数page值
    delete param.page; //删掉默认请求参数page
    param.PageIndex = page; //将默认请求参数名称page换为PageIndex
}
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_69830.html
EasyUI datagrid jQuery Angular Vue