EasyUI datagrid問題整理

什麼是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/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: [] });//清空表格數據