jquery EasyUi学习--创建简单的table

最新推荐文章于 2024-06-19 21:34:23 发布

竖心旁的情

最新推荐文章于 2024-06-19 21:34:23 发布

阅读量854

点赞数

分类专栏： java-web

本文链接：https://blog.csdn.net/wu_0916/article/details/71482297

版权

java-web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本代码根据jQueryEasyUi源码datagrid.html进行修改。
1.效果图：
这里写图片描述
2.源码：table.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Pagination - jQuery EasyUI Demo</title>
        <link rel="stylesheet" type="text/css"
            href="${pageContext.request.contextPath}/css/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css"
            href="${pageContext.request.contextPath}/css/themes/icon.css">
        <link rel="stylesheet" type="text/css"
            href="${pageContext.request.contextPath}/css/themes/demo.css">
        <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/jquery-1.6.min.js"></script>
        <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
        <script type="text/javascript">
            $(function(){
            $('#test').datagrid({
                title:'Test DataGrid',
                iconCls:'icon-save',
                width:700,
                height:350,
                nowrap:false,//是否在一行上显示
                striped:true,//显示斑马线
                collapsible:true,//显示折叠按钮
                url:'data/datagrid_data.json',
                sortName:'code',
                sortOrder:'desc',
                idField:'code',
                frozenColumns:[[{field:'ck',checkbox:true},
                                {title:'code',field:'code',width:80,sortable:true}
                                ]],
                columns:[[
                    {title:'Base Information',colspan:3},
                    {field:'opt',title:'Operation',width:100,align:'center',rowspan:2,
                        formatter:function(value,rec){
                            return '<span style="color:red">Edit Delete</span>';
                        }}
                ],[
                   {field:'name',title:'Name',width:120,rowspan:2},
                   {field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
                       sorter:function(a,b){
                           return (a>b?1:-1);
                       }
                   },
                   {field:'col4',title:'Co14',width:120,rowspan:2}
                   ]],
                 pagination:true,//是否显示底部分页工具栏
            });

            var p=$('#test').datagrid('gePager');
            $(p).pagination({
                onBeforRefresh:function(){
                    alert('123');
                }
            });
        });
        </script>
    </head>
    <body>
    <h2>I'm Creating Table</h2>
    <table id="test"></table>
    </body>
</html>

3.代码结构
这里写图片描述

竖心旁的情

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery EasyUi学习--创建简单的table

本代码根据jQueryEasyUi源码datagrid.html进行修改。 1.效果图： 2.源码：table.jsp<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOC
复制链接

扫一扫

专栏目录