一、加载的css文件

  1. easyui 基本样式: <link href="../easyui/easyui1.5.css" rel="stylesheet" type="text/css" />
  2. easyui 按钮样式:<link href="../easyui/icon.css" rel="stylesheet" type="text/css" />  表单需要进行编辑时按钮所需样式

二、加载的js文件

  1. JQuery基本脚本:<script type="text/javascript" src="../JQ/jquery.min.js"></script>
  2. EasyUI基本脚本:<script type="text/javascript" src="../JQ/jquery.easyui.min.js"></script>
  3. DataGrid脚本:<script src="../JQ/datagrid-detailview.js" type="text/javascript"></script>

三、Html - body部分: <table id="dg" class="easyui-datagrid"></table>

若一个页面具有多个表格,即id值不同即可,如

<div class="dataContent" style="margin-top: 10px">
                    状态统计
                </div>
                <table id="dg" class="easyui-datagrid">
                </table>
                <div class="dataContent" style="margin-top: 10px">
                    状态明细
                </div>
                <table id="dgdetail" class="easyui-datagrid">
                </table>

四、Javascript脚本

对于动态加载表格数据,一般需要两个步骤:

(1) 页面加载时初始化表格样式

 <script type="text/javascript">
$(function () {
initTable();
});
// 初始化表格
function initTable() {
$('#dg').datagrid({
width: 1000, //宽度
height: 210, //高度
url: 'StateQuery.aspx', //请求数据URL
singleSelect: true, //true表示只允许选择一行
onLoadSuccess: function (data) {//当数据加载成功时触发,data为加载数据
loadNoRecord(data);
},
onClickRow: function (rowIndex, rowData) {//当用户点击一行时触发,参数包括:rowIndex:被点击行的索引,从0开始;rowData:被点击行对应的记录
loadDetail(rowIndex, rowData)
},
columns: [[ //表格对应列的匹配对象
{ field: 'ID', width: 40, halign: 'center', title: 'MinRID', hidden: true },
{ field: 'CenterName', width: 140, align: 'center', title: '名称' },
{ field: 'ClassName', width: 80, align: 'center', title: '班次' },
{ field: 'Duration', width: 100, align: 'center', title: '持续时间(分)', formatter: formateFloat },
{ field: 'CreateTime', width: 140, align: 'center', title: '日期', formatter: formateDate },
{
field: 'Search', title: '详细信息', width: 100, align: 'center',
formatter: function (value, row, index) {
return '<a href="#" onclick="loadDetail(' + index + ',' + row + ')">查看</a> '
}
}
]]
});
}
// 数据格式化
function formateFloat(data) {
if (data == undefined && data == "") return "";
return fn.format(data, 2);
}
// 日期格式化
function formateDate(data) {
if (data == undefined && data == "") return ""; var n = data.indexOf(" ");
if (n > 0) return data.substring(0, n);
else return data;
}
</script>

初始化表格

(2) 通过ajax动态加载表格数据

<input type="button" class="btn_tab" value="查询" onclick="loadTable()" />

<script type="text/javascript">
//加载数据
function loadTable() {
var centerid = $("#hdcenterid").val(); ajax("ajax=getDataQuery&cid=" + centerid, function (q) {
if (!q) { //无数据
$("#dg").datagrid("loadData", []);
}
else { //有数据
q = json(q);
$("#dg").datagrid("loadData", q);
}
});
}
</script>

动态加载数据

以上即为实现基本表格所需脚本,如要实现其他功能只需根据EasyUI提供的样例,在初始化表格样式增加相关方法或属性(部分功能见下文)

五、C#后台数据,通过ajax异步回调得到DataTable,其中Column列名需要与初始化表格样式中columns的field完全一致(区分大小写),将其数据转换为json字符返回即可。

