EasyUI插件使用(三)

最新推荐文章于 2024-04-13 07:08:23 发布

Marksunshine

最新推荐文章于 2024-04-13 07:08:23 发布

阅读量1.3k

点赞数

分类专栏： easyui 前端文章标签： easyui 插件

本文链接：https://blog.csdn.net/Marksunshine/article/details/53246324

版权

easyui 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

一丶datagrid使用方法

继承 $.fn.panel.defaults. 重写默认方法$ .fn.datagrid.defaults.

datagrid显示数据表格格式,提供了丰富的支持选择、分类、组织和编辑数据。datagrid被设计来减少开发时间和要求没有专业知识开发人员。它是不重要的,功能丰富。单元合并、表头合并、冻结一列页脚只是它的一些特性。

1.将静态HTML渲染为datagrid样式

代码演示:

<table class="easyui-datagrid">
<thead>
        <tr>
            <th data-options="field:'id'">编号</th>
            <th data-options="field:'name'">姓名</th>
            <th data-options="field:'age'">年龄</th>
        </tr>
</thead>
<tbody>
    <tr>
        <td>001</td>
        <td>鸣人</td>
        <td>23</td>
    </tr>
    <tr>
        <td>002</td>
        <td>佐助</td>
        <td>24</td>
    </tr>
</tbody>
</table>

显示效果:

这里写图片描述

2.发送ajax请求获取json数据创建datagrid

代码演示:

<body>
    <table id="myDatagid">
    </table>
    <!-- 将静态HTML渲染为datagrid样式 -->
    <table class="easyui-datagrid" data-options="url:'${pageContext.request.contextPath }/easyui/datagid/data.json'">
        <thead>
            <tr>
                <th data-options="field:'id'">id</th>
                <th data-options="field:'name'">姓名</th>
                <th data-options="field:'age'">年龄</th>
            </tr>
        </thead>
    </table>
</body>

JSON:

[
    {"id":"001","name":"哪咤","age":"999"},
    {"id":"002","name":"顺风耳","age":"998"},
    {"id":"003","name":"盘古","age":"9999"}
]

显示效果:

这里写图片描述

3.使用easyUI提供的API创建datagrid（重点）

代码演示:

<body>
    <table id="myDatagid">
    </table>
    <script type="text/javascript">
        $(function() {
            $("#myDatagid").datagrid({
                    //用于定义数据表格的标题行（列）
                    columns:[[
                              {title:'编号',field:'id',checkbox:true},
                              {title:'姓名',field:'name'},
                              {title:'年龄',field:'age'},
                              {title:'地址',field:'address'}
                              ]],
                    //指定ajax的请求地址
                    url:'${pageContext.request.contextPath }/easyui/datagid/data2.json',
                    //定义工具栏
                    toolbar:[
                             {text:'添加',iconCls:'icon-add',
                                 //为按钮绑定事件
                                 handler:function(){
                                    alert('add...');
                                }
                             },//每个json对象表示一个按钮
                             {text:'修改',iconCls:'icon-edit'},
                             {text:'删除',iconCls:'icon-remove'}
                             ],
                   //显示行号
                    rownumbers:true,
                    //显示分页条
                    pagination:true
            });
        });
    </script>
</body>

JSON:

{"total":1000,
    "rows":[

        {"id":"001","name":"哪咤","age":"999"},
        {"id":"002","name":"顺风耳","age":"998"},
        {"id":"003","name":"盘古","age":"9999"}
    ]
}