Easy UI - 爱码网

首先去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>