jQueryEasyUI选项卡 - 自定义工具样式

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

草巾冒小子

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

阅读量2k

点赞数

分类专栏： EasyUI

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/82702164

版权

EasyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

结合项目截图演示说明其中的使用技巧：

首先看一段 <div> 标签内的<div data-options=" 代码片段如下" >代码：

//代码片段1
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',
				tools:'#hb',toolbar:'#tb',footer:'#ft'"
//代码片段2
data-options="iconCls:'icon-edit',closable:true,tools:'#tt'"

//代码片段3 - 函数写法
data-options="
				tools:[{
					iconCls:'icon-reload',
					handler:function(){
						$('#p').panel('refresh', '_content.html');
					}
				}]
			"

1. 项目截图：

注意观看图片中的标注部分的使用，对比代码查看：
这里写图片描述

2. 说明：根据上图中标注，对比下面的代码

代码规则	对应的效果标注号	其他规则设置
`rownumbers:true`	4	false 不显示行号
`singleSelect:true`	5	false 支持多个选中为黄色
`tools:'#hb'`	2
`toolbar:'#tb'`	9	表示标注9，所在的行
`footer:'#ft'`	3
上文提到的：代码片段2	1 和 6

.

其他 icon 效果,对应的代码，如下：

代码规则对应图标效果表示
iconCls:'icon-help' 6 拓展：icon-另用于class="icon-help"
collapsible:true 7 可折叠
closable:true 8 可关闭
minimizable:true 9 最小化
maximizable:true 10 最大化

代码规则	对应图标	效果表示
`iconCls:'icon-help'`	6	拓展：`icon-`另用于`class="icon-help"`
`collapsible:true`	7	可折叠
`closable:true`	8	可关闭
`minimizable:true`	9	最小化
`maximizable:true`	10	最大化

图标类 icon-

代码规则对应图标
icon-reload
icon-add 1
icon-edit 2
icon-cut 3
icon-save 4
icon-remove 5
icon-help 6

代码规则	对应图标
`icon-reload`
`icon-add`	1
`icon-edit`	2
`icon-cut`	3
`icon-save`	4
`icon-remove`	5
`icon-help`	6

3. html代码如下：

<!DOCTYPE HTML>
<html>
	<head>
	    <title>安全资格培训考试报名系统</title>
	    <meta charset="UTF-8"/>
	    
	    <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.min.js"></script>
	    <script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
	    <link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon">
	    
	    <style type="text/css">
	    	
	    </style>
	    
	</head>
	<body>
		<div class="easyui-panel" title="培训计划管理" style="width:100%;height:auto;padding:10px;" data-options="iconCls:'icon-edit',closable:true,max:true,tools:'#tt'">
			<div class="easyui-tabs" style="height:auto">
				<div title="查询" style="padding:10px">
					<table class="easyui-datagrid" title="基本信息" style="" data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',tools:'#hb',toolbar:'#tb',footer:'#ft'">
						<thead>
							<tr>
								<th data-options="field:'itemid',width:80">Item ID：</th>
								<th data-options="field:'productid',width:100">Product ID</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:240">Attribute</th>
								<th data-options="field:'status',width:60,align:'center'">Status</th>
							</tr>
						</thead>
					</table>
					<div id="tb" style="padding:2px 5px;">
						Date From: <input class="easyui-datebox" style="width:110px">
						To: <input class="easyui-datebox" style="width:110px">
						资格类型: 
						<select class="easyui-combobox" panelHeight="auto" style="width:150px">
							<option value="01">安全生产监管人员</option>
							<option value="02">煤矿安全监察人员</option>
							<option value="03">培训机构专职教师</option>
							<option value="04">培训机构兼职教师</option>
							<option value="05">主要负责人</option>
							<option value="06">安全生产管理人员</option>
							<option value="07">特种作业人员</option>
							<option value="08">干部轮训</option>
						</select>
						<a href="#" class="easyui-linkbutton" iconCls="icon-search">查询</a>
					</div>
					<div id="ft" style="padding:2px 5px;">
						<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
						<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
						<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
						<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
						<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
					</div>
					<div id="hb" style="padding:2px 5px;">
						<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
						<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
						<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
					</div>
				</div>
				<div title="基本信息" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
					<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
				</div>
			</div>
		</div>
		<div id="tt">
			<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')" title="添加"></a>
			<a href="javascript:void(0)" class="icon-save" onclick="javascript:alert('edit')" title="保存"></a>
			<a href="javascript:void(0)" class="icon-remove" onclick="javascript:alert('cut')" title="删除"></a>
			<a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')" title="帮助"></a>
		</div>
	</body>
</html>

以上就是关于“ jQueryEasyUI选项卡 - 自定义工具样式 ” 的全部内容。

草巾冒小子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQueryEasyUI选项卡 - 自定义工具样式

结合项目截图演示说明其中的使用技巧：首先看一段 &amp;lt;div&amp;gt; 标签内的&amp;lt;div data-options=&quot; 代码片段如下&quot; &amp;gt;代码：//代码片段1data-options=&quot;rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get', too
复制链接

扫一扫