LayUI # 数据表数据获取

最新推荐文章于 2023-04-15 17:01:47 发布

qq_16313575

最新推荐文章于 2023-04-15 17:01:47 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_16313575/article/details/104614075

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test8.aspx.cs" Inherits="Forms_Chase_test8" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="../layui/css/layui.css" rel="stylesheet" />
    <link href="../H-ui_v3.1.3.2/static/h-ui/css/H-ui.css" rel="stylesheet" />
    <script src="../Content/initWebConfig02.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../Content/jquery-1.11.3.js" type="text/javascript"></script>
    <title>数据表数据获取</title>
</head>
<body>
    <form id="form1" runat="server">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header ">总装车间点检项</div>
                <div class="layui-card-body">
                    <table class="layui-table" id="cCheckItem"></table>
                </div>
            </div>
        </div>
        <input type="button" onclick="test()" value="立即提交"/>
    </form>

    <%--开关按钮 Start--%>
    <script type="text/html" id="switchRelated">
     <input type="checkbox" name="lock" value="{{d.isRelated}}"  lay-skin="switch" lay-filter="RelatedDemo" lay-text="是|否" {{d.isRelated == "是" ? 'checked' : '' }}/>
    </script>
    <script type="text/html" id="switchjudgement">
      <input type="checkbox" name="judgement" value="{{d.judgement}}" lay-skin="switch" lay-text="合格|不合格" lay-filter="judgementDemo" {{ d.judgement == "合格" ? 'checked' : '' }}/>
    </script>
    <%--开关按钮 End--%>

    <%--数据绑定 Start--%>
    <script>
        layui.use(['layer'], function () {
            var $ = layui.jquery,
                layer = layui.layer
            $.ajax({
                url: '../From_JSON/test8.json',
                data: JSON.stringify({
                    trialId: 1001
                }),
                type: "Get",
                async: true,
                dataType: "json",
                contentType: "application/json",
                beforeSend: function () {
                    layer.load(2);
                },
                complete: function (data) {
                    layer.closeAll('loading');
                },
                success: function (data) {
                    //layer.alert(JSON.stringify(data));
                    //返回数据样式：{"flag":1,"message":"查询成功","dataList":[{"name":"1试装前","child":[[{"arId":17,"trialId":"1001","difference":"1试装前","itemName":"1.相似件防错（标识、位置等.","subItemName":"与其他配置区分","isRelated":"是","judgement":"合格","multipleJudgement":"不合格","isLoading":"不装车","receiptDescribe":null,"receiptUserId":"GW00106314","receiptUserName":"陈皓","receiptTime":"2020-03-02 13:16:00","reserve1":null,"reserve2":"不合格原因","reserve3":null}],[{"arId":23,"trialId":"1001","difference":"1试装前","itemName":"项目2","subItemName":"子项目1","isRelated":"是","judgement":"合格","multipleJudgement":"不合格","isLoading":"不装车","receiptDescribe":null,"receiptUserId":"GW00106314","receiptUserName":"陈皓","receiptTime":"2020-03-02 13:16:00","reserve1":null,"reserve2":"不合格原因","reserve3":null}],[{"arId":29,"trialId":"1001","difference":"1试装前","itemName":"项目3","subItemName":"子项目1","isRelated":"否","judgement":"合格","multipleJudgement":"不合格","isLoading":"不装车","receiptDescribe":null,"receiptUserId":"GW00106314","receiptUserName":"陈皓","receiptTime":"2020-03-02 13:16:00","reserve1":null,"reserve2":"不合格原因","reserve3":null}]]},{"name":"3试装后","child":[[{"arId":20,"trialId":"1001","difference":"3试装后","itemName":"1.相似件防错（标识、位置等1.相似件防错（标识、位置等..","subItemName":"与其他车型区分与其他车型区分与其他车型区分","isRelated":"是","judgement":"不合格","multipleJudgement":"不合格","isLoading":"不装车","receiptDescribe":"1315不合格","receiptUserId":"GW00106314","receiptUserName":"陈皓","receiptTime":"2020-03-02 13:16:00","reserve1":"1","reserve2":"不合格原因","reserve3":null}]]},{"name":"2试装中","child":[[{"arId":26,"trialId":"1001","difference":"2试装中","itemName":"项目1","subItemName":"子项目1","isRelated":"是","judgement":"不合格","multipleJudgement":"不合格","isLoading":"不装车","receiptDescribe":"1315不合格2","receiptUserId":"GW00106314","receiptUserName":"陈皓","receiptTime":"2020-03-02 13:16:00","reserve1":"2","reserve2":"不合格原因","reserve3":null}]]}],"count":3,"entity":null}
                    var tableData = data.dataList;
                    var tableCode = data.flag;
                    var tableMsg = data.message;
                    var tableCount = data.count;
                    var util;
                    layui.use(['jquery', 'layer', 'table', 'util'], function () {
                        var table = layui.table;
                        util = layui.util;
                        //方法级渲染
                        table.render({
                            elem: '#cCheckItem'
                        , cols: [[
                               { field: 'difference', title: '区分' },
                               { field: 'itemName', title: '项目', },
                               { field: 'subItemName', title: '子项目', },
                               { field: 'isRelated', title: '相关与否', templet: '#switchRelated' },
                               { field: 'judgement', title: '判定', templet: '#switchjudgement' }
                        ]]
                         , text: {
                             none: '暂无相关数据'
                         }
                         , data: tableData
                        });
                    });
                },
                //XMLHttpRequest对象为Ajax请求数据的载体，重中之重
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    var status = XMLHttpRequest.status;
                    var readyState = XMLHttpRequest.readyState;
                    layer.msg("网络错误：status:" + status + "，readyState:" + readyState
                        + "，textStatus:" + textStatus + ",errorThrown:" + errorThrown, {
                            icon: 5, anim: 6
                        });
                }
            });
        });
    </script>
    <%--数据绑定 End--%>

    <%--提交事件 Start--%>
     <script type="text/javascript">
        function test(){
            //layer.alert("您点击了按钮!");

            var jsonObj = [];
            $("[lay-id='cCheckItem'] tbody tr").each(function (i) { // 遍历 tr
                var jsonStr = "{";// json格式开始
                $(this).children('td').each(function (j) {  // 遍历 tr 的各个 td 
                    jsonStr += '"' + $(this).data('field') + '":' + '"' + $(this).text() + '",';
                });
                jsonStr = jsonStr.replace(/,{1}$/gi, '');// 删除最后的逗号
                jsonStr += "}";// //json格式结束
                jsonObj.push(jsonStr);

            });
            layer.alert(JSON.stringify(jsonObj));
            //console.log(jsonObj);
        }
    </script>
    <%--提交事件 End--%>
