easyui 中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');
                    }
                });
            }
        }

在使用datagrid的时候,先获取数据表格元素,然后定义,在一个{}中定义其属性,要使用方法则格式是:datagrid.(‘方法名字’,{执行的参数等等})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值