`
fordream
  • 浏览: 62804 次
  • 性别: 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);//实例化之后立刻载入数据源
    });
}

 

分享到:
评论

相关推荐

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

    前台使用Jquery EasyUI 插件datagrid实现多表头动态生成的功能

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

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

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

    EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的...

    Jquery根据鼠标点击的位置生成数字键盘

    内置示例,包括如何在input和select中使用。网上提供的数字键盘弹出的位置总是固定的,而且用着不灵活,我做的这个会在你鼠标单击的位置靠右侧弹出,并且允许你改变键盘里的值,我准备的例子有小时的(24以内)和...

    轻松学习jQuery插件EasyUI EasyUI创建CRUD应用

    本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid。 我们将使用下面的插件: datagrid:向用户展示列表数据。 dialog:创建或编辑一条单一的用户信息。 form:用于提交表单数据。 messager:显示...

    jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果

    1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view。比如每一行tr都有id和datagrid-row-index属性等。 1.2 在上移和下移以后,我们将移动以后的两行的id和datagrid-row-index属性也...

    easyui 和 pdo 增删改查示例

    本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid。 我们将使用下面的插件: datagrid:向用户展示列表数据。 dialog:创建或编辑一条单一的用户信息。 form:用于提交表单数据。 messager:...

    开发源程序框架(Html+JQuery+EasyUI +Ajax+ashx+ado.net) .

    采用了Html+JQuery+EasyUI +Ajax+ashx+ado.net的技术。 四、注意事项 1、开发环境为Visual Studio 2010,数据库为SQL Server 2008R2,数据库文件在DB_51aspx文件夹中, 使用.net 4.0开发。 2、默认数据库连接...

    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统

    4. 一个样例程序,他实现了利用easyui datagrid的列表显示,用了jquery ajax的增删改。 5. 数据验证注解 6. 权限管理系统,他将精确到每个按钮,我们将在过滤器判断权限,你的代码非常简洁,只需要一个数据注解就...

    GoodProject Maven Webapp.zip

    jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件,也可以单独使用其中一个。 ...

    JEECG快速开发平台 v4.0

    技术点六:代码生成器,支持多种数据模型,根据表生成对应的Entity,Service,Dao,Action,JSP等,增删改查功能生成直接使用 技术点七:UI快速开发库,针对WEBUI进行标准封装,页面统一采用UI标签实现功能:数据...

    JEECG快速开发平台-其他

    1、采用SpringMVC+Hibernate+Minidao(类Mybatis)+Easyui(UI库)+Jquery+Boostrap+Ehcache+Redis+Ztree+Vue+Boostrap-table+ElementUI等基础架构2、采用面向声明的开发模式,基于泛型编写极少代码即可实现复杂的数据...

Global site tag (gtag.js) - Google Analytics