easyui datagrid

最新推荐文章于 2025-04-16 14:02:28 发布

KingCruel

最新推荐文章于 2025-04-16 14:02:28 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/KingCruel/article/details/47105909

JavaScript 专栏收录该内容

51 篇文章

订阅专栏

本文深入探讨了数据驱动在前端开发中的应用，包括如何利用数据优化用户体验、提高开发效率及实现动态响应式布局等内容。

页面文件

@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/jquery/jquery.min.js"></script>
    <script src="~/jquery/jquery.easyui.min.js"></script>

    <link href="~/jquery/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/jquery/themes/icon.css" rel="stylesheet" />
    <link href="~/jquery/themes/color.css" rel="stylesheet" />
    <link href="~/jquery/demo.css" rel="stylesheet" />
</head>
<body>
    <script type="text/javascript">
        $(function () {
            GetNation();

            var $dg = $("#tbUsers");
            var editRow = undefined; //定义全局变量：当前编辑的行

            $('#tbUsers').datagrid({
                title: 'My Title',
                //width: 500,
                //height: 350,
                method: 'post',
                dataType: 'json',
                url: '@Url.Action("GetData", "EasyUITest")',
                loadMsg: '数据加载中请稍后……',
                idField: "ID",//表明该列是一个唯一列
                striped: true,//设置为true将交替显示行背景
                iconCls: 'icon-save', //图标
                rownumbers: true,//显示行号的列
                singleSelect: false,//单选模式，设置为true将只允许选择一行
                showFooter: true, //定义是否显示行底（如果是做统计表格，这里可以显示总计等）。
                pagination: true,//显示分页
                pageSize: 10,//当设置分页属性时，初始化每页记录数
                pageList: [5, 10, 15, 20, 30, 50],
                pageNumber: 1,//当设置分页属性时，初始化分页码,打开页面即是第n页
                queryParams: {//当请求远程数据时，发送的额外参数
                    pageIndex: function () { return $('#tbUsers').datagrid('options').pageNumber; },
                    pageSize: function () { return $('#tbUsers').datagrid('options').pageSize; }
                },
                columns: [[
                    { field: 'ck', checkbox: true },
                    //{
                    //    field: 'checked', formatter: function (value, rec, index) {
                    //        return '<input type="checkbox" name="DataGridCheckbox" onclick="testChk()">';
                    //    }
                    //},
                    { field: 'ID', title: 'ID', width: 100, sortable: true },
                    {
                        field: 'Name', title: 'Name', width: 100, sortable: true,
                    },
                    {
                        field: 'Age', title: 'Age', width: 100, sortable: true,
                        editor: { type: 'numberbox', options: { required: true, validType: ['integer', 'length[0,5]'] } }
                    },
                    {
                        field: 'Email', title: 'Email', width: 132, sortable: true,
                        editor: { type: 'validatebox', options: { required: true, validType: ['email', 'length[0,20]'] } }
                    },
                    {
                        field: 'Nation', title: '民族', width: 100, formatter: unitformatter,
                        editor: { type: 'combobox', options: { data: Nation, valueField: "value", textField: "text" } }
                    },
                    {
                        field: 'Address', title: '地址', width: 100, formatter: function (value, rowData, rowIndex) {
                            if (value == 0) {
                                return;
                            }
                            for (var i = 0; i < Address.length; i++) {
                                if (Address[i].value == value) {
                                    return Address[i].text;
                                }
                            }
                        },
                        editor: { type: 'combobox', options: { data: Address, valueField: "value", textField: "text" } }
                    },
                    {
                        field: 'opt', title: '操作', width: 100, align: 'center',
                        formatter: function (value, rec, index) {
                            if (rec.ID != undefined) {
                                var s = '<a href="#" mce_href="#" onclick="view(\'' + rec.ID + '\')">查看</a> ';
                                var e = '<a href="#" mce_href="#" onclick="edit(\'' + rec.ID + '\')">编辑</a> ';
                                var d = '<a href="#" mce_href="#" onclick="del(\'' + rec.ID + '\')">删除</a> ';
                                return s + e + d;
                            }
                        }
                    }
                ]],
                toolbar: [{
                    text: '添加', iconCls: 'icon-add', handler: function () {
                        //方法一:弹出层，添加
                        //addDataWin.window('open');

                        //方法二:底部添加行
                        $dg.datagrid('appendRow', {});
                        var rows = $dg.datagrid('getRows');
                        $dg.datagrid('beginEdit', rows.length - 1);//最后一行添加

                    }
                }, '-',
                {
                    text: '删除', iconCls: 'icon-remove', handler: function () {
                        //删除时先获取选择行
                        var rows = $('#tbUsers').datagrid("getSelections");
                        //选择要删除的行
                        if (rows.length > 0) {
                            $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                                if (r) {
                                    var ids = [];
                                    for (var i = 0; i < rows.length; i++) {
                                        ids.push(rows[i].ID);
                                    }
                                    //将选择到的行存入数组并用,分隔转换成字符串，
                                    //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
                                    alert(ids.join(','));
                                }
                            });
                        }
                        else {
                            $.messager.alert("提示", "请选择要删除的行", "error");
                        }
                    }
                }, '-',
                {
                    text: '修改', iconCls: 'icon-edit', handler: function () {
                        var row = $('#tbUsers').datagrid('getSelected');
                        if (row) {
                            var rowIndex = $('#tbUsers').datagrid('getRowIndex', row);
                            $('#tbUsers').datagrid('beginEdit', rowIndex);
                        }
                    }
                }, '-',
                {
                    text: '保存', iconCls: 'icon-save', handler: function () {
                        if ($(this).form("validate")) {
                            $.messager.alert("保存信息", "保存失败,请检查数据格式", "error");
                        }
                        else {
                            var rows = $('#tbUsers').datagrid('getRows');
                            for (var i = 0; i < rows.length; i++) {
                                $('#tbUsers').datagrid('endEdit', i);
                            }
                            if ($('#tbUsers').datagrid('getChanges').length) {
                                var inserted = $('#tbUsers').datagrid('getChanges', "inserted");
                                var deleted = $('#tbUsers').datagrid('getChanges', "deleted");
                                var updated = $('#tbUsers').datagrid('getChanges', "updated");

                                var effectRow = new Object();
                                if (inserted.length) {
                                    effectRow["inserted"] = JSON.stringify(inserted);
                                    alert("inserted");
                                }
                                if (deleted.length) {
                                    effectRow["deleted"] = JSON.stringify(deleted);
                                    alert("deleted");
                                }
                                if (updated.length) {
                                    effectRow["updated"] = JSON.stringify(updated);
                                    alert("updated");
                                }

                                $.post("@Url.Action("ReturnStatus", "EasyUITest")", effectRow, function (rsp) {
                                    if (rsp.status) {
                                        $.messager.alert("提示", "提交成功！");
                                        $('#tbUsers').datagrid('acceptChanges');
                                    }
                                }, "JSON").error(function () {
                                    $.messager.alert("提示", "提交错误了！");
                                });
                            } else {
                                alert('请选择编辑数据...');
                            }
                        }
                    }
                }, '-',
                {
                    text: '取消编辑', iconCls: 'icon-redo', handler: function () {
                        //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
                        editRow = undefined;
                        $('#tbUsers').datagrid("rejectChanges");
                        $('#tbUsers').datagrid("unselectAll");
                    }
                }, '-',
                {
                    text: '获取复选框的值', iconCls: 'icon-save', handler: function () {
                        var rows = $('#tbUsers').datagrid("getSelections");
                        if (rows) {
                            var ids = "";
                            $.each(rows, function () {
                                ids += (this.ID + ",");
                            });
                            if (ids != "") {
                                alert(ids.substring(0, ids.length - 1));
                            } else {
                                alert("Please choose...");
                            }
                        }
                    }
                }],
                rowStyler: function (index, row) {//返回样式，index：行索引，从0开始.row：对应于该行记录的对象。
                    if (row.ID == 2 || index == 5) {
                        return 'background-color:#6293BB;color:#ff0000;';
                    }
                },
                onClickRow: function (index, data) {
                    //var row = $('#tbUsers').datagrid('getSelected');
                    //if (row) {
                    //    alert("年龄:" + row.Age.toString() + "邮箱:" + row.Email);
                    //    $.messager.show({ title: 'information', msg: 'you select 1 row:' + row.ID });
                    //}
                },
                loadFilter: function (data) {
                    //返回过滤的数据显示。该函数需要一个参数'data'，表示原始数据。您可以更改源数据的标准数据格式。
                    //此函数必须返回标准数据对象中包含的“total”和“rows”的属性。
                    if (data.d) {
                        return data.d;
                    } else {
                        return data;
                    }
                },
                onBeforeLoad: function (param) {
                    //在请求载入数据之前触发，如果返回false将取消载入。
                },
                onLoadSuccess: function (data, param) {
                    //当数据加载成功时触发
                    //方法一：根据后台返回的json数据bool值的true或false,设置前台checkbox选择状态
                    //if (data) {
                    //    $.each(data.rows, function (index, item) {
                    //        if (item.IsTrue) {
                    //            $('#tbUsers').datagrid('checkRow', index);
                    //        }
                    //    });
                    //}

                    //方法二：根据字符串,设置前台checkbox选择状态
                    //if (data) {
                    //    var strValue = "0,1,2,4,6,8,9,10,12,14,20";
                    //    var items = strValue.split(',');
                    //    if (items.length > 0 && strValue != "") {
                    //        $.each(data.rows, function (index, item) {
                    //            $.each(items, function (indexStr, val) {
                    //                if (val == item.ID) {
                    //                    $('#tbUsers').datagrid('checkRow', index);
                    //                }
                    //            })
                    //        });
                    //    }
                    //}
                },
                onLoadError: function (data, param) {
                    //加载远程数据发生某些错误时触发
                },
                onBeforeEdit: function (index, row) {
                    row.editing = true;
                    $('#tbUsers').datagrid('refreshRow', index);
                },
                onAfterEdit: function (index, row) {
                    row.editing = false;
                    $('#tbUsers').datagrid('refreshRow', index);
                },
                onCancelEdit: function (index, row) {
                    row.editing = false;
                    $('#tbUsers').datagrid('refreshRow', index);
                }
            });

            addDataWin = $('#addData-window').window({
                title: '添加数据',
                left: '35%',
                top: '35%',
                modal: true,
                closed: true,
                cache: false,
                minimizable: false,
                maximizable: false,
                collapsible: false,
                shadow: false
            });
        });

        function view(id) {
            alert("view:" + id.toString());
        }

        function edit(id) {
            alert("edit:" + id.toString());
        }

        function del(id) {
            alert("del:" + id.toString());
            $.messager.confirm('确认', '确认删除?', function (row) {
                if (row) {
                    var selectedRow = $('#tbUsers').datagrid('getSelected');  //获取选中行
                    //$.ajax({
                    //    url: '',
                    //    success: function () {
                    //        alert('删除成功');
                    //    }
                    //});
                    $('#tbUsers').datagrid('deleteRow', id);
                }
            })
        }
        function testChk() {
            var row = $('#tbUsers').datagrid('getSelected');
            if (row) {
                alert("年龄:" + row.Age.toString());
            }
        }

        var Address = [{ "value": "1", "text": "CHINA" }, { "value": "2", "text": "USA" }, { "value": "3", "text": "Koren" }];
        var Nation = [];

        function GetNation() {
            $.ajax({
                url: '@Url.Action("ReturnNation", "EasyUITest")',
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (data) {
                    var obj = data.Data;
                    if (obj != undefined) {
                        Nation = obj;
                    }
                }
            });
        }

        function unitformatter(value, rowData, rowIndex) {
            if (value == 0) {
                return;
            }
            for (var i = 0; i < Nation.length; i++) {
                if (Nation[i].value == value) {
                    return Nation[i].text;
                }
            }
        }
    </script>

    <table id="tbUsers"></table>
    <div id="addData-window" title="添加数据" style="width:510px;height:300px;"></div>
    
