快捷導(dǎo)航

EasyUI使用DataGrid實(shí)現(xiàn)動(dòng)態(tài)列數(shù)據(jù)綁定

更新時(shí)間：2022年08月23日 08:45:52 作者：壯哈苗

這篇文章主要介紹了EasyUI使用DataGrid實(shí)現(xiàn)動(dòng)態(tài)列數(shù)據(jù)綁定的相關(guān)資料,需要的朋友可以參考下

最近，在對(duì)公司的一個(gè)老項(xiàng)目進(jìn)行優(yōu)化調(diào)整。有個(gè)使用的三方插件報(bào)表頁(yè)面，一旦查詢時(shí)間過(guò)長(zhǎng)就會(huì)自動(dòng)異常并使瀏覽器崩潰，由于這個(gè)插件只有個(gè)前人遺留的dll文件，實(shí)在看不懂里面的代碼無(wú)從下手，既然項(xiàng)目前端大部分是基于EasyUI做的，想著就直接用EasyUI的DataGrid做數(shù)據(jù)報(bào)表明細(xì)展示。

由于之前很少做過(guò)B/S相關(guān)的項(xiàng)目，對(duì)于前端了解的不是很多，好在EasyUI框架文檔資料比較多，功能也比較齊全,上手還是比較快的。

下面開始我的第一個(gè)關(guān)于報(bào)表開發(fā)時(shí)遇到的第一個(gè)問(wèn)題：EasyUI DataGrid動(dòng)態(tài)列數(shù)據(jù)綁定

EasyUI DataGrid動(dòng)態(tài)列數(shù)據(jù)綁定實(shí)現(xiàn)方式并不是很發(fā)雜，請(qǐng)求到遠(yuǎn)程數(shù)據(jù)后,通過(guò)其中一條列表數(shù)據(jù)獲取到列字段，然后在通過(guò)datagrid對(duì)數(shù)據(jù)進(jìn)行綁定

$.getJSON(url, queryParams, function (result) {
? ? // 清空?qǐng)?bào)表節(jié)點(diǎn)數(shù)據(jù)
? ? $("#tbGrid").empty();

? ? // 拼裝列頭
? ? if (result && result.total > 0) {
? ? ? ? var columns = new Array();
? ? ? ? $.each(result.rows[0], function (i, field) {
? ? ? ? ? ? var column = {};
? ? ? ? ? ? column["title"] = i;
? ? ? ? ? ? column["field"] = i;
? ? ? ? ? ? columns.push(column);
? ? ? ? });

? ? ? ? $('#tbGrid').datagrid({
? ? ? ? ? ? height: 780,
? ? ? ? ? ? singleSelect: true,
? ? ? ? ? ? rownumbers: true,
? ? ? ? ? ? pagination: true,
? ? ? ? ? ? columns: [
? ? ? ? ? ? ? ? columns ?// 列頭綁定
? ? ? ? ? ? ],
? ? ? ? ? ? data: result.rows ?// 表格內(nèi)容數(shù)據(jù)綁定
? ? ? ? });

? ? ? ? //分頁(yè)處理
? ? ? ? var pager = $('#tbGrid').datagrid('getPager');
? ? ? ? pager.pagination({
? ? ? ? ? ? showRefresh: false,
? ? ? ? ? ? total: result.total,
? ? ? ? ? ? pageList: [50, 100, 200, 500],
? ? ? ? ? ? pageSize: queryParams.rows,
? ? ? ? ? ? pageNumber: queryParams.page,
? ? ? ? ? ? buttons: [{
? ? ? ? ? ? ? ? text: '導(dǎo)出',
? ? ? ? ? ? ? ? iconCls: 'icon-redo',
? ? ? ? ? ? ? ? handler: function () {
? ? ? ? ? ? ? ? ? ? exportToExcel(queryParams);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }],
? ? ? ? ? ? onSelectPage: function (pageNumber, pageSize) {
? ? ? ? ? ? ? ? $(this).pagination('loading');
? ? ? ? ? ? ? ? btnRefresh_onclick(pageNumber, pageSize);
? ? ? ? ? ? ? ? $(this).pagination('loaded');
? ? ? ? ? ? }
? ? ? ? });

后臺(tái)返回的數(shù)據(jù)對(duì)象是按datagrid要求的格式數(shù)據(jù)返回的

?public class EasyUIPageObject
?{
? ? ?public object rows { get; set; }
? ? ?public int total { get; set; }
? ? ?public object footer { get; set; } // 可選
?}

到此這篇關(guān)于EasyUI使用DataGrid實(shí)現(xiàn)動(dòng)態(tài)列數(shù)據(jù)綁定的文章就介紹到這了,更多相關(guān)EasyUI DataGrid 動(dòng)態(tài)列數(shù)據(jù)綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: