首先去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. vi全局替换

    http://blog.csdn.net/vindak/article/details/7830547 vi全局替换命令

  2. oracle often commands

    还是这个好用   Oracle mysql 对比版本 Personal Oracle7 Release 7.3.4.0.0 mysql 3.23.58-nt 启动画面(点击放大) 默认安装目录 C:O ...

  3. 使用JavaService.exe(amd64)发布java服务(jdk x64)

    最近项目中需要使用java服务,但是java服务已经写好了,就等待部署到windows服务中,遇到了种种困难------在x64服务器中部署jdk x64编译的jar时,遇到了各种纠结. 本文找到了一 ...

  4. svg学习（七）polygon

    <polygon> 标签用来创建含有不少于三个边的图形. <?xml version="1.0" standalone="no"?> & ...

  5. CSS 颜色代码大全//////////////////////z

      FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 # #FFB7DD #FF88C2 #FF44AA  #FF0088  #C10066  #A2005 ...

  6. 十三、Java基础---------多线程总结

    多线程概述 理解多线程首先应明确线程,要了解线程就必须了解什么是进程. 1.进程 是一个正在执行的程序. 每一个进程执行都有一个执行顺序.该顺序是一个执行路径,或者叫一个控制单元. 2.线程 就是进程 ...

  7. Visual Studio常用插件

    Visual Assist X 番茄不用说了,C# C++编码必备 Image Insertion 可以在代码编辑器中插入图片注释,让代码像Word文档一样图文并茂. 但注意必须是PNG格式的图片,直 ...

  8. Scala入门学习笔记三--数组使用

    前言 本篇主要讲Scala的Array.BufferArray.List,更多教程请参考:Scala教程 本篇知识点概括 若长度固定则使用Array,若长度可能有 变化则使用ArrayBuffer 提 ...

  9. phpcms V9 MVC模式 与 URL访问解析

    [1]URL访问解析 观察访问网页时的网址,可以得出模块访问方法,如下示例: http://www.abcd.com.cn/phpcms/index.php?m=content&c=index ...

  10. Mac下面的SecureCRT(附破解方案) 更新到最新的8.0.2

    继续更新到8.0.2的破解,整体的破解方案都发生了的变化首先还是去 http://macabc.com/detail.htm?app_id=24 下载最新的8.0.2介于很多小白说替换之后说文件损坏, ...