iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >EasyUI使用DataGrid实现动态列数据绑定
  • 556
分享到

EasyUI使用DataGrid实现动态列数据绑定

2024-04-02 19:04:59 556人浏览 安东尼
摘要

最近,在对公司的一个老项目进行优化调整。有个使用的三方插件报表页面,一旦查询时间过长就会自动异常并使浏览器崩溃,由于这个插件只有个前人遗留的dll文件,实在看不懂里面的代码无从下手,

最近,在对公司的一个老项目进行优化调整。有个使用的三方插件报表页面,一旦查询时间过长就会自动异常并使浏览器崩溃,由于这个插件只有个前人遗留的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 动态列数据绑定内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

相关参考:

https://www.jeasyui.com/forum/index.PHP?topic=2197.0
Http://jeasyui.com/documentation/index.php#

--结束END--

本文标题: EasyUI使用DataGrid实现动态列数据绑定

本文链接: https://www.lsjlt.com/news/165707.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • EasyUI使用DataGrid实现动态列数据绑定
    最近,在对公司的一个老项目进行优化调整。有个使用的三方插件报表页面,一旦查询时间过长就会自动异常并使浏览器崩溃,由于这个插件只有个前人遗留的dll文件,实在看不懂里面的代码无从下手,...
    99+
    2024-04-02
  • Easyui Datagrid如何实现自定义按钮列
    这篇文章主要介绍Easyui Datagrid如何实现自定义按钮列,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没...
    99+
    2024-04-02
  • datagrid怎么绑定数据库实现数据同步
    要实现datagrid与数据库的数据绑定,可以通过以下步骤实现数据同步: 配置数据库连接:首先需要配置datagrid与数据库之...
    99+
    2024-03-14
    datagrid 数据库
  • C#winform中数据库绑定DataGrid的实现
    目录1. 建立数据库2.C#winform创建窗体程序3.创建DataGridView以及数据绑定第一次写博客,记录一下 最近在利用winform和数据库SQLServe进行数据操作...
    99+
    2024-04-02
  • 怎么使用DataGrid控件绑定数据
    要使用DataGrid控件绑定数据,您可以按照以下步骤进行操作:1. 首先,确保您已经在项目中添加了DataGrid控件。这通常涉及...
    99+
    2023-10-10
    DataGrid
  • EasyUI如何实现数据表格datagrid列自适应内容宽度
    这篇文章将为大家详细讲解有关EasyUI如何实现数据表格datagrid列自适应内容宽度,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。项目初期在加载数据表格的时候为了提高...
    99+
    2024-04-02
  • C#如何实现dataGridView动态绑定数据
    目录dataGridView动态绑定数据1.动态绑定DataTable数据2.动态添加数据datagridView数据插入dataGridView动态绑定数据 1.动态绑定DataT...
    99+
    2024-04-02
  • vue.js中怎么实现动态数据绑定
    这期内容当中小编将会给大家带来有关vue.js中怎么实现动态数据绑定,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。从new一个实例开始谈起网上的很多源码解读都是从 Obs...
    99+
    2024-04-02
  • BootStrap中如何实现selectpicker后台动态绑定数据
    这篇文章主要介绍BootStrap中如何实现selectpicker后台动态绑定数据,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!html部分代码<select cl...
    99+
    2024-04-02
  • vue中使用echarts实现动态数据绑定以及获取后端接口数据
    目录前言1.柱状图2.折线图 3.饼状图 4.地图 总结前言 之前几篇echarts的文章是实现了静态的柱状图、折线图、饼状图、地图,在项目中我们肯定是...
    99+
    2024-04-02
  • vue中如何使用echarts实现动态数据绑定及获取后端接口数据
    本篇内容主要讲解“vue中如何使用echarts实现动态数据绑定及获取后端接口数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue中如何使用echarts实现动态数据绑定及获取后端接口数据”...
    99+
    2023-07-02
  • GridView绑定数据的实现-wpf数据绑定
    在WPF中,可以通过以下步骤实现GridView的数据绑定:1. 创建一个数据模型类,用于表示你要绑定的数据对象。该类应该实现INo...
    99+
    2023-09-22
    GridView
  • WXML中的动态数据怎么绑定
    这篇文章主要介绍“WXML中的动态数据怎么绑定”,在日常操作中,相信很多人在WXML中的动态数据怎么绑定问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”WXML中的动态数据怎么绑定”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-26
  • 使用Vue.js实现数据的双向绑定
    目录如何用Vue.js实现数据的双向绑定?1. 理解双向绑定2. 使用v-model指令3. 使用自定义组件实现双向绑定4. 数据劫持5. 模板引擎6.Object.definePr...
    99+
    2023-05-16
    Vue.js数据的双向绑定 Vue.js双向绑定
  • js中如何使用事件on动态绑定数据以及绑定多个事件
    这篇文章将为大家详细讲解有关js中如何使用事件on动态绑定数据以及绑定多个事件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一.on('clcik')与$...
    99+
    2024-04-02
  • WPF实现数据绑定
    简单而言, 数据绑定是一种关系, 这种关系告诉WPF 从一个源目标对象中提取一些信息, 并且使用该信息设置为目标对象的属性。目标属性总是依赖项属性, 并且通常位于WPF元素中。 然而...
    99+
    2024-04-02
  • vue中v-bind和Props如何使用props绑定动态数据
    这篇文章主要为大家展示了“vue中v-bind和Props如何使用props绑定动态数据”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中v-bind和Pr...
    99+
    2024-04-02
  • 使用Vue3进行数据绑定及显示列表数据
    目录一、与 Vue2 对比1、 Vue3 新特性2、 Vue2、Vue3 响应原理对比3、重写数组的方法,检测数组变更4、直观感受二、使用Vue3进行数据绑定示例1、使用ref实现数...
    99+
    2024-04-02
  • Python动态绑定属性slots的使用
    当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性。废话不多说,我们看一个例子: class Person(object): pass p = Person()...
    99+
    2023-01-31
    绑定 属性 动态
  • java中动态绑定的使用方法
    这篇文章主要介绍了java中动态绑定的使用方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1、用法程序在编译的时候调用的其实是父类的 eat 方法,但是在运行时运行的则是子...
    99+
    2023-06-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作