日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

EasyUI使用DataGrid實現動態列數據綁定_jquery

作者：壯哈苗 ? 更新時間： 2022-10-18 編程語言

最近，在對公司的一個老項目進行優化調整。有個使用的三方插件報表頁面，一旦查詢時間過長就會自動異常并使瀏覽器崩潰，由于這個插件只有個前人遺留的dll文件，實在看不懂里面的代碼無從下手，既然項目前端大部分是基于EasyUI做的，想著就直接用EasyUI的DataGrid做數據報表明細展示。

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

下面開始我的第一個關于報表開發時遇到的第一個問題：EasyUI DataGrid動態列數據綁定

EasyUI DataGrid動態列數據綁定實現方式并不是很發雜，請求到遠程數據后,通過其中一條列表數據獲取到列字段，然后在通過datagrid對數據進行綁定

$.getJSON(url, queryParams, function (result) {
? ? // 清空報表節點數據
? ? $("#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 ?// 表格內容數據綁定
? ? ? ? });

? ? ? ? //分頁處理
? ? ? ? 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: '導出',
? ? ? ? ? ? ? ? iconCls: 'icon-redo',
? ? ? ? ? ? ? ? handler: function () {
? ? ? ? ? ? ? ? ? ? exportToExcel(queryParams);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }],
? ? ? ? ? ? onSelectPage: function (pageNumber, pageSize) {
? ? ? ? ? ? ? ? $(this).pagination('loading');
? ? ? ? ? ? ? ? btnRefresh_onclick(pageNumber, pageSize);
? ? ? ? ? ? ? ? $(this).pagination('loaded');
? ? ? ? ? ? }
? ? ? ? });

后臺返回的數據對象是按datagrid要求的格式數據返回的

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

到此這篇關于EasyUI使用DataGrid實現動態列數據綁定的文章就介紹到這了,更多相關EasyUI DataGrid 動態列數據綁定內容請搜索AB教程網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持AB教程網！

相關參考：

原文鏈接：https://www.cnblogs.com/zhuanghamiao/p/datagrid-with-dynamic-columns.html

欄目分類
最近更新