asp.net layui数据表格数据交互实现动态数据表格 asp.net 真分页 第一步

最新推荐文章于 2022-06-09 05:00:00 发布
最新推荐文章于 2022-06-09 05:00:00 发布
阅读量1.6k 收藏
点赞数
分类专栏： asp.net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fierceness901/article/details/115556144
版权

1.引用layui.css  layui.js

2.前台页面 AssetsListNew.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AssetsListNew.aspx.cs" Inherits="DQPA.PAManager.AssetsListNew" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <meta charset="utf-8">
    <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 href="css/style1.css" rel="stylesheet" />
    <link href="css/ace.min.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/codemirror.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="layui/css/layui.css" rel="stylesheet" />

    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="layui/layui.js"></script>
    <style>
        #anone1, #anone2:link {
            font-size: 14px;
            color: #fff;
            text-decoration: none;
        }
        #anone1, #anone2:visited {
            font-size: 14px;
            color: #fff;
            text-decoration: none;
        }
        #anone1, #anone2:hover {
            font-size: 14px;
            color: #fff;
            text-decoration: none;
        }
        /*link1,link1:link,link1:visited,link1:hover{font-size:14px;color:#fff;text-decoration: none;}*/
    </style>
</head>
<body>
    <form id="form1" class="layui-form pagediv" runat="server" style="margin-top: 5px">

        <div class="search_style">
            <ul class="search_content clearfix" style="padding-left: 2rem;">
                <li>
                    <label class="l_f">导入：</label>
                    <span class="add_name" style="float: right;">
                        <a href="AssetsListNew.aspx?action=down" id="anone1" class=" layui-btn ">下载模板</a>
                    </span>

                    <li>
                        <input type="file" id="fileUpload" runat="server" class="btn btn-warning" style="background-color: #abbac3!important; border-color: #abbac3;" />
                    </li>
                <li>
                    <button type="submit" class=" layui-btn" runat="server" onserverclick="btnImport_Click">导入</button>
                </li>
            </ul>
        </div>
        <div class="search_style">
            <ul class="search_content clearfix" style="padding-left: 2rem;">
                <li>
                    <label class="l_f">搜索项：</label>
                    <span class="add_name" style="float: right;">
                        <select id="sSearch" runat="server">
                            <option value="">请选择</option>
                            <option value="Number">编号</option>
                            <option value="type">类型</option>
                            <option value="brand">品牌</option>
                            <option value="BelongName">使用人</option>
                        </select>
                    </span>
                    <input type="text" hidden="hidden" runat="server" id="hidSearch" /></li>
                <li>
                    <input type="text" runat="server" id="txtCondition" class="layui-input" placeholder="输入搜索值" οnkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" οnpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" οncοntextmenu="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" autocomplete="off" style="width: 180px" /></li>
                <li>
                    <label class="l_f">购买时间：</label>
                </li>
                <li>
                    <input class="layui-input " id="start" runat="server" style="margin-left: 10px;" readonly="readonly" placeholder="开始时间" autocomplete="off" />
                </li>
                <li>
                    <label class="l_f">&nbsp&nbsp&nbsp&nbsp&nbsp---</label>
                </li>
                <li>
                    <input class="layui-input " id="end" runat="server" style="margin-left: 10px;" readonly="readonly" placeholder="结束时间" autocomplete="off" />
                </li>
                <li>
                    <button class="layui-btn" type="button" id="btnSearch" οnclick="searchList()"><i class="layui-icon">&#xe615;</i>查询</button>
                    <a href="AssetsListNewAdd.aspx" id="anone2" class="layui-btn"><i class="layui-icon">&#xe608;</i>新增</a>
                    <%--<button class="layui-btn" data-type="reload"><i class="layui-icon">&#xe608;</i>添加</button>--%>
                </li>
                <%--<li style="width: 90px;">
                                <button type="submit" id="btnSearch" class="btn_search">查询</button></li>--%>
            </ul>
        </div>
        <script type="text/javascript">
            function searchList() {
                if ($("#start").val() != null && $("#end").val() != null) {
                    const _PlanEndTime = new Date($("#start").val());
                    const _PlanStartTime = new Date($("#end").val());
                    if (_PlanEndTime.getTime() > _PlanStartTime.getTime()) {
                        alert("开始时间不能大于结束时间!");
                        return false;
                    }
                }
                salesf(encodeURI('AssetsListNew.aspx?action=list&selectc=' + $("#sSearch").val() + '&txtselect=' + $("#txtCondition").val() + '&start=' + $("#start").val() + '&end=' + $("#end").val() + ''));
            }
        </script>
        <%--<script type="text/html" id="toolbarDemo">
            <div class="layui-inline" style="float: right">
                <a class="layui-btn layui-btn-sm" lay-event="search" style="text-decoration: none"><i class="layui-icon">&#xe615;</i>查询</a>
                <a class="layui-btn layui-btn-sm" lay-event="add" style="text-decoration: none"><i class="layui-icon">&#xe608;</i> 添加</a>
                <a class="layui-btn layui-btn-sm" lay-event="delele" style="display: none;"><i class="layui-icon">&#xe601;</i> 导出</a>
            </div>
        </script>--%>
        <table class="layui-hide" id="test" lay-filter="demo"></table>
        <div id="laypage" style="float: right;"></div>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="make" data-type="auto" style="margin-left: 0; text-decoration: none;">二维码</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit" data-type="auto" style="margin-left: 0; text-decoration: none;">修改</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" style="margin-left: 0; text-decoration: none;" lay-event="del">删除</a>
        </script>
        <script type="text/javascript">
            var sortName = "id";
            var sortType = "desc";
            var pages = 1;
            var rows = 10;
            var total;    //总条数
            var title;
            var amtype;

            $(document).ready(function () {
                salesf('AssetsListNew.aspx?action=list');
                layui.use('laydate', function () {
                    var laydate = layui.laydate;
                    //自定义格式
                    laydate.render({
                        elem: '#start',
                        format: 'yyyy-MM-dd',
                        trigger: 'click'    //日期框只能点击选择，不能手动输入
                    });
                    laydate.render({
                        elem: '#end',
                        format: 'yyyy-MM-dd',
                        trigger: 'click'    //日期框只能点击选择，不能手动输入
                    });
                });
            });

            //salesf('table.aspx?action=list');
            function salesf(url) {
                layui.use(['table', 'laypage', 'form', 'layer'], function () {
                    var table = layui.table,
                        laypage = layui.laypage,
                        form = layui.form,
                        layer = layui.layer;

                    var tableOptions = {
                        elem: '#test'
                        , url: url
                        , height: 470
                        //, toolbar: '#toolbarDemo'
                        , id: 'idTest'
                        , defaultToolbar: []
                        , method: 'POST' //方式
                        , page: false //是否分页
                        , where: {
                            page: pages,
                            rows: rows,
                            sort: sortName,
                            order: sortType
                        } //请求后端接口的条件，该处就是条件错误点，按照官方给出的代码示例，原先写成了 where: { key : { type: "all" } }，结果并不是我想的那样，如此写，key 将是后端的一个类作为参数，里面有 type 属性，如果误以为 key 是 Layui 提供的格式，那就大错特错了
                        , cols: [[
                            { field: 'row', width: 80, title: '序号', sort: true }
                            , { field: 'number', width: 120, title: '资产编号' }
                            , { field: 'type', width: 80, title: '类型', sort: true }
                            , { field: 'brand', width: 80, title: '品牌' }
                            , { field: 'ismac', width: 80, title: 'MAC' }
                            , { field: 'videocard', title: '显卡' }
                            , { field: 'ram', width: 80, title: '内存', sort: true }
                            , { field: 'rigiddisk', width: 80, title: '硬盘', sort: true }
                            , { field: 'cpu', width: 80, title: 'CPU' }
                            , { field: 'purchasetime1', width: 120, title: '购买时间', sort: true }
                            , { field: 'monetary', minWidth: 120, title: '购买金额' }
                            , { field: 'size', width: 80, title: '尺寸', sort: true }
                            , { field: 'department', width: 120, title: '部门' }
                            , { field: 'belongname', width: 80, title: '使用人' }
                            , { field: 'position', title: '位置', minWidth: 150, sort: true }
                            , { field: 'prodirection', width: 80, title: '产品去向', sort: true }
                            , { field: 'sellingprice', minWidth: 120, title: '产品已售金额' }
                            , { field: 'remark', width: 135, title: '产品去向备注', sort: true }
                            , { field: 'auditter', fixed: 'right', title: '操作', minWidth: 180, align: 'center', templet: '#barDemo' }
                        ]]
                        , parseData: function (res) {
                            return {
                                "code": "0",
                                "msg": "cg",
                                "count": res.total,
                                "data": res.rows
                            };
                        }
                        , done: function (res, curr, count) {
                            laypage.render({
                                elem: 'laypage',
                                count: count,
                                curr: pages,
                                limit: rows,
                                layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
                                jump: function (obj, first) {
                                    if (!first) {
                                        pages = obj.curr;
                                        rows = obj.limit;//$("#sSearch option:selected").val()
                                        salesf(encodeURI('AssetsListNew.aspx?action=list&selectc=' + $("#sSearch").val() + '&txtselect=' + $("#txtCondition").val() + '&start=' + $("#start").val() + '&end=' + $("#end").val() + ''));
                                    }
                                }
                            });
                            form.render("select");
                        }

                    };
                    table.render(tableOptions);

                    //监听行工具条
                    table.on('tool(demo)', function (obj) {
                        var data = obj.data;
                        if (obj.event === 'make') {
                            location.href = "AssetsListNew.aspx?action=make&id=" + data.id + "";
                            //alert("可以生成" + data.id + "的二维码")
                            //make(table, obj.data.id);
                            //layer.msg('ID：' + data.id + ' 的查看操作');
                        } else if (obj.event === 'del') {
                            del(table, obj.data.id);
                        }
                        else if (obj.event === 'edit') {
                            location.href = "AssetsListNewAdd.aspx?action=edit&id=" + data.id + "";
                            //EditData1('auto', "id", "修改", "PAManager/AssetsAdd.aspx?action=edit&id=" + data.id + "", '75%', '80%');
                            //EditData1('auto', "id", "修改", "../DiBaoGuanLi/60_Add.aspx?idcard=" + data.idcard + "", '75%', '80%');
                        }
                    });

                    //单条删除操作
                    function del(table, id) {
                        if (confirm("确定删除?")) {
                            $.post("AssetsListNew.aspx?action=delete&id=" + id, {}, function (data) {

                                var res = JSON.parse(data);
                                if (res.code == 0) {
                                    alert("删除成功!");
                                    salesf(encodeURI('AssetsListNew.aspx?action=list&selectc=' + $("#sSearch").val() + '&txtselect=' + $("#txtCondition").val() + '&start=' + $("#start").val() + '&end=' + $("#end").val() + ''));
                                }
                                else {
                                    alert("删除失败!");
                                    salesf(encodeURI('AssetsListNew.aspx?action=list&selectc=' + $("#sSearch").val() + '&txtselect=' + $("#txtCondition").val() + '&start=' + $("#start").val() + '&end=' + $("#end").val() + ''));
                                }
                            });
                        }
                    }

                    //单条生成二维码操作
                    function make(table, id) {
                        $.post("AssetsListNew.aspx?action=make&id=" + id, {}, function (data) {
                            //var res = JSON.parse(data);
                            //if (res.code == 0) {
                            //    alert("成功生成二维码!");
                            //    /*salesf(encodeURI('AssetsListNew.aspx?action=list&selectc=' + $("#sSearch").val() + '&txtselect=' + $("#txtCondition").val() + '&start=' + $("#start").val() + '&end=' + $("#end").val() + ''));*/
                            //}
                            //else {
                            //    alert("生成二维码失败!");
                            //    /*salesf(encodeURI('AssetsListNew.aspx?action=list&selectc=' + $("#sSearch").val() + '&txtselect=' + $("#txtCondition").val() + '&start=' + $("#start").val() + '&end=' + $("#end").val() + ''));*/

                            //};
                        })
                    }

                    //添加人员弹框
                    function EditData1(offset, id, title, src, height, width) {
                        top.layer.config({
                            extend: 'myskin/style.css', //加载新皮肤
                            skin: 'demo-class' //一旦设定，所有弹层风格都采用此主题。
                        }).open({
                            type: 2
                            , offset: offset //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                            , id: id //防止重复弹出
                            , title: title
                            , area: [height, width]

                            , content: src
                            //, btn: '关闭全部'
                            , btnAlign: 'c' //按钮居中
                            , shade: 0 //不显示遮罩
                            , yes: function () {
                                parent.layer.closeAll()
                            }
                            , cancel: function (index, layero) {

                                salesf('table.aspx?action=list');
                            }
                        });
                    }

                    头工具栏事件
                    //table.on('toolbar(demo)', function (obj) {

                    //    switch (obj.event) {
                    //        case 'search':


                    //            salesf(encodeURI('table.aspx?action=list&selectc=' + $("#sSearch option:selected").val() + '&txtselect=' + $("#txtCondition").val() + '&start=' + $("#start").val() + '&end=' + $("#end").val() + ''));

                    //            break;
                    //        case 'add':
                    //            window.location.href = "tableadd.aspx";
                    //            break;
                    //        //case 'delele':
                    //        //    //var data = checkStatus.data;

                    //        //    var delids = "";
                    //        //    $.each(data, function (i, item) {
                    //        //        if (delids) {
                    //        //            delids += ","
                    //        //        }
                    //        //        delids += item.amid;
                    //        //    });
                    //        //    if (!delids) {
                    //        //        alert("没有选中的数据");
                    //        //        return false;
                    //        //    }

                    //        //    var r = confirm("确定要删除记录吗?")
                    //        //    if (r == true) {
                    //        //        $.post("table.aspx?action=delete&delids=" + delids, {}, function (data) {
                    //        //            if (data.d != "") {
                    //        //                salesf('table.aspx?action=load&type=' + typeval);
                    //        //            } else {
                    //        //            }
                    //        //        });
                    //        //    }
                    //        //    break;
                    //    };
                    //});
                });
            }
        </script>
    </form>
