easyui 中datagrid的使用方法_essyui datagrid-优快云博客

本文介绍了如何使用EasyUI的Datagrid组件来创建和操作数据表格。通过JavaScript动态生成表格，并详解了如何定义Datagrid属性及调用各种方法进行数据操作。

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

由于使用datagrid主要是和数据打交道，所以为了方便就用了js的方式创建数据表格

<table id="dg"></table>
<div id="toolbar" style="background-color: #b7d2ff">
    <a href="/createArticle" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加文章</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editArticle()">编辑文章</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyArticle()">删除文章</a>
</div>

 $(function(){
            //获取表格元素
            var dataGrid = $('#dg');
           //加载datagrid 表格
            dataGrid.datagrid({
                url:'/articleList',//这是最关键的数据加载地址，接收rows，和total
                singleSelect:true,//单行选中
                rownumbers:true,//序列号，显示在第一列
                pagination:true,//分页条
                pageSize:10,//每页显示的数目
                pagelist:[10,20,30],//选择每页加载的数目，这个要和pagesize的数目成倍数
                fitColumns:true,//自动改变行列比例，把表格撑起来，显得好看点
                toolbar: '#toolbar',//这是工具栏
                //这是每一列定义的内容，field最重要，一定要和返回的数据名称一致，表格就是靠这个名字自动填充数据的
                columns:[[
                    {field:'articleTitle',title:'文章标题',width:100},
                    {field:'articleDetails',title:'内容摘要',width:100},
                    {field:'articleTime',title:'创建时间',width:100}
                ]]
            });
        })

  function destroyArticle(){
  //这里我们就获取到了选中行的数据
            var row = $('#dg').datagrid('getSelected');
            if (row){
            //出现一个确认删除的对话框
                $.messager.confirm('Confirm','确认要删除这篇文章',function(r){
                    if (r){
                    //用ajax提交数据
                        $.post('/deleteArticle',{id:row.id},function(result){
                            if (result){
                                $.messager.show({    // show success message
                                    title: 'success',
                                    msg:result.msg
                                });
                                $('#dg').datagrid('reload');    //删除成功后就重新加载数据表格
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: result.err
                                });
                            }
                        },'json');
                    }
                });
            }
        }