C#后端操作LayUI数据表格

最新推荐文章于 2024-07-20 10:10:38 发布

爱吃秋刀鱼的猫

最新推荐文章于 2024-07-20 10:10:38 发布

阅读量5.7k

点赞数 3

分类专栏： C#andMVC 文章标签： c# mvc 前端 json

本文链接：https://blog.csdn.net/qq_41227228/article/details/106437493

版权

C#andMVC 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

C#后端操作LayUI数据表格

准备工作

在这里插入图片描述
首先大家看看上图，这时用layui做的一个数据表格，界面非常流畅，下面具体说说这个是怎么实现的。
首先我们去layui官网https://www.layui.com/demo/table.html，这就是我们将要进行后端传入数据的界面。

在这里插入图片描述

新建项目

首先我们用vs2017新建一个mvc，然后新建一个类库core，在类库core里引入petapoco，添加system.configuration引用，两个实体类，一个分页实体类，一个文章信息实体类

///分页实体类
   public class PagedInfo
    {
        /// <summary>
        /// 当前页码
        /// </summary>
        public long CurrentPage { get; set; }
        /// <summary>
        /// 总页数
        /// </summary>
        public long TotalPages { get; set; }
        /// <summary>
        /// 总记录数
        /// </summary>
        public long TotalItems { get; set; }
    }

 public class ArtInfo
    {
    ///文章实体类
        public int Art_ID { get; set; }
        public string Art_Title { get; set; }
        public string Art_Aut { get; set; }
        public string Art_Con { get; set; }
        public string Art_Class { get; set; }
        public string Art_BigClass { get; set; }
        public string Art_img { get; set; }
        public long Art_Num { get; set; }
        public DateTime Art_Time { get; set; }
    }

然后在项目最外层的web.config的下面添加数据库连接串的代码。

<connectionStrings>
    <add name="ConnString" connectionString="Data Source=服务器地址;Initial Catalog=Abstract;Persist Security Info=True;User ID=数据库名;Password=数据库密码" providerName="System.Data.SqlClient" />
  </connectionStrings>

layui前端布局

以下是我写的布局，当然我们需要先引入layui.css以及layui.js，我这里用的布局页，其实都无所谓
在这里插入图片描述

我们可以看到，内容主体就这么点，获取你以前用的viewbag绑定数据，或者是ajax，在这里，layui这种绑定数据的方式我也不知道叫什么，反正传入json格式的数据就对了。

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>@ViewBag.Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js" charset="utf-8"></script>
    @*@RenderSection("Head", false)*@
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">红豆艺文网站后台</div>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item"><a href="/admin/index">文摘管理</a></li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <table class="layui-hide" id="test"></table>
        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            Copyright ©2020 From Beijing MR.Chen WorkRoom
        </div>
    </div>
</body>
</html>
<script>
    layui.use('element', function () {
        var element = layui.element;
    });
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/admin/ArtList'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: true //开启分页
            , cols: [[
                { field: 'Art_ID', title: 'ID', sort: true, width: 80 }
                , { field: 'Art_Title', title: '标题', } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , { field: 'Art_Aut', title: '作者', sort: true, width: 120 }
                , { field: 'Art_Con', title: '内容' }
                , { field: 'Art_Class', title: '文摘分类' }
                , { field: 'Art_BigClass', title: '分类' }
                , { field: 'Art_Time', title: '时间', sort: true, }
            ]]
        });
    });

</script>

好，我们布局好之后看看是啥样子的吧

在这里插入图片描述
我们可以看到以下异常

jquery.js:4 GET http://localhost:63639/admin/Jsons2?page=1&limit=10 404 (Not Found)

传到这个url同时还有两个数据，一个是page=1，一个是limit=10，这是什么意思呢，大概就是分页，在当前第一页，每页数据有十条的这个意思。

大体布局就是这样的，我们可以看到，在table.render读取数据这里有个url路径，类似于ajax，那就千篇一律了，反正都是json格式的数据，我们先写一段json试试好使不。

 public JsonResult Jsons2(int? page, int limit)
        {
            List<Hashtable> ht2 = new List<Hashtable>();
            if (!page.HasValue)
                page = 1;
            PagedInfo pInfo;
            List<ArtInfo> AI = Ac.ArtPage(page.Value, limit, out pInfo);
            for (int i = 0; i < AI.Count; i++)
            {
                Hashtable ht = new Hashtable();
                ht.Add("Art_ID", AI[i].Art_ID);
                ht.Add("Art_Title", AI[i].Art_Title);
                ht.Add("Art_Aut", AI[i].Art_Aut);
                ht.Add("Art_Con", AI[i].Art_Con);
                ht.Add("Art_Class", AI[i].Art_Class);
                ht.Add("Art_BigClass", AI[i].Art_BigClass);
                ht.Add("Art_Time", AI[i].Art_Time.ToString("yy-MM-dd HH:mm"));
                ht2.Add(ht);
            }
            Hashtable h3 = new Hashtable();
            h3.Add("code", "0");
            h3.Add("count", pInfo.TotalItems);
            h3.Add("data", ht2);
            return new JsonResult()
            {
                Data = h3,
            JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
        }

上面有这么一段代码