</body>
</html>

 

Gentleness901
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET 使用Layui 显示后台数据
遇见--专栏
12-27 1395
此篇文字为项目代码，中间有包含未知引用的类不会提供，这里只是告诉大家asp.net 使用Layui的基本流程，
asp.net 数据访问层 存储过程分页语句
01-20
在ASP.NET开发中，数据访问层（Data Access Layer, DAL）是应用程序中负责与数据库交互的部分，它封装了对数据库的直接操作，提高了代码的可重用性和安全性。在处理大数据集时，分页是一种非常重要的优化手段，因为...
ASP.NET MVC+Layui数据分页的实现和说明
01-08
前言      在学习过程中，因为对前端开发并不是很深入，学习的前端框架也很少:Bootstrap、Echarts、EasyUI等。当接触到Layui时，认识到它是一套强大的模块化前端框架，使用Layui提供的各种组件，可以帮助我们迅速搭建前端界面。对于一些非专业前端开发者、服务端开发者、以及小型后台管理系统开发者来说，Layui还是比较合适的。它的上手非常容易，官方API也十分详细，但是在我初次使用这个框架的时候，还是遇到了很多坑，一个个踩过之后才能完美避坑。     这里记录下使用Layui对数据进行分页展示的实现    前端:Layui框架 后台:ASP.NET MVC    效果图:(
asp.net layui数据表格数据交互实现动态数据表格 asp.net 真分页 第四步
Fierceness901的博客
04-09 538
5.ADO 操作数据库类sqlhelper.cs using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Text; using System.Threading.Tasks; namespace DQPA.DAL { public class SqlHelper { s.
asp.net layui数据表格数据交互实现动态数据表格 asp.net 真分页 第三步
Fierceness901的博客
04-09 301
4.真分页操作Dal BaseDalNew.cs /// <summary> /// 分页查询 /// </summary> /// <param name="tableName"></param> /// <param name="getFields"></param> /// <param name="orderName"></..
.net向layui表格传递model数据
计算机系秃头少女的博客
06-09 513
C# MVC+EF+LayUI，layui表格获取后端model数据。
asp.net 动态生成二维码加文字描述或者二维码加logo
Fierceness901的博客
04-09 714
1.添加nuget包管理中的引用ZXing.Net或QrCode.Net或ThoughtWorks.QRCode 2.前台页面AssetsListNew.aspx //监听行工具条 table.on('tool(demo)', function (obj) { var data = obj.data; if (obj.event === 'make') { ..
layui 使用问题合集（asp.net后台）
weixin_38404507的博客
03-02 2220
form表单提交后页面出现迅速刷新问题 出现这个问题请先检查你是否使用了标签，如果使用了，将form标签换成div标签即可。参考博客 个人感觉（我也是个小学弟），layui前端的构建要按照文档来做，尽量都用div标签。 如何调用layui.use()内部定义的函数？ 在定义函数的时候，使用window.funcName = function(){}; 的方法定义函数。 ...
ASP.NET与Echarts实现前后端数据的交互
04-01
在"ASP.NET与Echarts实现前后端数据的交互"这个主题中，核心是利用ASP.NET后端处理数据，并通过Echarts前端展示。具体步骤如下： 1. **后端数据处理**：在ASP.NET中，你可以使用ADO.NET或Entity Framework等库来...
asp.net 动态表单之数据分页
10-29
ASP.NET 动态表单中的数据分页是一个关键的网页开发技术，特别是在处理大量数据时，为了提高用户体验和页面加载速度。在这个场景中，我们通常会遇到如何展示学生考试成绩的问题，不同学生或教师需要看到不同的成绩...
asp.net图书管理系统，layui mvc实现
06-23
asp.net图书管理系统，使用layui搭建后台，mvc模式，实现了图书的增删改查操作，连接sqlserver数据库
ASP.NetCore+Layui 后台管理系统---数据库
09-01
ASP.NetCore+Layui 后台管理系统 完成数据库，包含用户表、权限表、登录记录等等 在sqlserver中打开直接执行即可使用
layui实现数据表格table分页功能（ajax异步）
10-16
主要为大家详细介绍了layui实现数据表格table分页功能、异步加载，表格渲染，含条件查询，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于layui数据表格以及传数据的方式
10-18
在本文中，我们将深入探讨如何基于layui框架实现数据表格及数据传输的方式。layui是一个轻量级的前端组件库，提供了一系列美观且实用的UI组件，包括数据表格，它非常适合用于展示和操作数据。 首先，我们来看一下...
C#.NET layui表单提交问题
weixin_45062076的博客
09-23 426
layui表单提交 input假按钮 onclick 点击 asp:Button 将asp:Button隐藏 //js/jq function Check() { $("[id$='btn']").click(); } //前台 if(event.keyCode==13){return false;}防止input回车提交表单 <input type="button" id="btn" runat="server" value="保存" onclick="C
asp.net mvc+jquery+layui页面数据表的显示和分页查询
学点的CSDN博客
04-07 1225
开发工具与关键技术：Visual Studio 与javascript和C# 作者：黄灿 撰写时间：2019.4.7 以我刚入门正在学习的一个重庆邮电大学的一个项目来演示 学院信息维护页面的数据查询以及显示到页面中！ 第一步：在javascript中使用layui这个插件（plugin）来创建一个动态数据表（table），申明layer和layuiTable这两个变量，方便全局变量使用，再申明一个...
asp.net+layui 简易邮箱系统
Coder
04-30 2767
下载地址：https://download.csdn.net/download/MrTraum/13951110
Layui数据表格获取数据库数据
qq_43539633的博客
02-09 2712
后端代码 @ResponseBody public StringBuilder findTeaAccountJson() throws IOException { List<Account> accountList = teaManagerSer.findTea();//获取List集合数据 String json = JSON.toJSONString(accountList);//将list转换成json数据 StringBuilder
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值