EasyUI 数据表格（DataGrid）——第一节

接下来我们来看看，EasyUI中的最常用的组件DataGrid的用法，后面会陆续更新。

之前没有学习过EasyUI，但是现在由于工作的需要，所以先挑一些重点学习一下，后面会补充其他的。

JS文件

$(function () {
    $("#box").datagrid({
        //设置请求路径
        url:"#",
        //设置表格宽度
        width: 500,
        //设置请求方式
        type: "GET",
        //设置表头图标
        iconCls:"icon-search",
        //设置表头标题
        title:"EasyUI数据表格",
        //设置是否显示行号
        rownumbers:true,
        //设置是否分页
        pagination:true,
        //设置分页时初始化页数
        pageNumber:1,
        //设置每页显示的条数
        pageSize:5,
        //设置显示条数的下拉列表
        pageList:[5,10,20],
        //设置分页导航的位置
        pagePosition:"bottom",
        //设置列适应
        fitColumns : true,
        //设置表格中的列
        columns: [[
            {
                //每一列的名字
                title: "用户名",
                //数据中的字段名（数据库中的字段名）
                field: "user",
                //每一列的宽度
                width: 100
            }, {
                title: "邮箱",
                field: "email",
                width: 100
            },{
                title:"日期",
                field:"date",
                width:100
            }
        ]],
        data:[
            {
                user:"贾宝玉",
                email:"[email protected]",
                date:"1996-01-01"
            },{
                user:"林黛玉",
                email:"[email protected]",
                date:"1996-01-02"
            },{
                user:"薛宝钗",
                email:"[email protected]",
                date:"1996-01-03"
            },{
                user:"贾惜春",
                email:"[email protected]",
                date:"1996-01-04"
            },{
                user:"袭人",
                email:"[email protected]",
                date:"1996-01-05"
            },{
                user:"贾迎春",
                email:"[email protected]",
                date:"1996-01-06"
            }
        ]
    });
});

JSP文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>DataGrid数据表格</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/DataGrid.js"></script>
</head>
<body>
    <table id="box"></table>
</body>
</html>

效果图：

------------------------------------------------

关注小编微信公众号获取更多资源

EasyUI 数据表格（DataGrid）——第一节

猜你喜欢