easylui 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);//实例化之后立刻载入数据源
});
}

时间: 2024-10-08 22:38:54

easylui datagrid 动态生成列的相关文章

WPF Datagrid 动态生成列 并绑定数据

原文:WPF Datagrid 动态生成列 并绑定数据 说的是这里 因为列头是动态加载的 (后台for循环 一会能看到代码) 数据来源于左侧列 左侧列数据源 当然num1 属于临时的dome使用  可以用ObservableCollection集合代表 动态创建属性 WPF 动态生成对象属性 (dynamic) ObservableCollection<NameList> listName = new ObservableCollection<NameList>(); privat

WPF DataGrid动态生成列的单元格背景色绑定

原文:WPF DataGrid动态生成列的单元格背景色绑定 <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Column.DisplayIndex}" Value="1"> <Setter Property="Background" Value="{Binding RelativeSource={RelativeSour

datagrid动态生成列并动态赋值

这周接到的任务是动态生成某datagrid的标题,并且要能够根据动态生成的标题来再去数据库中找到相应的值并拼接赋值上去. 项目经理给我的静态页面如下: 左边一列为车型,右边的上面是零件号,下面是固定的,直接循环生成就行,但是数量不一定,需要动态生成.里面的数据是自动加载的. 后台数据库中能够得到的数据大概是这个形式: 这个问题的难点如下: 1.动态生成datagrid的column. 2.将SQL拿出来的数据拼接成前台需要的横行形式,也就是列转行. 先说下解决的思路和方法. 首先是datagri

WPF datagrid 动态增加列

DataGrid动态增加列 <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="

EasyUI 动态生成列属性

需求:通过Model类属性动态生成DataGrid表格 1.定义ColumnTitle注解类 package com.mrchu.annotation; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target; /** * 列标题注解类 * * @author MrChu * @version 1.0 * @date

EasyUI datagrid动态添加列

任务描述:根据用户选择时间段,生成列数据,如图 一.先定义好datagrid固定的数据列 <script type="text/javascript"> $(document).ready(function () { $("#td_Radio").datagrid({ striped: true, border: true, iconCls: 'icon-edit', //图标 singleSelect: true, autoRowHeight: tru

wpf 通过为DataGrid所绑定的数据源类型的属性设置Attribute改变DataGrid自动生成列的顺序

环境Win10 VS2019 .Net Framework4.8 在wpf中,如果为一个DataGrid绑定到一个数据源,默认情况下DataGrid会为数据源类型的每个属性生成一个列(Column)对象.但并没有简单的方式用来控制列的生成顺序. DataGrid提供了两个与自动生成列有关的事件,分别是: AutoGeneratingColumn 会在为每个属性创建列时引发,引发时列已经创建完毕,在这个事件中可以: 通过e.Column获取已经创建的列对象,并对其进行修改. 通过将e.Cancel

easyui动态生成列

需求:一个id对应多个key value 将id作为标识列 key值作为表头 value作为值显示.数据表可分为两张表 param数据表: 下表一个id对应上表多个key及value 如下图 id_param数据表: 然后将这些对应关系在前端显示成这样(页数及总记录没有显示,但可实现分页功能) 方法思路: 1.获取param的key value 作为 columns当做表头信息 key作为表头的field,value作为表头的title: 2.获取id_param的所有id(不重复的),构成id

EasyUI 动态生成列加分页

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta htt