精华内容
下载资源
问答
  • C#后端操作LayUI数据表格

    千次阅读 2020-05-30 10:42:42
    C#后端操作LayUI数据表格 准备工作 首先大家看看上图,这时用layui做的一个数据表格,界面非常流畅,下面具体说说这个是怎么实现的。 首先我们去layui官网https://www.layui.com/demo/table.html,这就是我们将要...

    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
                };
            }
    
    

    上面有这么一段代码

    List AI = Ac.ArtPage(page.Value, limit, out pInfo);
    这段就是我们将数据库查询到的数据进行分页查询存到list里

    最后我们进行测试一下,数据呈现正确,分页也好使。在这里插入图片描述

    红豆艺文网.这是MUI框架做的前台和layui做的后台的一个项目

    展开全文
  • layui前端布局, C#MVC后端调用数据写的数据表格,后端往前端传入json格式数据,动态绑定,局部刷新,分页,数据库用的petapoco,功能虽小,涉及的东西不少,可以研究研究,只需将web.config里的服务器地址的...
  • 这也是后端最反感的,layui上的操作基本上都可以直接对接数据接口进行操作,layui是专门面向后端开发者的框架,简洁,大方,美观,实用*。 **1.数据表格对接** 多选,增删改查,自动获取行id元素,排序功能,分页都...
      对于大部分后端来说,前端都是易如反掌了。
    

    尤其是在中小型项目中,是网站后台,如果给前
    端做费时费力,数据对接等错乱复杂。而layui就
    是专门给后端解决这些问题的,而且layui框架不
    需要将你的时间放在ui或布局等方面。这也是后
    端最反感的,layui上的操作基本上都可以直接
    对接数据接口进行操作,layui是专门面向后端
    开发者的框架,简洁,大方,美观,实用。

    1.数据表格对接多选,增删改查,自动获取行id元素,排序功能,分页都是现成对接就可以用
    在这里插入图片描述

    1. layui 是基于dom的操作,里面有引用jquery,框架属于轻量级框架,对于我们只要写一写 jquery中 ajax 就完事
      3.内容丰富,网站后台一般也不需要一些轮播图什么的,而且功能丰富主要面向后端增删改查
      在这里插入图片描述
      4.学习方便,文档齐全,而且官网示例左侧看代码,可以直接从示例中复制到本地,3天便可学会
      在这里插入图片描述
    展开全文
  • 网页设计框架 bootstrap与layUI对比 layui是国人开发的一套框架,2016年出来的,现在已更新到2.X版本了。比较新,轻量级,样式简单好看。 bootstrap 相对来说是比较成熟的一个框架,现在...layui是提供给后端开发人...

    网页设计框架

    bootstrap与layUI对比

    • layui是国人开发的一套框架,2016年出来的,现在已更新到2.X版本了。比较新,轻量级,样式简单好看。
    • bootstrap 相对来说是比较成熟的一个框架,现在已经更新到4.X版本。是一个很成熟的框架,这个大部分人一般都用过。
    • layui 其实更偏向与后端开发人员使用,在服务端页面上有非常好的效果。
      适合做后台框架。layui是提供给后端开发人员最好的ui框架,基于DOM驱动,在实现前端交互上比较麻烦,页面的增删改查都需要查询DOM元素。所以在不需要交互的时候,用layui还是不错的。
    • bootstrap 在前端响应式方面做得很好,PC端和移动端表现都不错。做网站不错。
      如果是类似官网,且需要同时满足PC端和移动端效果,bs表现很好。但是如果是要交互的网站,比如商城之类,vue显然更好,前后端分离。

    安装与使用

    可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。
    layUI官网文档:https://www.layui.com/doc/
    地址:http://www.layui.com/

    下载完成后,可以看到如下架构:

    ├─css //css目录
     │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
      ├─laydate
      ├─layer
      └─layim
     └─layui.css //核心样式文件
    ├─font //字体图标目录
    ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
    │─lay //模块核心目录
     └─modules //各模块组件
    │─layui.js //基础核心库
    └─layui.all.js //包含layui.js和所有模块的合并文件
    

    layui后台模板下载地址:https://github.com/sentsin/layui/

    layer和echarts插件

    • layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。
    • 在中国可视化生态系统中,ECharts 通过提供方便丰富的可视化图表,极大缩短了用户与数据的距离。个人认为是最好用的可用来生成图表的插件。

    案例

    js文件引入:

    <script src="js/jquery-1.11.1.min.js"></script>
    <!-- 你必须先引入jQuery1.8或以上版本 -->
    <script src="js/layer/layer.js"></script>
    <script src="js/bootstrap.min.js"></script>
     <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>
    

    页面内容:

    <body>
        <button id="test2">Layer+Echarts构建弹出层折线图</button>
        <div id="speedChart" style="display: none;">
                      <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
                      <div id="speedChartMain" style="width: 600px; height: 400px;"></div>
                    </div>
        <div id="dfd">
          <span>Layer+Echarts构建弹出层折线图</span>
          <p>Layer+Echarts构建弹出层折线图</p>
        </div>
    </body>
    

    js脚本:

    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('speedChartMain'));
        option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
      },
      yAxis: {
     
        type: 'value'
      },
      series: [
        {
          name:'邮件营销',
          type:'line',
          stack: '总量',
          data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
          name:'联盟广告',
          type:'line',
          stack: '总量',
          data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
          name:'视频广告',
          type:'line',
          stack: '总量',
          data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
          name:'直接访问',
          type:'line',
          stack: '总量',
          data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
          name:'搜索引擎',
          type:'line',
          stack: '总量',
          data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        //弹出一个页面层
        $('#test2').on('click', function() {
          layer.open({
            title:'hello world',
            type: 1,
            shade: false,
            area: ['620px', '460px'],
            shadeClose: false, //点击遮罩关闭
            content: $("#speedChart")
          });
        });
      </script>
    

    预览:
    在这里插入图片描述
    当然以上是静态加载,我们平常使用最多的是异步加载,修改一下代码即可:

    <div id="speedChart" style="display: none;">
            <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
            <div id="speedChartMain" style="width: 600px; height: 400px;"></div>
    </div>
    $(document).ready(function() {
                option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:[]
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: []
                    };
    
                //按钮提交表单数据
                $("#subSpeed").click(function(){
                    // 基于准备好的dom,初始化echarts实例
                    var myChart = echarts.init(document.getElementById('speedChartMain'));              
                    // 使用刚指定的配置项和数据显示图表。 
                    myChart.setOption(option);
                    var url=$("#speedFrom").attr("action");
                    var times=[];    //時間数组(实际用来盛放X轴坐标值)
                    var speeds=[];    //速度数组(实际用来盛放Y坐标值)
                    $.post(url,$("#speedFrom").serialize(),
                        function(data, status){
                            if(data!=null){
                                for (var i = 0; i < data.length; i++) {
                                    times.push(data[i].timeStamp);
                                    speeds.push(data[i].speed);
                                }
        //之前option中legend和 XAxis的data,series 为空,所以现在将数据填充进去
                                myChart.setOption({        //加载数据图表
                                    legend: {
                                        data:[$("#roads").val()]
                                    },
                                    xAxis: {
                                        data: times
                                    },
                                    series: [{
                                        // 根据名字对应到相应的系列
                                        name: $("#roads").val(),
                                        type:'line',
                                        data: speeds
                                    }]
                                });
                            }
    
                            layer.open({
                                title:'折线图',
                                type: 1,
                                shade: false,
                                area: ['620px', '460px'],
                                shadeClose: true, //点击遮罩关闭
                                content: $("#speedChart")
                            });
                    },"json");
                });
            });
    
    展开全文
  • 前端使用layui框架、后端使用flask框架,实现数据表格的按条件查询,实现添加、删除、修改数据同步回显到页面

    flask、layui实现前端后端数据交互,实现数据表格的添加、删除、修改、查询

    前端使用layui框架、后端使用flask框架,实现数据表格的按条件查询,实现添加、删除、修改数据同步回显到页面

    flask、layui实现前端后端数据交互完整代码下载
    前端框架Layui学习一:图标,按钮,导航菜单,选项卡,进度条
    前端框架Layui学习二:面板、布局、徽章、时间线、颜色选择器
    前端框架Layui学习三:表单元素、表单对象
    前端框架Layui学习四:滑块、评分、轮播、代码修饰器、时间和日期选择器
    前端框架Layui学习五:弹出层和数据表格

    一、查询页面与数据库表格样式

    展开全文
  • } } <script> layui.use(['layer', 'form'], function () { layer = layui.layer; form = layui.form; }); function subMit() { var username = $('#username').val(); var password = $('#password').val(); var ...
  • 它还将JSON数据交互和数据流的形式用于前端和后端数据交互。 该网站使用诸如CKEditor和Pagedlist之类的插件来优化网站; 它使用SQL Server设计数据库,并使用Linq实现数据库和网站之间的交互。
  • 主要为大家详细介绍了layUI实现前端分页和后端分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 后端与前端Ajax交互

    2018-11-10 19:55:37
    传对象集合用 json ; Ajax给外部赋值 需要设置 async:false, 填坑:必须注明[],有的地方会接收不到,后端接收数组 @RequestParam("ids[]") List<String> ids 一、多部分文件上传 ...
  • layui中table展示后端数据 1.下载layui的资源文件 https://www.layui.com/,下载解压后就是下面图里的文件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GQEjBBOm-1607652757756)(C:\...
  • layui后端分页

    千次阅读 2018-11-24 10:44:21
    使用layui后端分页要点前台jscontroller层service 实现类如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何...
  • 下面小编就为大家分享一篇Layui前后台交互数据获取java实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 适合后端开发者的前端样式框架LayUI笔记

    千次阅读 多人点赞 2020-10-18 19:51:44
    因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色大小。你可以通过 font-class 或 unicode 来定义不同的图标。 LayUi官网图标文档:...
  • layui 后端人员的学习

    2021-01-26 10:17:15
    文章目录layui1.图标方法1:字符实体方法2:使用样式2. 按钮颜色样式按钮尺寸图标按钮圆角按钮按钮组事件监听3. 导航栏菜单导航栏方向(水平)导航栏方向(垂直)导航栏内容:4. 选项卡默认风格简介风格卡片风格选项卡...
  • 今天小编就为大家分享一篇layui监听单元格编辑前后交互的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui框架属于前端,是前端框架。layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。介绍:layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,076
精华内容 430
关键字:

后端和layui交互