版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35393869/article/details/82702164
结合项目截图演示说明其中的使用技巧：
首先看一段 <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:true7 可折叠 closable:true8 可关闭 minimizable:true9 最小化 maximizable:true10 最大化
图标类 icon-
代码规则 对应图标 icon-reloadicon-add1 icon-edit2 icon-cut3 icon-save4 icon-remove5 icon-help6
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选项卡 - 自定义工具样式 ” 的全部内容。