首先去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. VMware安装Linux第一天

    今天上午下载了VMware-workstation_full_12.1.1.6932,它的Key是5A02H-AU243-TZJ49-GTC7K-3C61N,这些都是网络上搜罗到的. VMWare安装 ...

  2. Servlet 生命周期、工作原理

    按照单例的编码规则,Servlet本身只是一个Java,结构并不是单例结构. 只是Web容器在维护这些Servlet的时候只给创建一个实例存在JVM中,用户请求服务时,服务器只调用它已经实例化好的Se ...

  3. LeetCode Walls and Gates

    原题链接在这里:https://leetcode.com/problems/walls-and-gates/ 题目: You are given a m x n 2D grid initialized ...

  4. Mac系统上用Node做APNS

    1.安装Node,下载地址:http://nodejs.org 2.更新npm,终端命令:sudo npm update npm -g 3.安装apn,终端命令:npm install apn 4.导 ...

  5. The tag 'DataGridTextColumn' does not exist in XML namespace ....

    错误 10 The tag 'DataGridTextColumn' does not exist in XML namespace 'http://schemas.microsoft.com/win ...

  6. LuaXMLRPC笔记

    XMLRPC XMLRPC 为以http为传输协议,使用xml格式化数据来执行远程过程调用, 区别于本地过程调用, 即发生在不同主机之间. 属于分布式计算的一种简单实现,比web service简单易 ...

  7. 我的AngularJS 学习之旅(二)

    记得某位大神说过,"时间就像海绵里的水,挤挤总是有的.".大多时候,与其说我是很忙而没时间去做自己想做的事, 倒不如说是懒得去做罢了. 废话不多说,接前一篇继续吧 3.3 指令(D ...

  8. Latex 学习

    Latex 学习 @(05.2 Latex)[latex][基础教程] 这篇文章是关于latex基础教程.pdf的一个总结. 基本知识 基础 1. 空格 多个空格会被视为一个空格 单个回车会被视为一个 ...

  9. Oracle 正则表达式函数-REGEXP_LIKE 使用例子

    原文在这 戳 REGEXP_LIKE 3个参数 第一个是输入的字符串 第二个是正则表达式 第三个是取值范围: i:大小写不敏感: c:大小写敏感: n:点号 . 不匹配换行符号: m:多行模式: x: ...

  10. 14. 星际争霸之php设计模式--状态模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...