【layui】数据表格templet不能向后台发送多次请求的解决办法

问题描述

数据表格的数据需要根据本数据表格的一些信息进行查找相关内容,如页面初始化的时候需要加载全部信息,全部信息包括id,但是还必须包括根据id查询出来的其它信息,这样做就会向后端发两次请求,但是layui的数据表格好像只能发一次。templet写了一个方法,请求后台的数据!发现请求不到。

图片
如下图,我想要根据年份和期数,查找缴费截图! 此时缴费截图和其它信息在数据库中不是一个表!
在这里插入图片描述

解决办法

后台:

layui的数据表格是把数据进行渲染,而不是渲染的时候加载数据,所以需要在后台一次性加载所有的信息!将图存到list里面!

	for (int i = 0; i < rr.Count; i++)
            {
                rr[i].PictureUrl = new List<string>();
                //一个人对应多个图片
                List<ScreenDTO> listScreen = getScreenPictureByidAndYear(rr[i].Id, rr[i].Contract_Year.ToString());

                for (int j = 0; j < listScreen.Count; j++)
                {
                    rr[i].PictureUrl.Add(listScreen[j].Contract_Url);
                }
            }

         //根据学生的id和年份查询缴费截图信息
        public List<ScreenDTO> getScreenPictureByidAndYear(string studentId, string screenYear)
        {
            var a = contract.getScreenPictureByidAndYear(studentId, screenYear);
            return a;
        }
前台:(只是部分代码)

