EasyUI入门，DataGrid（数据表格）

搭建EasyUI

1.进入官网，下载EasyUI的程序包。地址：http://www.jeasyui.com/download/list.php

2.先导入css样式，引入程序包

3.进入EasyUI程序入门

<1>第一次发现分页是如此简便

js代码

$(function () {

$('#dg').datagrid({
                url: '/Main/FenYe1',
                loadMsg: '请稍等，正在拼命加载...',
                fitColumns: false,//防止水平滚动
                rownumbers: true, //是否加行号
                pagination: true, //是否显式分页
                pageSize: 5, //页容量，必须和pageList对应起来，否则会报错
                pageNumber: 1, //默认显示第几页
                pageList: [5, 10, 15],//分页中下拉选项的数值
                checkOnSelect: true,
                selectOnCheck: true,
                //striped:true,//显示斑马线效果。
                frozenColumns: [[
                    {
                        field: 'id', title: '请选择..', width: 58, align: 'center',
                        checkbox: true
                    },
                    { field: 'name', title: '名称', width: 100 },
                ]],
                columns: [[
                   
                   
                    { field: 'sex', title: '性别', width: 100 },
                    { field: 'age', title: '年龄', width: 100 },
                    { field: 'dataTime', title: '记录时间', width: 150, align: 'center' },
                    { field: 'content', title: '个人介绍', width: 250, align: 'left' },

]],
            });

//导航栏
            $('#dg').datagrid({
                toolbar: [
                { text: '增加', iconCls: 'icon-add', handler: function () { addStu(); } }, '-',
                { text: '修改', iconCls: 'icon-edit', handler: function () { edittbUser(); } }, '-',
                { text: '删除', iconCls: 'icon-remove', handler: function () { deleteUser(); } }, '-',
                { text: '查看', handler: function () { } }, '-',
                { text: '刷新', iconCls: 'icon-reload', handler: function () { deviceInfoRefreshClick(); } }, '-',
                { text: '导出', iconCls: 'icon-save', handler: function () { $(dg).treegrid('reload'); } }, '-'],
            });

});

 Controller:

public ActionResult FenYe1(int rows, int page)
        {
            try
            {
                var Stu_List = db.Set<student>().OrderByDescending(a => a.dataTime).Skip(rows * (page - 1)).Take(rows).ToList();
                var json = new
                {
                    total = db.Set<student>().Count(),
                    rows = (from r in Stu_List
                            select new
                            {
                                id = r.id,
                                name = r.name,
                                sex = r.sex,
                                age = r.age,
                                dataTime = r.dataTime.ToString(),
                                content = r.content,

}).ToList(),

};

return Json(json);
            }
            catch (Exception ex)
            {
                FileOperateHelp.WriteFile("E:/ErrorLog333.txt", ex.Message);
                return Content("error");
            }
        }