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

来源：互联网发布：三少爷的剑知乎编辑：程序博客网时间：2024/05/18 02:08
本代码根据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