关于EasyUI Datagrid 数据网格使用策略

最新推荐文章于 2024-04-24 09:22:16 发布

必须_总结

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量2.2k

点赞数 2

分类专栏： EasyUI 文章标签： easyui datagrid 数据网格 javascript java

本文链接：https://blog.csdn.net/sinat_30643113/article/details/52667462

版权

EasyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

每天一小步前进一大步，记录一下前段时间使用的EasyUI数据网格。话不多说，上图。
![第一页](https://img-blog.csdn.net/20160926094650920)
![第二页](https://img-blog.csdn.net/20160926094813949)

一、创建数据网格

    参考官网的说明，有两种创建方法，本人亲测使用的是第二种，采用javascript 创建数据网格（datagrid）。代码如下：

1.1 HTML代码

    <!-- 动态表格 -->
    <div style="width:100%">
        <table id="know" class="easyui-datagrid"></table>   
    <div>

主要是”table“标签，class=”easyui-datagrid”表示要引用的样式。

1.2JS代码

$('#know').datagrid({
        iconCls:'icon-tip',//图标 
        title:'知识库',
        height:440,
        url:'know/searchDataPlus',
        method:'post',
        rownumbers : true,  //<!--显示带有行号的列。-->
        pagination:true,    //分页控件 
        pageSize: 10,//每页显示的记录条数，默认为10 
        pageList: [10,15,20,30],//可以设置每页记录条数的列表 
        toolbar:tool,
        loadMsg : '数据装载中......',                                
        columns:[[{
                field : 'ck',
                checkbox : true
            },{
                field : 'kId',  //知识编号
                align: 'center', //居中
                width: '100', //列宽
                title:'知识编号'
                //hidden: 'true'       该属性隐藏
            },{
                field : 'kTitle',   //标题
                align : 'center',
                width : 100,
                title : '标题'   //
            }, {
                field : 'system',   //系统
                align : 'center',
                width : 100,
                title : '系统'   //
            }, {
                field : 'content',  //内容
                align : 'center',
                width : 200,
                title : '内容'  //
            }, {
                field : 'keywords',
                align : 'center',
                width : 100,
                title:'关键字'  //
            }, {    //隐藏属性部分    
                field : 'foundMan',
                align : 'center',
                width : 150,
                title : '创建人'  //
            }, {    
                field : 'foundTime',
                align : 'center',
                width : 150,
                title : '创建时间'
            }, {    
                field : 'add1',
                align : 'center',
                width : 100,
                title : '知识点状态',
                formatter : function(val, rec) {
                       if (val == '0') {
                           return '未审核'
                       } else if (val == '1') {
                           return '审核通过'
                       }else if (val == '2') {
                           return '审核未通过'
                       }
                   }
            }, {
                field: 'verifyMan',
                align: 'center',
                hidden: 'true',
                title: '审核人'
            }, {
                field: 'verifyTime',
                align: 'center',
                hidden: 'true',
                title: '审核时间'
            }, {
                field: 'alterMan',
                align: 'center',
                hidden: 'true',
                title: '修改人'
            }, {
                field: 'alterTime',
                align: 'center',
                hidden: 'true',
                title: '修改时间'
            }
        ]],
        queryParams: getParams()
    });
}

采用Jquery的语法，有详细的注释做解释，queryParams: getParams()：表示额外的参数，getParams()：该函数获取额外的参数，如果没有在浏览器的调试时候不显示。

二、获取后台数据

    做到这里就只剩下如何从后台获取数据，前台获得数据进行展示了。先看看浏览器调试中时获取到的结果值。

第一页
第二页

红色标记区可以看到，获取的以及返回的数据类型是***JSON类型***，如果是采用Spring MVC可在***@Controller层***采用***@ResponseBody***注解

获取到的数据

后台返回给前台的数据为一个Map集合，集合中的参数只有两个，其一，***rows***集合，有几条记录存放对应的数据进去。

rows集合中的数据

其二，total：总行数，用来记录查询到的结果的总数。Map集合中只需命名这两个参数，返回给前台。 Datagrid 数据网格获取数据是采用ajax异步无刷新技术，很好的适应了增删改查的操作，同时还有一些扩展可以做，如：导入、导出、审核等等。

以下是本次前台的源代码，转载注明出去，谢谢！

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <link rel="stylesheet" type="text/css" href="<%=basePath%>/common/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/common/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/common/css/demo.css">
    <script type="text/javascript" src="<%=basePath%>/common/js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/common/js/jquery.easyui.min.js"></script>
    <script src="<%=basePath%>/common/js/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <style type='text/css'>
        input{
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
             }
        #knowform input{
                margin: 5px 10px;
                width: 300px;
                height: 25px;
            }
        #knowform textarea{
                margin: 5px 10px;
                width: 300px;           
            }       
    </style>
    <script type="text/javascript">
        //************ ****************【添加功能按钮区域】***** ********* ********* **********//
        var tool = [];
        tool.push();
        tool.push({
            text : '查询',
            iconCls : 'icon-search',
            handler : function() {               
                loadGrid();
            }
        });
        tool.push( '-');
        tool.push({
            text : '重置',
            iconCls : 'icon-reload',
            handler : function() {
              document.getElementById('searchform').reset();
            }
        });
        //************ ****************【初始化信息区域】***** ********* ********* **********//
        $(function() { //初始化信息
            $('#newKnow').dialog({
                modal : true,   //创建模式对话框
                closed : true,
                iconCls : 'icon-add',
                title : '新增知识点',
                buttons : [ {       //创建按钮
                    id : 'savebt',
                    text : '保存',
                    iconCls : 'icon-ok',
                    handler : function() {         
                    //   addNews();
                         addKnow();
                    }
                }, {
                    text : '取消',
                    iconCls : 'icon-no',
                    handler : function() {
                     //   $('#newKnow').dialog('close');    //方法一
                        closeNewKnow();
                    }
                } ]
            })

            loadGrid();  //初始化时加载信息

        //  $.messager.defaults = { ok: "确认", cancel: "取消" };      
            var p = $('#know').datagrid('getPager'); 
            $(p).pagination({          
                beforePageText: '第',//页数文本框前显示的汉字 
                afterPageText: '页    共 {pages} 页', 
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录', 
            });

        })
        //************ ****************【全局区域】***** ********* ********* **********//      
        //【加载表格】
        function loadGrid() {

            $('#know').datagrid({
                iconCls:'icon-tip',//图标 
                title:'知识库',
                height:440,
                url:'know/searchDataPlus',
                method:'post',
                rownumbers : true,  //<!--显示带有行号的列。-->
                pagination:true,    //分页控件 
                pageSize: 10,//每页显示的记录条数，默认为10 
                pageList: [10,15,20,30],//可以设置每页记录条数的列表 
                toolbar:tool,
                loadMsg : '数据装载中......',                                
                columns:[[{
                        field : 'ck',
                        checkbox : true
                    },{
                        field : 'kId',  //知识编号
                        align: 'center', //居中
                        width: '100', //列宽
                        title:'知识编号'
                        //hidden: 'true'       该属性隐藏
                    },{
                        field : 'kTitle',   //标题
                        align : 'center',
                        width : 100,
                        title : '标题'   //
                    }, {
                        field : 'system',   //系统
                        align : 'center',
                        width : 100,
                        title : '系统'   //
                    }, {
                        field : 'content',  //内容
                        align : 'center',
                        width : 200,
                        title : '内容'  //
                    }, {
                        field : 'keywords',
                        align : 'center',
                        width : 100,
                        title:'关键字'  //
                    }, {    //隐藏属性部分    
                        field : 'foundMan',
                        align : 'center',
                        width : 150,
                        title : '创建人'  //
                    }, {    
                        field : 'foundTime',
                        align : 'center',
                        width : 150,
                        title : '创建时间'
                    }, {    
                        field : 'add1',
                        align : 'center',
                        width : 100,
                        title : '知识点状态',
                        formatter : function(val, rec) {
                            if (val == '0') {
                                return '未审核'
                            } else if (val == '1') {
                                return '审核通过'
                            }else if (val == '2') {
                                return '审核未通过'
                            }
                        }
                    }, {
                        field: 'verifyMan',
                        align: 'center',
                        hidden: 'true',
                        title: '审核人'
                    }, {
                        field: 'verifyTime',
                        align: 'center',
                        hidden: 'true',
                        title: '审核时间'
                    }, {
                        field: 'alterMan',
                        align: 'center',
                        hidden: 'true',
                        title: '修改人'
                    }, {
                        field: 'alterTime',
                        align: 'center',
                        hidden: 'true',
                        title: '修改时间'
                    }
                ]],
                queryParams: getParams()
            });
    }
    //【模糊查询条件】
    function getParams(){ //导出明细时使用的信息（需要修改为当前表对应名称）
            return {
                system: function () {
                    return $("#system").val();
                },
                keywords: function () {
                    return $("#keywords").val();
                }
            };
    }   
    </script>
</head>

 <body><!-- class 控制样式 -->      
    <!-- 模糊查询 -->
    <div class="easyui-tabs" style="width:100%;height:80px;">       
        <div id="search" title="查询条件" style="height:60px;" collapsible="true">
            <form id="searchform" method="post">
                <table class="table table-hover table-condensed" style=" margin-top:10px; margin-bottom:10px;">
                    <tr>
                        <td>系统</td>
                        <td><input name="system" class="easyui-validatebox" type="text" size="20" maxlength="30" id="system" /></td>
                        <td>关键字</td>
                        <td><input name="keywords" class="easyui-validatebox" type="text" size="20" maxlength="30" id="keywords" /></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

    <!-- 动态表格 -->
    <div style="width:100%">
        <table id="know" class="easyui-datagrid"></table>   
    <div>
</body>
</html>

必须_总结

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
关于EasyUI Datagrid 数据网格使用策略

每天一小步前进一大步，记录一下前段时间使用的EasyUI数据网格。话不多说，上图。![第一页](http://img.blog.csdn.net/20160926094650920)![第二页](http://img.blog.csdn.net/20160926094813949)一、创建数据网格参考官网的说明，有两种创建方法，本人亲测使用的是第二种，采用javascript 创建数据
复制链接

扫一扫