DataGrid 添加toolbar

最新推荐文章于 2023-04-26 08:39:32 发布

无盐海

最新推荐文章于 2023-04-26 08:39:32 发布

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： EasyUI

本文链接：https://blog.youkuaiyun.com/Fanbin168/article/details/43032317

EasyUI 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在VS2013中使用EasyUI框架搭建一个包含Datagrid的数据展示页面，并详细展示了HTML、CSS和JavaScript代码配置过程。通过具体实例说明了如何设置Datagrid的属性及工具栏操作。

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

<1> 运行与vs2013中

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="JS/jquery.min.js"></script>  <!--注意js的顺序，否则会报问题-->
    <script src="JS/jquery.easyui.min.js"></script>
    <script src="JS/easyui-lang-zh_CN.js"></script>
    <link href="CSS/easyui.css" rel="stylesheet" />
    <link href="CSS/icon.css" rel="stylesheet" />
</head>
<body>
    <!--我们要将从EasyUi官网上下载的文件包里的icons文件夹放到CSS文件夹下面，icons里面放置的是toolbar控件的的一些图标-->
    <!--这个datagrid是从datagrid_data1.json中取得数据-->
    <table class="easyui-datagrid" title="Basic DataGrid" 
           data-options="rownumbers:true,singleSelect:true,url:'../datagrid/datagrid_data1.json',toolbar:toolbar">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:100,align:'left'">角色编号</th>
                <th data-options="field:'productid',width:100,align:'left'">角色名称</th>
                <th data-options="field:'listprice',width:100,align:'left'">有效</th>
                <th data-options="field:'unitcost',width:100,align:'left'">描述</th>
                <th data-options="field:'attr1',width:250,align:'left'">管理</th>
                <th data-options="field:'status',width:100,align:'left'">地址</th>
            </tr>
        </thead>
    </table>
</body>
</html>
<script type="text/javascript">
    var toolbar = [
    {
        text: '刷新',
        iconCls: 'icon-reload',
        handler: function () { alert('刷新') }
     }, '-', //这个'-'的效果是将各个字段用 |隔开
    {
        text: '新增',
        iconCls: 'icon-add',
        handler: function () { alert('新增') }
    }, '-',
    {
        text: '删除',
        iconCls: 'icon-remove',
        handler: function () { alert('删除') }
    }, '-',
    {
        text: '剪切',
        iconCls: 'icon-cut',
        handler: function () { alert('剪切') }
    }, '-',
    {
        text: 'OK',
        iconCls: 'icon-ok',
        handler: function () { alert('OK') }
    }, '-',
    {
        text: 'NO',
        iconCls: 'icon-no',
        handler: function () { alert('NO') }
    }, '-',
    {
        text: 'sum',
        iconCls: 'icon-sum',
        handler: function () { alert('sum') }
    }, '-',
    {
        text: '返回',
        iconCls: 'icon-back',
        handler: function () { alert('返回') }
    }, '-',
    {
        text: 'tip',
        iconCls: 'icon-tip',
        handler: function () { alert('tip') }
    }, '-',
    {
        text: '打印',
        iconCls: 'icon-print',
        handler: function () { alert('打印') }
    }, '-',
    {
        text: 'redo',
        iconCls: 'icon-redo',
        handler: function () { alert('redo') }
    }, '-',
    {
        text: 'undo',
        iconCls: 'icon-undo',
        handler: function () { alert('undo') }
    }, '-',
    {
        text: '帮助',
        iconCls: 'icon-help',
        handler: function () { alert('帮助') }
    }, '-',
    {
        text: '查询',
        iconCls: 'icon-search',
        handler: function () { alert('查询') }
    }, '-',
    {
        text: '取消',
        iconCls: 'icon-cancel',
        handler: function () { alert('取消') }
    }, '-',
    {
        text: '编辑',
        iconCls: 'icon-edit',
        handler: function () { alert('编辑') }
    }, '-',
    {
        text: '保存',
        iconCls: 'icon-save',
        handler: function () { alert('保存') }
    }
 ];
</script>

<toolbar效果图>