</body>
</html>

Controller控制器

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class EasyUITestController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult JQTest()
        {
            return View();
        }

        public JsonResult GetData(int pageIndex, int pageSize)
        {
            List<User> list = new List<User>();
            for (int i = 0; i <= 20; i++)
            {
                User model = new User();
                model.ID = i;
                model.Name = "Name" + i.ToString();
                model.Age = i;
                model.Email = "email" + i.ToString() + "@163.com";
                model.Address = "2";
                model.Nation = "6";
                if (i % 2 == 0)
                    model.IsTrue = true;
                else
                    model.IsTrue = false;
                list.Add(model);
            }

            List<Footer> footer = new List<Footer>();
            for (int j = 1; j <= 3; j++)
            {
                Footer m = new Footer();
                m.Name = "Total:" + j.ToString();
                m.Age = 100 + j;
                footer.Add(m);
            }
            --pageIndex;
            int topNum = 0;
            if (pageIndex > 0)
                topNum = pageIndex * pageSize;

            JsonResult json = new JsonResult
            {
                Data = new
                {
                    total = list.Count(),
                    rows = list.Skip(topNum).Take(pageSize),
                    footer = footer.ToList()
                }
            };
            return Json(json.Data, JsonRequestBehavior.AllowGet);
        }

        public JsonResult ReturnNation()
        {
            List<Nation> list = new List<Nation>();

            for (int i = 1; i <= 10; i++)
            {
                Nation model = new Nation();
                model.value = i;
                model.text = "民族" + i.ToString();
                list.Add(model);
            }

            JsonResult json = new JsonResult
            {
                Data = new
                {
                    Data = list.ToList()
                }
            };
            return Json(json.Data, JsonRequestBehavior.AllowGet);
        }

        public JsonResult ReutrnString()
        {
            string str = "[{\"id\":\"1\",\"name\":\"a\"},{\"id\":\"2\",\"name\":\"b\"},{\"id\":\"3\",\"name\":\"c\"}]";
            return Json(str, JsonRequestBehavior.AllowGet);
        }

        public JsonResult ReturnStatus()
        {
            string result = Request.Form[0];
            var list = JsonConvert.DeserializeObject<List<User>>(result);

            JsonResult json = new JsonResult
            {
                Data = new
                {
                    status = true
                }
            };
            return Json(json.Data, JsonRequestBehavior.AllowGet);
        }
    }

    public class User
    {
        public int ID { get; set; }

        public string Name { get; set; }

        public int Age { get; set; }

        public string Email { get; set; }

        public string Address { get; set; }

        public string Nation { get; set; }

        public bool IsTrue { get; set; }
    }

    public class Nation
    {
        public int value { get; set; }

        public string text { get; set; }
    }

    public class Footer
    {
        public string Name { get; set; }

        public int Age { get; set; }
    }
}