摘要:什么是是一種基于和的用戶界面插件集合。為創(chuàng)建現代化,互動,應用程序,提供必要的功能。是個完美支持網頁的完整框架。很簡單但功能強大的。返回則取消該動作。該函數有下列參數要傳遞到遠程服務器的參數對象。當檢索數據成功時調用的回調函數。
什么是easyUI
easyui是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合。
easyui為創(chuàng)建現代化,互動,JavaScript應用程序,提供必要的功能。
使用easyui你不需要寫很多代碼,你只需要通過編寫一些簡單HTML標記,就可以定義用戶界面。
easyui是個完美支持HTML5網頁的完整框架。
easyui節(jié)省您網頁開發(fā)的時間和規(guī)模。
easyui很簡單但功能強大的。
由于項目需要,主要利用easyUI的數據表格datagrid做后臺系統(tǒng)前端部分
使用EasyUI for JQuery
$("#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...
需求:頁面首次加載,datagrid不加載頁面數據,點擊查詢按鈕再進行數據渲染
//onBeforeLoad發(fā)送加載數據的請求前觸發(fā),如果返回 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: [] });//清空表格數據
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54746.html
摘要:什么是是一種基于和的用戶界面插件集合。為創(chuàng)建現代化,互動,應用程序,提供必要的功能。是個完美支持網頁的完整框架。很簡單但功能強大的。返回則取消該動作。該函數有下列參數要傳遞到遠程服務器的參數對象。當檢索數據成功時調用的回調函數。 什么是easyUI easyui是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合。easyui為創(chuàng)建現代化,互動,JavaScr...
摘要:什么是是一種基于和的用戶界面插件集合。為創(chuàng)建現代化,互動,應用程序,提供必要的功能。是個完美支持網頁的完整框架。很簡單但功能強大的。返回則取消該動作。該函數有下列參數要傳遞到遠程服務器的參數對象。當檢索數據成功時調用的回調函數。 什么是easyUI easyui是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合。easyui為創(chuàng)建現代化,互動,JavaScr...
摘要:官方的數據表格屬性中提供了屬性其作用是設置為,則把數據顯示在一行里。設置為可提高加載性能。 官方的數據表格屬性中提供了nowrap屬性其作用是:設置為 true,則把數據顯示在一行里。設置為 true 可提高加載性能。 默認為true在設置數據表格屬性時將nowrap屬性設置為false時,并且設置表格的寬度,當單元格內數據內容超過寬度時就會自動換行 { field : khm...
摘要:項目初期在加載數據表格的時候為了提高表格數據渲染速度,設置了默認寬度。現需求需要加一個表格自適應的功能,觸發(fā)改功能,改變列寬度,但是不重新渲染表格,不發(fā)生數據請求。設計思路,遍歷每項的所有數據,比較字節(jié)符串長度,取最大長度。 項目初期在加載數據表格的時候為了提高表格數據渲染速度,設置了默認寬度。現需求需要加一個表格自適應的功能,觸發(fā)改功能,改變列寬度,但是不重新渲染表格,不發(fā)生數據請求...
摘要:在的表頭列特別多的情況下,不可能一個個的手寫,這時就需要使用動態(tài)創(chuàng)建的方式,把表頭列創(chuàng)建出來。正在加載,請稍候組裝動態(tài)參數,可以是后臺返回的注意是數組對象,不能采用拼接字符串的方式構造應采用下面方式進行構造設備型號 在datagrid的表頭列特別多的情況下,不可能一個個的手寫,這時就需要使用動態(tài)創(chuàng)建的方式,把表頭列創(chuàng)建出來。 下面是datagrid中columns的格式 col...
閱讀 5739·2021-11-24 10:25
閱讀 2689·2021-11-16 11:44
閱讀 3843·2021-10-11 11:09
閱讀 3172·2021-09-02 15:41
閱讀 3256·2019-08-30 14:14
閱讀 2271·2019-08-29 14:10
閱讀 2345·2019-08-29 11:03
閱讀 1125·2019-08-26 13:47