EasyUI-数据表格复杂工具栏

最新推荐文章于 2021-01-12 14:26:11 发布
转载 最新推荐文章于 2021-01-12 14:26:11 发布 · 523 阅读 · 0

本文介绍了一个使用EasyUI组件库实现的复杂工具栏示例。该DataGrid具备多种操作按钮及筛选选项，通过定义div布局来简化工具栏的设计过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />

</head>
<body>
    <h2>DataGrid Complex Toolbar</h2>
    <p>The DataGrid toolbar can be defined from a <div /> markup, so you can define the layout of toolbar easily.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" title="DataGrid Complex Toolbar" style="width:700px;height:250px"
           data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',toolbar:'#tb'">
        <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:240">Attribute</th>
                <th data-options="field:'status',width:60,align:'center'">Status</th>
            </tr>
        </thead>
    </table>
    <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:
            <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                <option value="java">Java</option>
                <option value="c">C</option>
                <option value="basic">Basic</option>
                <option value="perl">Perl</option>
                <option value="python">Python</option>
            </select>
            <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
        </div>
    </div>
</body>
</html>

EasyUI实践之路之datagrid（菜单栏、工具栏、格式化、动态换列）
zerovpp的博客
05-22 1447
一、datagrid：   1、table菜单栏：先在div中添加&lt;a easyui-linkbutton&gt;，再在table 属性中设置toolbar=div的id；   2、frozen列：有2种方式，一是在table的&lt;thead frozen="true"&gt;加上，后面跟上是要冻结的列，这种方式比较呆板，直接就写死在html代码中；另一种是js，用frozenColum...
EasyUI DataGrid 添加工具
05-14
这个例子显示了如何添加工具栏 DataGrid插件有工具栏属性，这个属性可以定义工具栏。工具栏包括定义了下列属性的按钮： • text: 在按钮上显示的文本 • iconCls: 定义背景图标显示在按钮的左面的CSS类。 • handler: 当用户按下按钮时，处理一些事情的函数
easyui复杂表单_EasyUI 数据表格复杂工具栏(DataGrid Complex Toolbar)_easyui demo
weixin_42251888的博客
01-12 278
DataGrid Complex ToolbarThe DataGrid toolbar can be defined from amarkup, so you can define the layout of toolbar easily.Item IDProductList PriceUnit CostAttributeStatusDate From:To:Language:JavaCBasi...
EasyUI-对话框上的复杂工具栏
dxm809的博客
03-27 190
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
easyui复杂表单_Easyui Form 表单_EasyUI 插件
weixin_39819661的博客
12-20 277
通过 $.fn.form.defaults 重写默认的 defaults。表单(form)提供多种方法来执行带有表单字段的动作，比如 ajax 提交、加载、清除，等等。当提交表单时，调用 'validate' 方法来检查表单是否有效。用法创建一个简单的 HTML 表单。构建表单并给 id、action、method 赋值。 Name:Email:...让表单(form)成为 ajax 提交的表单(...
jquery-easyui-1.3.1
05-06
7. **Menu**：Menu 组件则用于创建各种菜单，可以用于导航、工具栏或右键上下文菜单，提供了丰富的样式和事件处理。 在实际应用中，jQuery EasyUI 1.3.1 还支持 AJAX、JSONP 等数据交互方式，与后端服务器进行数据...
jquery-easyui-1.3.2+中文文档
08-19
9. **面板（Panel）**: 一个可自定义的容器，可以包含其他组件，支持标题、工具栏和折叠功能。 10. **工具提示（Tooltip）**: 为元素提供浮动的提示信息，增强了用户体验。 11. **加载提示（Loading）**: 显示加载...
jquery-easyui-1.7.0.rar
09-21
2. **UI组件**: EasyUI 提供了一套完整的UI组件，包括表格（datagrid）、表单（form）、对话框（dialog）、菜单（menu）、工具栏（toolbar）、面板（panel）、滑块（slider）等，这些组件覆盖了网页开发中的大部分...
jquery-easyui-1.3.3v1
08-06
- **面板(Panel)**：基本的容器组件，可以包含其他组件或HTML内容，支持标题、工具栏、折叠等功能。 4. **开发实践**： - **使用方法**：通过引入jQuery和EasyUI的CSS和JS文件，可以方便地通过HTML标签属性和...
jquery-easyui-1.3.2 demo
06-15
1. **DataGrid**：数据网格是EasyUI的重要组件，用于展示和操作表格数据。在demo中，你可以看到如何加载数据、排序、分页、编辑等功能的实现，以及如何自定义列显示和操作行为。 2. **Combobox and Combotree**：这...
EasyUI-带工具栏的数据表格
dxm809的博客
03-29 232
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
easyui复杂表单_EasyUI 表单 – 表单验证
weixin_39935571的博客
01-12 197
本文目录结构EasyUI 表单 - 表单验证本教程将向您展示如何验证一个表单。easyui 框架提供一个 validatebox 插件来验证一个表单。在本教程中，我们将创建一个联系表单，并应用 validatebox 插件来验证表单。然后您可以根据自己的需求来调整这个表单。创建表单(form)让我们创建一个简单的联系表单，带有 name、email、subject 和 message 字段：For...
jQuery Easyui，表格对应工具栏的使用
07-26 123
转载于:https://www.cnblogs.com/MyFlora/archive/2012/07/26/2609806.html
jQuery Easyui，表格对应工具栏的使用，具体实现
07-26 113
转载于:https://www.cnblogs.com/MyFlora/archive/2012/07/26/2609811.html
easyui复杂表头
ITX2000的专栏
08-15 390
columns: [[ { field: ‘PARAM_NAME’, rowspan: 2, title: ‘参数名’, align: ‘center’, width: 150 }, { field: ‘MI_VALUE’, rowspan: 2, title: ‘量产规格’, align: ‘center’, width: ...
easyui Datagrid 加入 add， cut， save工具栏
学习专栏
11-25 5371
var toolbar = [{         text: 'Add',         iconCls: 'icon-add',         handler: function () { alert('add') }     }, {         text: 'Cut',         iconCls: 'icon-cut',         handler: func
easyui自定义工具栏
都是浮云
10-06 4381
查询
easyui中datagrid内置工具栏
风一样的男子
08-08 2387
$("#dg").datagrid({ url:url, //自动伸缩 fitColumns:true, //工具栏 toolbar: [ { id : "con", text : '&lt;input type="text" id="content" placeholder="请输入...
EasyUI-工具栏提示
dxm809的博客
03-22 361
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
中文版jquery-easyui-1.4 API文档指南
- **DataGrid（数据网格）：** 用于展示、编辑、排序和分页表格数据。 - **TreeGrid（树形网格）：** 结合了树形结构和数据网格的功能，用于显示具有层级关系的数据。 - **Menu（菜单）和Tabs（标签页）：** 提供多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值