首先去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:'', '30',rowspan:6}, {field:'立案',title:'立案', '30',colspan:4}, {field:'撤案',title:'撤<br/>案', '30',colspan:1}, {field:'scdp',title:'审查逮捕', '30',colspan:26}, {field:'scdp',title:'侦结', '30',colspan:5}, {field:'scdp',title:'审查起诉', '30',colspan:10}, {field:'scdp',title:'判决', '30',colspan:14}, {field:'scdp',title:'判决裁定审查情况', '30',colspan:10} ], // 第二列 [{field:'件数',title:'件数', '30',rowspan:5}, {field:'人数',title:'人数', '30',rowspan:5}, {field:'大案数',title:'大案数', '30',rowspan:5}, {field:'要案数',title:'要案数', '30',rowspan:5}, //撤案 {field:'人数',title:'人数', '30',rowspan:5}, {field:'dp',title:'逮捕', '30',colspan:21}, {field:'bdp',title:'不逮捕', '30',rowspan:4,colspan:4}, {field:'pjbazq',title:'平均办案周期', '30',rowspan:5} ], [{field:'dpzrs',title:'逮捕总人数', '30',rowspan:4}, {field:'yzpj',title:'有罪判决', '330',colspan:11,rowspan:3}, {field:'bqs',title:'捕后撤案', '90',rowspan:3,colspan:3}, {field:'bqs',title:'不起诉', '90',rowspan:3,colspan:3}, {field:'wzpj',title:'无罪判决', '90',rowspan:3,colspan:3}] ] }) }); function te(){ $('#test').datagrid('resize', { 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>