EasyUI datagrid問題整理

Kross 發布于2019-08-30 15:43 / 2577人閱讀

摘要：什么是是一種基于和的用戶界面插件集合。為創建現代化，互動，應用程序，提供必要的功能。是個完美支持網頁的完整框架。很簡單但功能強大的。返回則取消該動作。該函數有下列參數要傳遞到遠程服務器的參數對象。當檢索數據成功時調用的回調函數。

什么是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?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116004.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...

yexiaobai 2019-08-02 16:09 評論0 收藏0
EasyUI datagrid數據表格單元格內允許換行解決單元格內純數字或英文文本不能換行問題

摘要：官方的數據表格屬性中提供了屬性其作用是設置為，則把數據顯示在一行里。設置為可提高加載性能。官方的數據表格屬性中提供了nowrap屬性其作用是：設置為 true，則把數據顯示在一行里。設置為 true 可提高加載性能。默認為true在設置數據表格屬性時將nowrap屬性設置為false時，并且設置表格的寬度，當單元格內數據內容超過寬度時就會自動換行 { field : khm...

junfeng777 2019-08-26 10:28 評論0 收藏0
EasyUI 數據表格datagrid列自適應內容寬度（不需重新加載表格）

摘要：項目初期在加載數據表格的時候為了提高表格數據渲染速度，設置了默認寬度?，F需求需要加一個表格自適應的功能，觸發改功能，改變列寬度，但是不重新渲染表格，不發生數據請求。設計思路，遍歷每項的所有數據，比較字節符串長度，取最大長度。項目初期在加載數據表格的時候為了提高表格數據渲染速度，設置了默認寬度?，F需求需要加一個表格自適應的功能，觸發改功能，改變列寬度，但是不重新渲染表格，不發生數據請求...

FrozenMap 2019-08-26 10:11 評論0 收藏0
EasyUI中DataGrid動態參數的實現

摘要：在的表頭列特別多的情況下，不可能一個個的手寫，這時就需要使用動態創建的方式，把表頭列創建出來。正在加載，請稍候組裝動態參數，可以是后臺返回的注意是數組對象，不能采用拼接字符串的方式構造應采用下面方式進行構造設備型號在datagrid的表頭列特別多的情況下，不可能一個個的手寫，這時就需要使用動態創建的方式，把表頭列創建出來。下面是datagrid中columns的格式 col...

騫諱護 2019-08-20 13:45 評論0 收藏0