成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

EasyUI datagrid問題整理

megatron / 2847人閱讀

摘要：什么是是一種基于和的用戶界面插件集合。為創(chuàng)建現(xiàn)代化，互動，應(yīng)用程序，提供必要的功能。是個完美支持網(wǎng)頁的完整框架。很簡單但功能強(qiáng)大的。返回則取消該動作。該函數(shù)有下列參數(shù)要傳遞到遠(yuǎn)程服務(wù)器的參數(shù)對象。當(dāng)檢索數(shù)據(jù)成功時調(diào)用的回調(diào)函數(shù)。

什么是easyUI

easyui是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合。
easyui為創(chuàng)建現(xiàn)代化，互動，JavaScript應(yīng)用程序，提供必要的功能。
使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標(biāo)記，就可以定義用戶界面。
easyui是個完美支持HTML5網(wǎng)頁的完整框架。
easyui節(jié)省您網(wǎng)頁開發(fā)的時間和規(guī)模。
easyui很簡單但功能強(qiáng)大的。

使用背景

由于項(xiàng)目需要，主要利用easyUI的數(shù)據(jù)表格datagrid做后臺系統(tǒng)前端部分
使用EasyUI for JQuery

使用js創(chuàng)建數(shù)據(jù)網(wǎng)格 
$("#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"}
    ]]
});

通過一些參數(shù)查詢數(shù)據(jù)

$("#dg").datagrid("load", {
    name: "easyui",
    address: "ho"
});

在向服務(wù)器改變數(shù)據(jù)后，更新前臺數(shù)據(jù)

$("#dg").datagrid("reload");
官方文檔路徑

官方網(wǎng)址：http://www.jeasyui.net/
下載路徑：http://www.jeasyui.net/download
官方中文文檔：http://www.jeasyui.net/plugins
datagrid數(shù)據(jù)網(wǎng)格詳細(xì)介紹：http://www.jeasyui.net/plugin...

遇到的問題 1.初次不加載數(shù)據(jù)

需求：頁面首次加載，datagrid不加載頁面數(shù)據(jù)，點(diǎn)擊查詢按鈕再進(jìn)行數(shù)據(jù)渲染

//onBeforeLoad發(fā)送加載數(shù)據(jù)的請求前觸發(fā)，如果返回 false 加載動作就會取消。
//首次不加載頁面數(shù)據(jù)
onBeforeLoad: function (param) {
    var firstLoad = $(this).attr("firstLoad");
    if (firstLoad == "false" || typeof (firstLoad) == "undefined")
    {
        $(this).attr("firstLoad","true");
        return false;
    }
    return true;
}
2.請求參數(shù)，服務(wù)器響應(yīng)415

無法修改content-Type
可以改用loader自定義獲取數(shù)據(jù)
loader：定義如何從遠(yuǎn)程服務(wù)器加載數(shù)據(jù)。返回 false 則取消該動作。該函數(shù)有下列參數(shù)：
param：要傳遞到遠(yuǎn)程服務(wù)器的參數(shù)對象。
success(data)：當(dāng)檢索數(shù)據(jù)成功時調(diào)用的回調(diào)函數(shù)。
error()：當(dāng)檢索數(shù)據(jù)失敗時調(diào)用的回調(diào)函數(shù)。

 loader: function (param, success, error) {
    //console.log(param, success, error);
        $.ajax({
            type: "POST",
            url : "請求接口",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(param)//數(shù)據(jù)轉(zhuǎn)換成JSON格式
        }).done(function (data) {
            if (data.total!=0) {
                success(data);
                }
            else {
                $.messager.alert("");
                error();
                }
            }).fail(function () {

        });
    },
3.分頁總頁數(shù)，總條數(shù)設(shè)置問題

后臺返回json數(shù)據(jù)格式

{
total:總共有多少條數(shù)據(jù)，
rows:[{,},{,}]//請求頁數(shù)的結(jié)果數(shù)據(jù)
}
4.修改datagrid默認(rèn)請求參數(shù)名稱 
//重新制定請求參數(shù)名稱
onBeforeLoad : function(param){ 
    var page = param.page; //保存下默認(rèn)請求參數(shù)page值
    delete param.page; //刪掉默認(rèn)請求參數(shù)page
    param.PageIndex = page; //將默認(rèn)請求參數(shù)名稱page換為PageIndex
}
5.設(shè)置提示信息居于頁面中心

$.messager.show({}) 默認(rèn)寬250 高100
利用style屬性，從新定位消息框位置

?style:{
left:document.body.clientWidth/2-125, // 與左邊界的距離
top:document.body.clientHeight/2-50 // 與頂部的距離
????}
清空表格數(shù)據(jù) 
$("#tableData).datagrid("loadData", { total: 0, rows: [] });//清空表格數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103000.html

相關(guān)文章

  • EasyUI datagrid問題整理

    摘要：什么是是一種基于和的用戶界面插件集合。為創(chuàng)建現(xiàn)代化，互動，應(yīng)用程序，提供必要的功能。是個完美支持網(wǎng)頁的完整框架。很簡單但功能強(qiáng)大的。返回則取消該動作。該函數(shù)有下列參數(shù)要傳遞到遠(yuǎn)程服務(wù)器的參數(shù)對象。當(dāng)檢索數(shù)據(jù)成功時調(diào)用的回調(diào)函數(shù)。 什么是easyUI easyui是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合。easyui為創(chuàng)建現(xiàn)代化，互動，JavaScr...

    yexiaobai 評論0 收藏0

  • EasyUI datagrid問題整理

    摘要：什么是是一種基于和的用戶界面插件集合。為創(chuàng)建現(xiàn)代化，互動，應(yīng)用程序，提供必要的功能。是個完美支持網(wǎng)頁的完整框架。很簡單但功能強(qiáng)大的。返回則取消該動作。該函數(shù)有下列參數(shù)要傳遞到遠(yuǎn)程服務(wù)器的參數(shù)對象。當(dāng)檢索數(shù)據(jù)成功時調(diào)用的回調(diào)函數(shù)。 什么是easyUI easyui是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合。easyui為創(chuàng)建現(xiàn)代化，互動，JavaScr...

    Kross 評論0 收藏0

  • EasyUI datagrid數(shù)據(jù)表格單元格內(nèi)允許換行 解決單元格內(nèi)純數(shù)字或英文文本不能換行問題

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

    junfeng777 評論0 收藏0

  • EasyUI 數(shù)據(jù)表格datagrid列自適應(yīng)內(nèi)容寬度（不需重新加載表格）

    摘要：項(xiàng)目初期在加載數(shù)據(jù)表格的時候?yàn)榱颂岣弑砀駭?shù)據(jù)渲染速度，設(shè)置了默認(rèn)寬度?，F(xiàn)需求需要加一個表格自適應(yīng)的功能，觸發(fā)改功能，改變列寬度，但是不重新渲染表格，不發(fā)生數(shù)據(jù)請求。設(shè)計(jì)思路，遍歷每項(xiàng)的所有數(shù)據(jù)，比較字節(jié)符串長度，取最大長度。 項(xiàng)目初期在加載數(shù)據(jù)表格的時候?yàn)榱颂岣弑砀駭?shù)據(jù)渲染速度，設(shè)置了默認(rèn)寬度。現(xiàn)需求需要加一個表格自適應(yīng)的功能，觸發(fā)改功能，改變列寬度，但是不重新渲染表格，不發(fā)生數(shù)據(jù)請求...

    FrozenMap 評論0 收藏0

  • EasyUI中DataGrid動態(tài)參數(shù)的實(shí)現(xiàn)

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

    騫諱護(hù) 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<