LayUI # 数据表数据获取

我就是我 2023-07-10 12:48 2阅读 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
    }

运行样式：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2MzEzNTc1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2MzEzNTc1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200302162808953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2MzEzNTc1,size_16,color_FFFFFF,t_70