jQuery EasyUI使用教程:为数据网格创建复杂工具栏

原创|使用教程|编辑:龚雪|2015-12-17 09:17:32.000|阅读 498 次

概述:数据网格的工具栏不仅可以包含按钮,还能包含任何其他组件。本教程将向您展示如何为数据网格组件创建复杂的工具栏。

# 项目交付用正版,省下一台Iphone12 # # 31款JAVA开发必备控件和工具 #

相关链接:

Kendo UI for jQuery——创建现代Web应用程序的最完整UI库!查看详情>>>

<jQuery EasyUI最新试用版免费下载>

数据网格的工具栏不仅可以包含按钮,还能包含任何其他组件。用户可以通过已存在的div标签轻松定义工具栏布局,该div标签将成为数据网格工具栏的内容。本教程将向您展示如何为数据网格组件创建复杂的工具栏。

为数据网格创建复杂工具栏

创建工具栏

<div id="tb" style="padding:5px;height:auto">
<div style="margin-bottom: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>
Date From: <input class="easyui-datebox" style="width:80px">
To: <input class="easyui-datebox" style="width:80px">
Language:
<input class="easyui-combobox" style="width:100px"
url="data/combobox_data.json"
valueField="id" textField="text">
<a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
</div>
</div>

创建数据网格

<table class="easyui-datagrid" style="width:600px;height:250px"
url="data/datagrid_data.json"
title="DataGrid - Complex Toolbar" toolbar="#tb"
singleSelect="true" fitColumns="true">
<thead>
<tr>
<th field="itemid" width="60">Item ID</th>
<th field="productid" width="80">Product ID</th>
<th field="listprice" align="right" width="70">List Price</th>
<th field="unitcost" align="right" width="70">Unit Cost</th>
<th field="attr1" width="200">Address</th>
<th field="status" width="50">Status</th>
</tr>
</thead>
</table>

正如您看到的那样,数据网格的工具栏类似于对话框。我们无需编写任何的JavaScript代码,即可创建具有复杂工具栏的数据网格。

下载该EasyUI示例:easyui-datagrid-demo.zip

购买最新正版授权!"咨询在线客服"



标签:HTML5jQueryUI界面HTML5/JS

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都控件网

登录 慧都网发表评论


慧都网友 2015-12-17 10:08:54.000
0

mark!EasyUI总体来说越来越完善了,不错!


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
jQuery EasyUI

基于jQuery且支持HTML5的用户界面框架

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat