`
fordream
  • 浏览: 63472 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JQuery EasyUI 根据数据动态生成datagrid

阅读更多
function load(sdate) {
    $.getJSON("workorder/statistics.do", {
        sdate : sdate+'-01'
    }, function(resp) { //获取数据源
        var columns = new Array(); //定义列集合
        var row = resp.rows[0];        //获取首行数据

        //根据首行数据创建columns配置
        $.each(row, function(i, v) {
            if (i != "username") {
                var column = {};
                column["title"] = "" + i;//我这里默认用键值做title,一般可以根据键值自定义
                column["width"] = 25;
                column["field"] = "" + i;//数据的键值就是field
                column["align"] = "center";
                column["styler"] = function(value) {
                    var d = new Date(sdate+'-' + i);
                    if (d.getDay() == 6 || d.getDay() == 0) {
                        return "background:#DDD";
                    }

                    if (value == 1) {
                        return "background:#CCFF33";
                    }

                };
                column["formatter"] = function(value) {
                    return " ";
                };
                columns.push(column);//放入定义数组
            }
        });

        //实例化一个datagrid
        $('#statistics').datagrid({
            toolbar : "#searchBar",
            rownumbers : true,
            singleSelect : true,
            fit : true,
            striped: true,
            onSelect : function(rowIndex) {
                $(this).datagrid("unselectRow", rowIndex);
            },
            frozenColumns : [ [ {
                title : '姓名',
                field : 'username',
                width : 60,
                align : "center"
            } ] ],
            columns : [ [ {
                colspan : columns.length,
                title : "<b>"+sdate+"月  部门人员任务分配情况</b>"
            } ], columns ]
        }).datagrid("loadData", resp.rows);//实例化之后立刻载入数据源
    });
}

 

分享到:
评论

相关推荐

    使用easyui表格数据动态生成饼图

    "使用easyui表格数据动态生成饼图"的主题涉及到前端开发中的几个关键点:EasyUI框架、数据处理以及JavaScript图表库ECharts。下面我们将深入探讨这些知识点。 首先,EasyUI是一个基于jQuery的UI库,它提供了一系列...

    struts2+ajax+easyui+json+datagrid增删改查

    分页和排序功能同样通过Ajax实现,DataGrid会发送包含当前页码和排序信息的请求给服务器,服务器根据这些信息查询数据库并返回对应页的数据,DataGrid则据此更新显示。 总的来说,"struts2+ajax+easyui+json+...

    李炎恢jQuery EasyUI讲义代码

    同时,jQuery EasyUI支持数据网格(DataGrid),它能够展示大量数据,并提供排序、过滤、分页等功能,这对于数据展示和管理至关重要。 在代码部分,李炎恢老师提供的示例代码将帮助你更直观地理解讲义中的理论知识...

    easyui的datagrid生成合并行,合计计算价格

    在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释: 1. EasyUI DataGrid组件: EasyUI的...

    《jQuery EasyUI开发指南》书籍源码

    2. **数据绑定**:jQuery EasyUI支持通过JSON数据动态填充表格和其他组件,这在权限系统中非常重要,因为通常需要根据用户角色和权限动态显示或隐藏某些功能和数据。 3. **事件处理**:通过监听用户操作,如点击...

    easyui datagrid 表格 打印

    在IT领域,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时,可能会遇到一些挑战,因为通常默认的浏览器打印功能...

    Jquery-easyUI动态菜单

    动态数据加载** 为了实现动态加载,你需要在服务器端(可能是Spring MVC或Servlet)设置一个返回JSON数据的接口,这些数据描述了菜单的层级关系。例如,每个菜单项可能包含ID、文本、URL和子菜单数组。 **4. 分页...

    jquery EasyUI 1.4.3奇葩案例代码

    在某些项目中,需要根据用户权限动态生成菜单结构。利用EasyUI的`menu`组件和Ajax请求,可以实现菜单的动态加载和更新。 #### 案例二:自定义验证的表单 EasyUI的`form`组件支持内置验证规则,但也可以自定义验证...

    jQueryEasyUI 1.1完整源代码

    **jQueryEasyUI 1.1 完整源代码详解** jQueryEasyUI 是一款基于 jQuery 的前端框架,它为开发者提供了一系列轻量级、易于使用的组件,用于快速构建用户界面。这个1.1版本包含了完整的源代码,允许开发者深入理解其...

    datagrid 多表头及动态生成的实现

    本文的目标是通过一个具体的案例来展示如何使用JQuery EasyUI的datagrid组件来实现多表头和根据数据库动态生成列的需求。 #### 解决方案 ##### 1. 后端逻辑准备 为了实现前端表格能够根据数据库内容动态变化,...

    jquery easyui 模板

    - **Ajax 数据绑定**:结合 jQuery 的 Ajax 功能,可以实现数据的动态加载和异步更新。 在 `jquery-easyui-1.2.2` 压缩包中,包含了 jQuery EasyUI 的完整资源文件,包括 CSS 样式、JavaScript 文件、示例代码等,...

    jquery easyui 通讯录Demo

    在jQuery EasyUI的datagrid中,通过`data`属性指定JSON数据的URL,或者直接赋值为JSON对象,即可实现数据的加载和展示。 此外,jQuery EasyUI还提供了丰富的API和事件处理机制,使得开发者可以对datagrid进行更细致...

    jQuery EasyUI 1.3.6 离线简体中文API文档CHM

    jQuery EasyUI的核心特性包括数据网格(datagrid)、下拉树(combobox)、对话框(dialog)、表单组件(form)、菜单(menu)、滑块(slider)等。这些组件极大地简化了网页的布局和功能实现,让开发者可以专注于...

    dms.rar_easyui java_easyui-datagrid_jeasyui ibatis_jquery-easyui

    标签中的"easyui-java"表示项目使用了EasyUI与Java的结合,"easyui-datagrid"是EasyUI中的一个关键组件,用于展示表格数据。"jeasyui"可能指的是jQuery-EasyUI,它是EasyUI的一个扩展,提供了更多的jQuery插件和组件...

    jquery-easyui-datagridview datagrid-detailview.js升级自定义展开按钮功能

    easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom操作将...

    jQuery EasyUI 1.25静态后台 页面示例

    在深入学习这个示例时,你需要了解如何配置jQuery和jQuery EasyUI的依赖,熟悉各个组件的API,如`datagrid`(数据网格)和`menu`(菜单),以及如何使用CSS来调整样式。此外,了解基本的JavaScript和jQuery语法也是...

    最新jQuery easyUI 1.12 demo

    3. **数据绑定**:jQuery EasyUI 支持AJAX数据绑定,使得数据的动态加载和刷新变得简单。`datagrid`组件就是一个很好的例子,它可以与后端服务进行交互,实现分页、排序和过滤等功能。 4. **主题系统**:jQuery ...

    jQuery EasyUI中DataGird动态生成列的方法

    总结来说,jQuery EasyUI中的DataGrid动态生成列是通过动态构建`columns`数组并将其设置到DataGrid的配置对象中实现的。这个过程通常涉及与服务器的交互,获取列的定义,然后根据返回的数据动态构建列配置,最后初始...

    easyui的datagrid数据excel导出

    ### easyui的datagrid数据excel导出 #### 一、知识点概览 1. **EasyUI框架简介** 2. **DataGrid组件概述** 3. **DataGrid的列配置** 4. **将DataGrid转换为表格(Table)结构** 5. **导出至Excel的具体实现** 6. *...

    jquery easyui的使用说明手册

    2. **数据绑定**:EasyUI 将数据与DOM元素紧密结合,通过JSON或Ajax方式获取数据,实现了数据的动态加载和更新。 3. **组件化**:EasyUI 提供了诸如面板(Panel)、表单(Form)、表格(Grid)、下拉框(ComboBox)...

Global site tag (gtag.js) - Google Analytics