EasyUI学习笔记（四）—— datagrid的使用

时间：2019-02-03 14:40:06 阅读：229 评论：0 收藏：0 [点我收藏+]

一、传统的HTML表格

　　之前我们做表格的时候是这样写的：

<table >
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td>
        <td>小明</td>
        <td>90</td>
    </tr>
    <tr>
        <td>002</td>
        <td>老王</td>
        <td>3</td>
    </tr>
    </tbody>
</table>

　　效果是这样的：

　　技术分享图片

二、将静态HTML渲染为datagrid样式

<!--方式一:将静态HTML渲染为datagrid样式-->
<table class="easyui-datagrid">
    <thead>
    <tr>
        <!--field属性必须要加,否则出不来效果-->
        <th data-options="field:‘id‘,width:100">编号</th>
        <th data-options="field:‘name‘,width:100,align:‘center‘">姓名</th>
        <th data-options="field:‘age‘,width:100,align:‘right‘">年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td>
        <td>小明</td>
        <td>90</td>
    </tr>
    <tr>
        <td>002</td>
        <td>老王</td>
        <td>3</td>
    </tr>
    </tbody>
</table>

　　效果如下：

　　技术分享图片

三、发送ajax获取json创建datagrid

　　提供json文件：

　　技术分享图片

　　代码修改如下：

<table class="easyui-datagrid" data-options="url:‘${pageContext.request.contextPath}/json/datagrid_data.json‘">
    <thead>
    <tr>
        <!--field属性必须要加,否则出不来效果-->
        <th data-options="field:‘id‘,width:100">编号</th>
        <th data-options="field:‘name‘,width:100,align:‘center‘">姓名</th>
        <th data-options="field:‘age‘,width:100,align:‘right‘">年龄</th>
    </tr>
    </thead>
</table>

　　效果如下：

　　技术分享图片

四、使用JS创建datagrid（掌握）

<!-- 方式三：使用easyUI提供的API创建datagrid -->
<table id="mytable"></table>
<script type="text/javascript">
    $(function () {
        //页面加载完成后，创建数据表格datagrid
        $("#mytable").datagrid({
            //定义标题行所有的列
            columns:[[
                {title:‘编号‘,field:‘id‘,checkbox:true},
                {title:‘姓名‘,field:‘name‘},
                {title:‘年龄‘,field:‘age‘},
                {title:‘地址‘,field:‘address‘}
            ]],
            //指定数据表格发送ajax请求的地址
            url:‘${pageContext.request.contextPath }/json/datagrid_data.json‘,
            rownumbers:true,
            singleSelect:true,
            //定义工具栏
            toolbar:[
                {text:‘添加‘,iconCls:‘icon-add‘,
                    // 为按钮绑定单击事件
                    handler:function () {
                        alert("add...");
                    }
                },
                {text:‘删除‘,iconCls:‘icon-remove‘},
                {text:‘修改‘,iconCls:‘icon-edit‘},
                {text:‘查询‘,iconCls:‘icon-search‘}
            ],
            // 显示分页条
            pagination:true,
            pageList: [3, 5, 7, 9]
        })
    })
</script>