jq easy-ui datagrid 的一些用法

最新推荐文章于 2024-04-06 20:58:54 发布

sd6275832ght

最新推荐文章于 2024-04-06 20:58:54 发布

阅读量379

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/sd6275832ght/article/details/89602421

本文详细介绍使用EasyUI框架中的Datagrid组件实现用户数据展示、分页、选择及删除功能的具体步骤，包括引入必要的CSS与JS文件，设置Datagrid属性如宽度、高度、列自适应等，以及通过AJAX调用后端接口获取数据并格式化日期。

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

首先引入相应的css 与JS

<link href="~/Content/default/easyui.css" rel="stylesheet" />
     <link href="~/Content/icon.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>

初始话datagrid

 $('#tt').datagrid({
                url: '/UserInfo/UserInfoList',
                title: '用户数据表格',
                width: 700,
                height: 400,
                fitColumns: true, //列自适应
                nowrap: false,
                idField: 'ID',//主键列的列明
                loadMsg: '正在加载用户的信息...',
                pagination: true,//是否有分页
                singleSelect: false,//是否单行选择
                pageSize: 10,//页大小，一页多少条数据
                pageNumber: 1,//当前页，默认的
                pageList: [10, 20, 50],
                queryParams: {},//往后台传递参数
                columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
					{ field: 'ID', title: '编号', width: 80 },
					{ field: 'UserName', title: '姓名', width: 120 },
                     { field: 'UserPass', title: '密码', width: 120 },

					{
					    field: 'RegTime', title: '时间', width: 80, align: 'right',
					    formatter: function (value, row, index) {
					    //在返回的json数据格式中，日期格式需要从新被格式化才能在进行显示
					        return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d");
					    }
					}
                ]],
                toolbar: [{
                    id: 'btnGet',
                    text: '删除',
                    iconCls: 'icon-add',
                    handler: function () {
                        var rows = $('#tt').datagrid('getSelections');
                        if (!rows || rows.length==0) {
                            $.messager.alert("提示", "请选择要删除的数据", "error");
                            return;
                        }
                        var strId = "";
                        for (var i = 0; i < rows.length; i++) {
                            strId += rows[i].ID+",";
                        }
                        strId = strId.substr(0, strId.length - 1);
                        $.post('/UserInfo/RemoveUserInfo', {
                            listId: strId
                            }, function (data) {
                                if (data == "ok") {
                                    //清除选中项
                                    $('#tt').datagrid('clearSelections');
                                    //加载当前页面
                                   $('#tt').datagrid('reload');
                            }
                            else {
                                $.messager.alert("提示", "删除失败!", "error");
                            }

                        })

                    }
                }],
            });

获取datagrid中的 pageindex,pagesize 对应的属性为 page,rows
//在datagrid中返回的JSON数据需要返回两个属性rows,total