首先去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. ios - block数据的回调

    block在代理,kvo中传递数据效率最高 实现原理 控制器B想传递数据给控制器A.通过在B控制器中创建Block类型的类,创建方法,方法参数是刚才创建的block类型的变量.在方法实现的内部调用参数 ...

  2. delphi关闭程序Close,application.Terminate与halt区别

    当Close是一个主窗体时,程序会退出.Close会发生FormClose事件,FormCloseQuery事件Halt会发生FormDestory事件,Application.Terminate以上 ...

  3. 解决 No resource found that matches the given name (at 'icon' with value '@drawable/icon') 问题

    对新解决方案Xamarin的Android项目在项目属性 换图标后 会出现 No resource found that matches the given name (at 'icon' with ...

  4. JavaScript俄罗斯方块

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  5. socket.io稳定性及事件测试

    socket.io测试报告 1.socekt.io能坚持多久 将服务器上的socekt.io代码从早上9:30分开始运行到晚上18点,每100毫秒发送一条数据,数据大概15个字符,同时开启5个连接 结 ...

  6. Monkey之环境搭建完全版

    图文版将在后期补充. 如果想要搭建好Monkey的测试环境,首先几个必要的步骤和环境不能少,分别是java相关环境.Android SDK环境,启动android虚拟机或连接真机.执行monkey测试 ...

  7. 监控web服务方法

    本地监控:端口  netstat -anltup | grep 80  nmap ip -p 80 telnet ip:80 lsof -i :80|wc -l 进程 ps -ef| grep ngi ...

  8. C#随学随记

    1.Microsoft.NET是基于Windows平台的一种技术(简称.NET),它包含了能在.NET Framework平台运行的所有语言..NET Framework是微软为开发应用程序创建的一个 ...

  9. 配置DNS服务器

    一.配置基本的DNS 服务器(包含正向解析和反向解析)域名:abc.com服务器IP:10.1.2.11 1. 编辑主配置文件/etc/named.conf---------------------- ...

  10. 淘宝druid数据库连接池

    昨天偶然间在@红薯的一篇技术分享中发现了它的身影,从此想到了去看看他到底是什么西,然后在@开源中国上看到了它的功能介绍,心痒难耐 开始了对它的配置测试. 但是第一次启动就发现了一个问题, Tomat报 ...