easyui--之总和使用方法--对话框dialog--工具栏toolbar-按钮button--tabs忒博页--树tree--表格table

最新推荐文章于 2023-05-09 08:40:54 发布

静山晚风

最新推荐文章于 2023-05-09 08:40:54 发布

阅读量2.3k

点赞数

分类专栏： jquery-easyui Jquery

本文链接：https://blog.csdn.net/cgwcgw_/article/details/17150287

版权

Jquery 同时被 2 个专栏收录

96 篇文章 0 订阅

订阅专栏

jquery-easyui

20 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<div style="margin:10px 0;"></div>
	<div class="easyui-accordion" style="width:150px;height:200px;">
		<div title="系统管理"  style="overflow:auto;padding:10px;">
			<h3 style="color:#0099FF;">Accordion for jQuery</h3>
			<p>Accordion</p>
		</div>
		<div title="功能菜单"  style="padding:10px;">
			<p>The accordion</p> 		
		</div>
		<div title="用户管理" style="padding:10px;">
			<p>The accordion</p> 		
		</div>
		<div title="目标管理"  style="padding:10px;">
			<p>The accordion</p> 		
		</div>
	</div>
	<div>
	<ul class="easyui-tree">
				<li>
					<span>Foods</span>
					<ul>
						<li>
							<span>Fruits</span>
							<ul>
								<li>apple</li>
								<li>orange</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		
		<div class="easyui-tabs" style="width:700px;height:300">
		<div title="首页" style="padding:10px">
			<p style="font-size:14px">jQuery EasyUI framework help you build your web page easily.</p>
			<ul>
				<li>hello welcome</li>
			</ul>
		</div>
		<div title="系统管理" style="padding:10px" data-options="closable:true">
			<ul>
				<li>系统管理</li>
			</ul>
		</div>
		</div>
		
			<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
			data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>
<!-- 	-->	<input type="button" value="submit" style="background-image: url(../../themes/icons/ok.png);" src="../../themes/icons/ok.png" size="20">
	<div style="padding:10px 0 0 30px">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">Ok</a>
</div> 
	<div id="dlg" class="easyui-dialog" title="Basic Dialog" style="width:400px;height:200px;padding:10px" 	data-options="
				iconCls: 'icon-save',
				toolbar: [{
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
						alert('add')
					}
				}],
				buttons: [{
					text:'Ok',
					iconCls:'icon-ok',
					handler:function(){
						alert('ok');
					}
				}]
			" >
		The dialog content.
	</div>
</body>
</html>