</body>
</html>

Json数据：

{
  "flag": 1,
  "message": "查询成功",
  "dataList": [
    {
      "arId": 17,
      "trialId": "1001",
      "difference": "1试装前",
      "itemName": "1.相似件防错（标识、位置等.",
      "subItemName": "与其他配置区分",
      "isRelated": "是",
      "judgement": "合格",
      "multipleJudgement": "不合格",
      "isLoading": "不装车",
      "receiptDescribe": null,
      "receiptUserId": "GW00106314",
      "receiptUserName": "陈皓",
      "receiptTime": "2020-03-02 13:16:00",
      "reserve1": null,
      "reserve2": "不合格原因",
      "reserve3": null
    },
    {
      "arId": 23,
      "trialId": "1001",
      "difference": "1试装前",
      "itemName": "项目2",
      "subItemName": "子项目1",
      "isRelated": "是",
      "judgement": "合格",
      "multipleJudgement": "不合格",
      "isLoading": "不装车",
      "receiptDescribe": null,
      "receiptUserId": "GW00106314",
      "receiptUserName": "陈皓",
      "receiptTime": "2020-03-02 13:16:00",
      "reserve1": null,
      "reserve2": "不合格原因",
      "reserve3": null
    },
    {
      "arId": 29,
      "trialId": "1001",
      "difference": "1试装前",
      "itemName": "项目3",
      "subItemName": "子项目1",
      "isRelated": "否",
      "judgement": "合格",
      "multipleJudgement": "不合格",
      "isLoading": "不装车",
      "receiptDescribe": null,
      "receiptUserId": "GW00106314",
      "receiptUserName": "陈皓",
      "receiptTime": "2020-03-02 13:16:00",
      "reserve1": null,
      "reserve2": "不合格原因",
      "reserve3": null
    }
  ],
  "count": 3,
  "entity": null
}

运行样式：

qq_16313575

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
LayUI # 数据表数据获取

前台代码：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test8.aspx.cs" Inherits="Forms_Chase_test8" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head...
复制链接

扫一扫