using System;
using System.Data;
using iPlant.Component.ProfitCenter; public partial class Component_ProfitCenter_StateAnalysis_StateQuery : PageBase
{
protected void Page_Load(object sender, EventArgs e)
{
#region 异步回调
if (Request["ajax"] != null)
{
string ajax = "";
if (Request.Form["ajax"] != null || Request.QueryString["ajax"] != null)
{
ajax = Request.Form["ajax"] != null ? Request.Form["ajax"] : Request.QueryString["ajax"];
switch (ajax)
{
case "getDataQuery": ajax = GetDataQuery(); break;//返回状态记录
default: break;
}
Response.Write(ajax);
Response.End();
return;
}
}
#endregion
} private string GetDataQuery()
{
int cid = ;
if (Request.Form["cid"] != null || Request.QueryString["cid"] != null)
{
cid = Request.Form["cid"] != null ? Request.Form["cid"] : Request.QueryString["cid"];
} StateRecordCnfg cnfg = new StateRecordCnfg();
DataTable dt = cnfg.GetStateRecordQuery(cid);
return fn.Json(dt);
}
}

后台数据

六、实现效果

七、表格其他功能

1. 多行表头 : 使用列(Column)属性,Column是一个数组对象,它的每个元素也是一个数组。元素数组的元素是一个配置对象,它定义了每个列的字段。(详见 http://www.jeasyui.net/plugins/183.html

根据所需表头,使用rowspan(number  指示一个单元格占据多少行)和colspan(number 指示一个单元格占据多少列)进行标记。

 function initDetailTable() {
$('#dg').datagrid({
singleSelect: true,
width: "96%",
height: 220,
columns: [[
{ field: 'Name', width: 120, align: 'center', title: '状态名称', rowspan: 2 },
{ field: 'StateTime', width: 105, align: 'center', title: '开始时间', rowspan: 2 },
{ field: 'EndTime', width: 105, align: 'center', title: '结束时间', rowspan: 2 },
{ field: 'Duration', width: 75, align: 'center', title: '持续时间(分)', formatter: formateFloat, rowspan: 2 },
{ title: '成本项', align: 'center', colspan: 5 },
{ field: 'CreateTime', width: 105, align: 'center', title: '生成时间', rowspan: 2 }
], [
{ field: 'ItemName', width: 80, align: 'center', title: '名称' },
{ field: 'UseAmount', width: 60, align: 'center', title: '用量值', formatter: formateFloat },
{ field: 'Unit', width: 60, align: 'center', title: '单位' },
{ field: 'UnitPrice', width: 60, align: 'center', title: '单价' },
{ field: 'UseCost', width: 60, align: 'center', title: '成本', formatter: formateFloat }
]],
onLoadSuccess: function (data) {
loadCellStyle(data);
}
});
}

多行表头

效果图

2. 合并单元格:将信息相同的数据只显示一次,进行同类合并

 function loadCellStyle(data) {
if (data.rows != undefined) {
if (data.rows.length > 0) {
var mark = 1;//这里涉及到简单的运算,mark是计算每次需要合并的格子
for (var i = 1; i < data.rows.length; i++) { //这里循环表格当前的数据
if (data.rows[i]['StateRecordID'] == data.rows[i - 1]['StateRecordID']) { //后一行的值与前一行的值做比较,相同就需要合并
mark += 1;
$('#dg').datagrid('mergeCells', {
index: i + 1 - mark, //datagrid的index,表示从第几行开始合并,就是记住最开始需要合并的位置
field: 'StateName', //合并单元格的区域,就是clomun中的filed对应的列,StateName为状态名称
rowspan: mark //纵向合并的格数,如果想要横向合并,就使用colspan:mark
}); //合并其他列,只需要修改其field值
$('#dg').datagrid('mergeCells', {
index: i + 1 - mark,
field: 'CreateTime', //CreateTime为持续时间(分)
rowspan: mark
});
} else {
mark = 1; //一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
}
}
}
else {
$('#dg .datagrid-view2 .datagrid-body').html('<div style="margin:10px 0; text-align:center;">没有记录.</div>'); //没有记录.
}
}
}

效果图:

3. 行内编辑及按钮关键点:

  • 待编辑列需要添加editor属性,并且指定编辑时为何控件(type:'combotree'/'combobox'/'text')并指定相关属性(options)
  • 增加方法onBeginEdit和onEndEdit,可用于初始化编辑控件以及赋值
  • 增加toolbar属性,添加编辑按钮
         //初始化模版表格
function initdgstate() {//[StateID],[CenterID],[StateCode],[StateName],[SNLength],[SNType]
$('#dg').datagrid({
width: $(window).width() - 20,
height: $(window).height() - 100,
url: 'State.aspx',
singleSelect: true,
rownumbers: true,
onClickRow: function (rowIndex, row) {
selectRow(rowIndex, row, $("#dg"));
},
onDblClickRow: function () {
//双击选中
fchangeRow();
},
onBeginEdit: function (rowIndex, row) {
var ed = $(this).datagrid('getEditor', { index: rowIndex, field: 'CenterName' });
var st = $(this).datagrid('getEditor', { index: rowIndex, field: 'STStateName' });
var ft = $(this).datagrid('getEditor', { index: rowIndex, field: 'FTStateName' });
var pstate = $(this).datagrid('getEditor', { index: rowIndex, field: 'PStateName' }); //-----------------初始化获得combotree值------------------
$(pstate.target).combotree({
url: 'State.aspx?ajax=getState&cid=' + G("selcenterid").value,
methord: 'get',
onBeforeExpand: function (record) {
$(pstate.target).combotree("tree").tree("options").url = "State.aspx?ajax=getState&cid=" + G("selcenterid").value + "&pid=" + record.id;
},
onSelect: function (record) {
row.PID = record.id;
},
onShowPanel: function () {
if (($(pstate.target).combotree('tree').tree('getRoots').length) == 0) {
$(pstate.target).combotree('setValue', "");
row.PID = 0;
}
}
});
if ($(pstate.target).combotree('getValue').length == 0) {
$(pstate.target).combotree('setValue', row.PStateName);
}
},
onEndEdit: function (rowIndex, row) {
//--------------选择combotree结果--------------
var pid = $(this).datagrid('getEditor', { index: rowIndex, field: 'PStateName' });
row.PStateName = $(pid.target).combotree('getText');
},
columns: [[
{ field: 'StateID', width: 60, align: 'center', title: '状态编号' },
{ field: 'CenterID', width: 100, halign: 'center', title: 'ID', hidden: true },
{ field: 'CenterName', width: 120, align: 'center', title: '利润中心 *', editor: 'text' },
{ field: 'StateName', width: 120, align: 'center', title: '状态名称 *', editor: 'text' },
{ field: 'StateCode', width: 100, align: 'center', title: '代码 *', editor: 'text' },
{ field: 'SNLength', width: 90, align: 'center', title: '流水号长度 *', formatter: formateNum, editor: { type: 'numberbox', options: { precision: 0 } } },
{
field: 'SNType', width: 90, align: 'center', title: '流水号类型 *',
formatter: formateType,
editor: {
type: 'combobox',
options: {
valueField: 'id',
textField: 'text',
data: [{ id: "1", text: "天" }, { id: "2", text: "月" }],
panelHeight: 'auto',
editable: false
}
}
},
{ field: 'PID', width: 100, halign: 'center', title: 'PID', hidden: true },
{
field: 'PStateName', width: 120, align: 'center', title: '上级状态',
editor: {
type: 'combotree',
options: {
valueField: 'id',
textField: 'text',
panelHeight: 'auto',
editable: false
}
}
}
]],
toolbar: [
{ id: 'addBtn', text: '添加', iconCls: 'icon-add', handler: faddRow }, '-',
{ id: 'editBtn', text: '修改', iconCls: 'icon-edit', handler: feditRow }, '-',
{ id: 'delBtn', text: '删除', iconCls: 'icon-remove', handler: fdelRow }, '-',
{ id: 'saveBtn', text: '保存', iconCls: 'icon-save', handler: fsaveRow }, '-',
{ id: 'cancelBtn', text: '取消', iconCls: 'icon-cancel', handler: fcancelRow }, '-',
{ id: 'changeBtn', text: '选择', iconCls: 'icon-ok', handler: fchangeRow }]
});
}
//格式化
function formateNum(val, row) {
if (val != undefined) {
return formatNumber(val, "#.##");
}
}

效果图:

datagrid数据表格使用总结的更多相关文章

  1. EasyUI datagrid数据表格的函数getData返回来的是什么

    EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...

  2. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  3. DataGrid( 数据表格) 组件[9]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  4. DataGrid( 数据表格) 组件[8]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  5. DataGrid( 数据表格) 组件[7]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  6. DataGrid( 数据表格) 组件[6]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  7. DataGrid( 数据表格) 组件[5]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  8. DataGrid( 数据表格) 组件[4]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  9. DataGrid( 数据表格) 组件[3]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  10. DataGrid( 数据表格) 组件[2]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

随机推荐

  1. jquery提供的数据提交方式1

    1,ajax提交,部分代码为easyui function editNode(id){ $.ajax({ dataType:'json', async:true, //默认的就是异步提交 type:' ...

  2. webconfig配置详解--转

    花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点.所以这里只介绍一些比较常用的节点. <? ...

  3. 在Android中使用Protocol Buffers(下篇)

    本文来自网易云社区. FlatBuffers编码数组 编码数组的过程如下: 先执行 startVector(),这个方法会记录数组的长度,处理元素的对齐,准备足够的空间,并设置nested,用于指示记 ...

  4. ASP.NET对象

    ASP.NET有五个基本的常用对象 一张图胜过前言万语 ASP.NET对象重头戏 对象名    解释 属性 方法 例子 Request 获取客户端数据信息 1.UserAgent:用来获取客户端浏览器 ...

  5. 洛谷P2580(trie)

    第一行一个整数 n,表示班上人数.接下来 n 行,每行一个字符串表示其名字(互不相同,且只含小写字母,长度不超过 50).第 n+2 行一个整数 m,表示教练报的名字.接下来 m 行,每行一个字符串表 ...

  6. 2017-10-3 清北刷题冲刺班p.m

    a [问题描述]你是能看到第一题的 friends 呢.——hja给你一个只有小括号和中括号和大括号的括号序列,问该序列是否合法.[输入格式]一行一个括号序列.[输出格式]如果合法,输出 OK,否则输 ...

  7. 唯快不破:Web 应用的 13 个优化步骤

    时过境迁,Web 应用比以往任何时候都更具交互性.搞定性能可以帮助你极大地改善终端用户的体验.阅读以下的技巧并学以致用,看看哪些可以用来改善延迟,渲染时间以及整体性能吧! 更快的 Web 应用 优化 ...

  8. ffmpeg转码多路输出(二)

    ffmpeg转码多路输出(二)本程序支持一路输入多路输出,可根据map配置自行添加,第1路为纯拷贝,其他2路经过编解码,格式转换缩放和重采样,纯拷贝方面不同格式适应方面还没做全,以后补充.本程序适合多 ...

  9. springboot Consider defining a bean of type 'xxx' in your configuration

    这个错误是service的bean注入失败,主要是Application位置不对,要保证项目中的类在Application启动服务器类的下一级目录,如图:

  10. TFS如何强制撤销别人的机器签出的文件

    原文:http://blog.csdn.net/jxian2009/article/details/50331955 用过TFS的都知道,没有比同事离职了,剩下一堆签出的文件更蛋疼的. 试过各种方法, ...