首先去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. Oracle中的rownum和rowid

    http://blog.csdn.net/mitedu/article/details/3584399  rownum http://blog.csdn.net/mitedu/article/deta ...

  2. 关于thenao.scan() fn函数参数的说明

    theano.scan()原型: theano.scan( fn, sequences=None, outputs_info=None, non_sequences=None, n_steps=Non ...

  3. Qt之qt4.7 和qt 4.8.4 交叉实践

    开发机环境搭建: 测试环境:CentOs7.1  Ubuntu 12.0.4 操作流程: 一.编译Qt4.7.0 1)CentOS上实践 1.tar xzvf qt-everywhere-openso ...

  4. visual studio code + Nodejs + Typescritpt + angularjs2 + bootstrap 环境搭建/Elementary os

    1.apt-get update 99% waiting for headers卡住了,fix如下 sudo apt-get clean cd /var/lib/apt sudo mv lists l ...

  5. mysql 乱码问题

    A.mysql设置 1.service mysql stop 2.sudo vim /etc/mysql/my.cnf 在[mysqld]中添加下面两行 character_set_server = ...

  6. IsBackground的理解

    1.当在主线程中创建了一个线程,那么该线程的IsBackground默认是设置为FALSE的. 2.当主线程退出的时候,IsBackground=FALSE的线程还会继续执行下去,直到线程执行结束. ...

  7. App.config应用的说明

    对访问数据库的链接字符串的封装(MS什么都在封装,弄的我们原来越方(弱)便(智)),好吧,你可以解释说可以方便的更改链接只更改配置,而不用动主程序------隔离(隔离--保护:搞过配电的应该不陌生吧 ...

  8. css3实现轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Android ListView实现不同item的方法和原理分析

    ListView实现不同item的方法和原理分析 一问题抛出Listview是android里面的重要组件,用来显示一个竖向列表,这个没有什么问题:但是有个时候列表里面的item不是一样的,如下图,列 ...

  10. easyui 获得父级tabs跳转

    /*                 * 跳转tabls                  */                function JumpPage(type,title,src){   ...