代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DataGrid</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../jquery.easyui.min.js" type="text/javascript"></script>

<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../themes/icon.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
$(function() {
$('#test').datagrid({
title: 'jQuery EasyUI---DataGrid',
iconCls: 'icon-save',
width: 500,
height: 350,
nowrap: false,
striped: true,
url: '../Data/datagrid_data.json',
sortName: 'ID',
sortOrder: 'desc',
idField: 'ID',
frozenColumns: [[
{ field: 'ck', checkbox: true },
{ title: 'ID', field: 'ID', width: 80, sortable: true }
]],
columns: [[
{ title: '基本信息', colspan: 2 },
{ field: 'opt', title: '操作', width: 100, align: 'center', rowspan: 2,
formatter: function(value, rec) {
return '<span style="color:red">编辑 删除</span>';
}
}
], [
{ field: 'name', title: 'Name', width: 120 },
{ field: 'addr', title: 'Address', width: 120, rowspan: 2, sortable: true }
]],
pagination: true,
rownumbers: true,
singleSelect: false,
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
alert('添加数据')
}
}, '-', {
text: '保存',
iconCls: 'icon-save',
handler: function() {
alert('保存数据')
}
}]
});
});

</script>
</head>
<body>
<table id="test"></table>
</body>
</html>

效果

DataGrid表格控件的更多相关文章

  1. SNF快速开发平台MVC-EasyUI3.9之-DataGrid表格控件如何增加右键菜单

    如题,我们在项目开发当中会遇到需要,表格控件增加右键菜单的使用. 下面我们就以SNF框架增加右键菜单步骤如下: 1.在加载页面当中增加如下菜单定义 <div id="mm" ...

  2. SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)

    做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...

  3. SNF开发平台WinForm-Grid表格控件大全

    我们在开发系统时,会有很多种控件进行展示,甚至有一些为了方便的一些特殊需求. 那么下面就介绍一些我们在表格控件里常用的方便的控件:   1.Grid表格查询条 Grid表格下拉 3.Grid表格弹框选 ...

  4. 分享12款 JavaScript 表格控件(DataGrid)

    JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...

  5. 12款 JavaScript 表格控件(DataGrid)

    JavaScript 表格控件可以操作大数据集的 HTML表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以很 ...

  6. 数据表格控件 DataGridControl

    数据表格控件 书154页 <?xml version="1.0" encoding="utf-8"?> <s:Application xmln ...

  7. 如何在web中实现类似excel的表格控件

    Execl功能非常强大,内置的很多函数或公式可以大大提高对数据的加工处理能力.那么在web中有没有类似的控件呢?经过一番搜寻,发现handsontable具备了基本的excel功能支持公式,同时能对数 ...

  8. 最好的Angular2表格控件

    现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求 ...

  9. C# DatrgridView表格控件的一些用法

    public class useDatrgrivView { string conn = null; string sqlComm = null; DataSet das = null; DataGr ...

随机推荐

  1. Intent的属性介绍

    在Android系统的设计中有四大组件:Activity,Service,BroadcastReceiver,ContentProvider.Intent可以被应用于ContentProvider之外 ...

  2. 如何将 select top 4 id from table1 赋值 给 declare @id1 int,@id2 int,@id3 int,@id4 int

    declare @id1 int,@id2 int,@id3 int,@id4 int ),) select @sickcode = sickcode,@sfrq =sfrq from tablena ...

  3. 32位和64位Ghost版Win8.1系统大全下载最新版

    Ghost版Win8.1系统企业版,下载完成后一定要使用校验工具验证GHO文件MD5值,如果不符请不要安装,不然安装失败后果自负.GHO文件路径一定不要带中文,否则无法安装.安装完成第一次进入桌面会黑 ...

  4. IOS TextField设置大全

    //初始化textfield并设置位置及大小  //设置边框样式,只有设置了才会显示边框样式     text.borderStyle = UITextBorderStyleRoundedRect; ...

  5. (转)使用 Advanced Installer 打包 一键安装Web应用程序

      使用 Advanced Installer 打包 一键安装Web应用程序         安装预览: 资源下载: 示例安装包 操作流程: 1.新建Asp.net Application. 2.设置 ...

  6. Windows7下安装搭建redis教程和配置详解

    作者:Sungeek 出处:http://www.cnblogs.com/Sungeek/ 欢迎转载,也请保留这段声明.谢谢! 简介: Redis是一个开源的使用ANSI C语言编写.支持网络.可基于 ...

  7. Alluxio1.0.1最新版(Tachyon为其前身)介绍,+HDFS分布式环境搭建

    Alluxio(之前名为Tachyon)是世界上第一个以内存为中心的虚拟的分布式存储系统.它统一了数据访问的方式,为上层计算框架和底层存储系统构建了桥梁. 应用只需要连接Alluxio即可访问存储在底 ...

  8. c/c++读取文件

    #include <iostream> #include <string> #include <fstream> int main() { std::ifstrea ...

  9. MDM基于IOS设备管控功能的所有命令介绍

    前面我们介绍了IOS上MDM几个简单的控制命令的发送和返回数据的解析处理,下面我们介绍一下MDM涉及到的命令的操作介绍: 一.Control Commands(控制类命令) 1.Device Lock ...

  10. jquery 点击查看,收起特效

    <div class="all"> <p><a href="javascript:;" id="onvk"&g ...