首先去Easy UI官网下载离线包

导入要用的js模块

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <!--Easy UI主题css文件-->

    <link rel="stylesheet" href="easyuiq.css"/>

    <!--Easy UI的图标Css文件-->

    <link rel="stylesheet" href="icon.css"/>

    <!--jquery压缩包-->

    <script src="jquery-1.11.3.min.js"></script>

    <!--Easy UI压缩包-->

    <script src="jquery.easyui.min.js"></script>

    <!--Easy UI的国际化文件,以下为让它显示中文-->

    <script src="easyui-lang-zh_CN.js"></script>

    <!--自己定义的js包-->

    <script src="easyUi.js"></script>

</head>

<body onload="te()">

<table id="test"></table>

</body>

</html>

自己定义的js

$(function(){

    $("#test").datagrid({

            nowrap: true,// 如果为true，则在同一行中显示数据。设置为true可以提高加载性能。

            striped: true,// 斑马线效果

//      后台传过来的json路径

        url:'datagrid_data.json',

        columns:[

//          第一列

            [{field:'',title:'',width: '30',rowspan:6},

                {field:'立案',title:'立案',width: '30',colspan:4},

                {field:'撤案',title:'撤<br/>案',width: '30',colspan:1},

                {field:'scdp',title:'审查逮捕',width: '30',colspan:26},

                {field:'scdp',title:'侦结',width: '30',colspan:5},

                {field:'scdp',title:'审查起诉',width: '30',colspan:10},

                {field:'scdp',title:'判决',width: '30',colspan:14},

                {field:'scdp',title:'判决裁定审查情况',width: '30',colspan:10}

            ],

//          第二列

            [{field:'件数',title:'件数',width: '30',rowspan:5},

                {field:'人数',title:'人数',width: '30',rowspan:5},

                {field:'大案数',title:'大案数',width: '30',rowspan:5},

                {field:'要案数',title:'要案数',width: '30',rowspan:5},

            //撤案

                {field:'人数',title:'人数',width: '30',rowspan:5},

                {field:'dp',title:'逮捕',width: '30',colspan:21},

                {field:'bdp',title:'不逮捕',width: '30',rowspan:4,colspan:4},

                {field:'pjbazq',title:'平均办案周期',width: '30',rowspan:5}

            ],

            [{field:'dpzrs',title:'逮捕总人数',width: '30',rowspan:4},

            {field:'yzpj',title:'有罪判决',width: '330',colspan:11,rowspan:3},

            {field:'bqs',title:'捕后撤案',width: '90',rowspan:3,colspan:3},

            {field:'bqs',title:'不起诉',width: '90',rowspan:3,colspan:3},

            {field:'wzpj',title:'无罪判决',width: '90',rowspan:3,colspan:3}]

        ]

    })

});

function te(){

    $('#test').datagrid('resize', {

        width:2000,

        height:1400

    });

}
<!--Easy UI主题css文件-->
<link rel="stylesheet" href="easyuiq.css"/>

<!--Easy UI的图标Css文件-->
<link rel="stylesheet" href="icon.css"/>

<!--jquery压缩包-->
<script src="jquery-1.11.3.min.js"></script>

<!--Easy UI压缩包-->
<script src="jquery.easyui.min.js"></script>

<!--Easy UI的国际化文件,以下为让它显示中文-->
<script src="easyui-lang-zh_CN.js"></script>

<!--自己定义的js包-->
<script src="easyUi.js"></script>

Easy UI的更多相关文章

  1. Struts2 easy UI插件

    一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...

  2. Easy UI常用插件使用

    一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...

  3. easy ui插件

    简介: easy UI是类似于jQuery UI的插件库 注意:多脚本同时使用时,注意脚本冲突问题. 常用插件: 1.tree插件(tree插件实现动态树形菜单) 2.datagrid插件(datag ...

  4. easy ui 框架

    Easy UI 准备工作(搭建) 1.在WebRoot 的目录下创建js 文件夹,在文件夹中倒入一下两个包 Jquery.easyui.min.js jquery.min.js 2.在WebRoot ...

  5. 解决easy ui 1.4datebox控件不能清空的问题

    用easy ui遇到这个问题,在网上找到了解决方案,不过是1.3.6版本的.现提供1.4版本的修改的具体位置和代码. 我们用的是这个 修改位置:12739行,添加代码: , { text: funct ...

  6. easy ui 1.4的NumberBox，失去焦点后不能再次输入小数点

    这也是1.4版本的bug,现在1.4.1也发布了,经验证,该问题在新版本中已经解决了 在网上找到的解决办法,地址:http://www.jeasyui.com/forum/index.php?topi ...

  7. ASP.MVC EASY UI 入门之 —— Tree & ComboTree

    1.常规的EASY UI的tree和comboTree代码基本是官方的DEMO都有的,虽然很简单,但是还是要实践的做一次,才能更清晰的了解和使用它!先上效果图 因为用的是code first,所以数据 ...

  8. 关于ExtJS、JQuery UI和easy UI的选择问题

    转自百度知道. 问:做企业级应用,比如***管理系统,不需要华丽的特效,只希望简单,风格统一.能用到的只有messagebox.tree.grid大概这几个,其他特效不要,忘大神根据自己的见解以及我这 ...

  9. Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

  1. CSS3动画产生圆圈由小变大向外扩散的效果

    涉及到 CSS3 的动画(animation).2D 转换(transform: scale),具体如代码所示. github: https://github.com/wind-stone/CSS3- ...

  2. 调用java rest ful 接口实例

    HttpWebRequest request = WebRequest.Create("http://192.168.0.99:8080/wzh-webservice/rest/login? ...

  3. AjaxFileUpload 方法与原理分析

    AjaxFileUpload需求 传统的form表单方式上传文件,  必然会刷新整个页面. 那么在不刷新界面的情况下实现文件的上传呢? 在 HTML4下, 聪明的程序员们发明了 ajax file u ...

  4. Spring单实例、多线程安全、事务解析

    原文:http://blog.csdn.net/c289054531/article/details/9196053 引言:     在使用Spring时,很多人可能对Spring中为什么DAO和Se ...

  5. nginx限制访问速度

    转自:http://siwei.me/blog/posts/nginx-ip 参考:http://tengine.taobao.org/document_cn/http_limit_req_cn.ht ...

  6. 时光煮雨 Unity3D实现2D人物动画② Unity2D 动画系统&资源效率

    系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...

  7. C# 实现 微软WebRequestMethods.Ftp类中的FTP操作功能

    先奉献一个测试地址,ftp内的文件请勿删除,谢谢 FtpEntity fe = "); 由于代码量较多,只抽出一部分,详细代码请移步  ftp://wjshan0808.3vhost.net ...

  8. zjuoj 3605 Find the Marble

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3605 Find the Marble Time Limit: 2 Seco ...

  9. Datatable的查找和排序（Datatable.Select）

    Datatable  是一种常用的数据结构.数据类型有点类似于数据库中的表结构.在没有使用优秀的orm框架前,大部分的数据库的数据都是先变为Datatable 然后再通过代码转换变成 object. ...

  10. 优化Myeclipse10 Building Workspace速度慢等问题

    今天把ext3.0部署到web project很慢很慢,查了一下,这个当笔记.转自http://blog.163.com/jong_cai/blog/static/870280452013111781 ...