前台遍历:

    <script id="showScreenhost" type="text/html">
        {{#  for(var i = 0; i < d.pictureUrl.length; i++) { }}
        <div style="margin:0 10px; display:inline-block !important; display:inline;  max-width:70px; max-height:50px;"><img style=" max-width:70px; max-height:50px;" src="{{d.pictureUrl[i]}}" /></div>
        {{# } }}
    </script>

数据表格对应的缴费截图:

{ field: 'sc_contract_copy_url', title: '缴费截图', align: 'center', templet: '#showScreenhost', width: 400}
### 回答1: layui数据表格可以展示嵌套数据,具体操作方法如下: 1. 定义数据模型:定义一个包含子级数据的嵌套数据结构,如下所示: ``` { "id": 1, "name": "分类一", "children": [ { "id": 101, "name": "子分类一" }, { "id": 102, "name": "子分类二" } ] } ``` 2. 定义数据表格:在HTML页面中定义一个数据表格,并设置表格的列属性和数据源,如下所示: ``` <table id="table" lay-filter="table"></table> <script> layui.use('table', function(){ var table = layui.table; table.render({ elem: '#table', cols: [[ {field:'id', title:'ID'}, {field:'name', title:'名称'}, {field:'children', title:'子分类', templet: '#childrenTpl'} ]], data: [/* 这里是数据源 */] }); }); </script> ``` 3. 定义子级数据模板:在HTML页面中定义一个用于展示子级数据的模板,并通过laytpl引擎实现渲染效果,如下所示: ``` <script type="text/html" id="childrenTpl"> {{# layui.each(d.children, function(index, item){ }} {{ item.name }} {{# }); }} </script> ``` 通过以上三个步骤,就可以实现在layui数据表格中展示嵌套数据的效果。同时,数据表格还支持自定义复杂的展示效果,例如树形数据展示、合并单元格等。 ### 回答2: Layui 是一个基于Web的前端开发框架,它完美支持数据表格的展示,还提供了一些实用组件,如弹框、日期选择器等。layui 数据表格可以嵌套展示数据,更加方便地展示相关数据,以下是关于 layui 数据表格展示嵌套数据的详细介绍。 Layui 数据表格支持多种数据格式,如果要嵌套展示数据,可以采用JSON格式,在 JSON 中使用数组来表示嵌套数据的结构,如下所示: ``` data = [ { id: 101, name: '张三', age: 25, sex: '男', address: { province: '广东', city: '深圳', district: '南山区' }, education: [ { school: '清华大学', major: '计算机科学与技术', degree: '本科' }, { school: '麻省理工学院', major: '计算机科学', degree: '硕士' } ] }, { id: 102, name: '李四', age: 27, sex: '女', address: { province: '江苏', city: '南京', district: '鼓楼区' }, education: [ { school: '浙江大学', major: '机械工程', degree: '本科' }, { school: '斯坦福大学', major: '管理学', degree: '硕士' } ] } ] ``` 在前端页面中,可以使用 layui 数据表格来展示这些嵌套的数据。这里需要注意的是,如果想展示嵌套数据,需要修改列配置项中的 `templet` 属性,定义一个函数来处理渲染单元格。 ``` table.render({ elem: '#demo', cols: [[ {field: 'id', title: 'ID', width: 80}, {field: 'name', title: '姓名', width: 100}, {field: 'age', title: '年龄', width: 80}, {field: 'sex', title: '性别', width: 80}, {field: 'address', title: '地址', templet: function(d) { return d.address.province + ' ' + d.address.city + ' ' + d.address.district; }}, {field: 'education', title: '教育经历', templet: function(d) { var html = ''; layui.each(d.education, function(index, item) { html += item.school + ' ' + item.major + ' ' + item.degree + '<br>'; }); return html; }} ]], data: data }); ``` 这段代码中,定义了一个数据表格,其中 `cols` 是列配置项,定义了每一列的名称、宽度和数据绑定的字段。在定义“地址”列和“教育经历”列时,使用了 `templet` 属性,指定了一个函数来处理单元格的渲染。 对于“地址”列,渲染函数直接将地址对象中的省份、城市和区县组合成一个字符串来展示。 对于“教育经历”列,渲染函数使用了 layui 的 each 函数,遍历教育经历数组,逐个渲染出学校名称、专业和学位,并用换行符隔开,最后将所有内容拼合成一个字符串返回。 以上就是 layui 数据表格展示嵌套数据的基本方法,通过这种方式,可以在数据表格中方便地展示嵌套结构的数据。 ### 回答3: layui是一款基于jQuery的前端UI框架,使用方便,效果美观,功能强大,广受开发者喜爱。数据表格layui框架中的一个重要组件之一,通常用于展示数据列表。在实际开发过程中,我们常常会遇到需要展示嵌套数据的场景,比如一个班级中有多名学生,每名学生又具有多项详细信息,此时我们可以通过layui数据表格来展示这些数据。 首先,我们需要在html页面中引入layui框架和数据表格模块的相关文件: ``` <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> ``` 接着,我们可以使用layui数据表格组件来展示嵌套数据。具体步骤如下: 1. 定义数据表格的表头 表头是数据表格中的重要组成部分,它定义了每一列数据的名称、类型和宽度等属性。我们可以在html页面中定义好表头,并通过javascript代码动态生成数据表格。 ``` <table id="studentTable" class="layui-table"> <thead> <tr> <th>学生姓名</th> <th>性别</th> <th>出生日期</th> <th>联系电话</th> <th>详细信息</th> </tr> </thead> </table> ``` 2. 定义嵌套数据 在实际开发中,我们可能会从后端接口或数据库中获取到嵌套式的数据,例如一个班级中有多名学生,每名学生又分别具有多项详细信息。我们可以将这些数据定义为一个数组,其中每个元素代表一个学生。每个学生又包含一个名为detail的属性,该属性是一个对象,代表学生的详细信息。例如: ``` var data = [ { name: "李明", gender: "男", birthday: "2001-01-01", phone: "13800138000", detail: { height: 170, weight: 60, hobby: "篮球、足球、游泳" } }, { name: "张三", gender: "女", birthday: "2002-02-02", phone: "13900139000", detail: { height: 160, weight: 50, hobby: "音乐、旅游、阅读" } }, //... ] ``` 3. 生成数据表格 在定义好表头和嵌套数据之后,我们可以使用layui数据表格组件来生成数据表格。生成数据表格的方法是调用layui.table.render()函数,该函数的参数包括一个object类型的参数,其中重要的属性包括elem、cols和data等。 ``` //定义表格列 var studentCols = [ { field: 'name', title: '学生姓名' }, { field: 'gender', title: '性别' }, { field: 'birthday', title: '出生日期' }, { field: 'phone', title: '联系电话' }, { field: 'detail', title: '详细信息', templet: '#detailTpl' } ]; //生成数据表格 layui.table.render({ elem: '#studentTable', cols: [studentCols], data: data }); ``` 在cols属性中,我们将之前定义好的表头列存储在一个名为studentCols的变量中,并将该变量作为cols属性的值传递给layui.table.render()函数。此外,在定义detail列的时候,我们使用了一个名为detailTpl的模板,用于展示详细信息的具体内容。这个模板是一个html代码片段,它定义了嵌套的详细信息如何展示。模板代码如下: ``` <script type="text/html" id="detailTpl"> <table class="layui-table layui-table-nob" lay-skin="line"> <tbody> <tr> <td>身高:{{d.detail.height}}cm</td> <td>体重:{{d.detail.weight}}kg</td> <td>爱好:{{d.detail.hobby}}</td> </tr> </tbody> </table> </script> ``` 在模板中,我们使用了{{d.detail.xxx}}的方式来输出学生的详细信息,其中d代表当前行的数据对象。 通过上述步骤,我们就可以使用layui数据表格展示嵌套数据了。在实际开发中,我们还可以通过其他的方式来控制表格的样式、分页、排序、筛选等属性,从而满足具体业务需求。
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值