• java+easyui实例


    1、首先引入easyui包

    在jsp页面上引用以下文件:

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="js/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>

    注意:jquery-1.8.0.min.js要在jquery.easyui.min.js之前引入。

    2、以下为jsp页面代码:

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ taglib uri="/struts-tags" prefix="s"%>
    <%
        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%>">
        <title>My JSP 'index.jsp' starting page</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <link rel="stylesheet" type="text/css"
            href="easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
        <script type="text/javascript" src="easyui/jquery.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    
    <script type="text/javascript">
        $(function() {
            $('#mydatagrid').datagrid({
                title : 'datagrid实例',
                iconCls : 'icon-ok',
                width : 600,
                pageSize : 5,//默认选择的分页是每页5行数据  
                pageList : [ 5, 10, 15, 20 ],//可以选择的分页集合  
                nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取  
                striped : true,//设置为true将交替显示行背景。  
                collapsible : true,//显示可折叠按钮  
                toolbar : "#tb",//在添加 增添、删除、修改操作的按钮要用到这个  
                url : '<%= basePath %>page/plane_findAllPlane.action',//url调用Action方法  
                loadMsg : '数据装载中......',
                singleSelect : true,//为true时只能选择单行  
                fitColumns : true,//允许表格自动缩放,以适应父容器  
                //sortName : 'xh',//当数据表格初始化时以哪一列来排序  
                //sortOrder : 'desc',//定义排序顺序,可以是'asc'或者'desc'(正序或者倒序)。  
                remoteSort : false,
                frozenColumns : [ [ {
                    field : 'id',
                    checkbox : true
                } ] ],
                pagination : true,//分页  
                rownumbers : true
            //行数  
            });
        });
    </script>
    </head>
    <body>
        <h2>
            <b>easyui的DataGrid实例</b>
        </h2>
        <table id="mydatagrid">
            <thead>
                <tr>
                    <th data-options="field:'planeName',100,align:'center'">学生学号</th>
                    <th data-options="field:'planeType',100,align:'center'">姓名</th>
                    <th data-options="field:'planeModel',100,align:'center'">性别</th>
                    <th data-options="field:'description',100,align:'center'">年龄</th>
                </tr>
            </thead>
        </table>
    </body>
    </html>

    3、action代码:

    private String rows;// 每页显示的记录数
    private String page;// 当前第几页
    
    public String getRows() {
        return rows;
    }
    
    public void setRows(String rows) {
        this.rows = rows;
    }
    
    public String getPage() {
        return page;
    }
    
    public void setPage(String page) {
        this.page = page;
    }
    public void findAllPlane() {
        try {
        //当前页数据集合
        List<Plane> planeLibraryList = planeService.findAll(page, rows);
        //总页数
        int total = planeService.findSize();
        //转化显示数据
        List<PlaneView> list = new ArrayList<PlaneView>();
        for (Plane plane : planeLibraryList) {
            PlaneView view = new PlaneView();
            view.setPlaneType(plane.getPlaneType());
            view.setPlaneName(plane.getPlaneName());
            view.setPlaneModel(plane.getPlaneModel());
            view.setDescription(plane.getDescription());
            list.add(view);
        }
        JSONObject jobj = new JSONObject();//new一个JSON  
        jobj.accumulate("total",total );//total代表一共有多少数据  
        jobj.accumulate("rows", list);//row是代表显示的页的数据  
        response.setCharacterEncoding("utf-8");//指定为utf-8
        response.getWriter().write(jobj.toString());
        } catch (IOException e) {
            e.printStackTrace();
        }//转化为JSOn格式
    }

    4、显示效果图

  • 相关阅读:
    python入门之函数及其方法
    Python入门知识点2---字符串
    Python列表 元组 字典 以及函数
    Python入门知识
    Autofac使用代码
    优化EF以及登录验证
    CRM框架小知识以及增删查改逻辑代码
    分页SQL
    触发器SQL
    动态生成lambda表达式
  • 原文地址:https://www.cnblogs.com/dreammyle/p/3988935.html
Copyright © 2020-2023  润新知