使用Table组件,收集的数据值对象中,增加一列

本文介绍了一个使用 Java 实现的 TableView 示例,展示了如何通过定义 Person 类及其属性,并在页面中配置 TableView 组件来显示 Person 对象的属性值。同时,介绍了如何自定义页面显示的列名以及如何设置每页显示的行数。
java类:
           public class Person {
               private String firstname;
               private String lastname;
               private String sex;
               private int age;
               /**
                *属性的getter和setter方法
               */
           }

page中定义:
<component id="boys" type="contrib:TableView">
                 <binding name="source" value="persons"/>
                 <binding name="columns"  value="literal:id,name,sex,age"/><!--name为组合要显示在页面当中的自定义的值-->
                <binding name="pageSize" value="5"/><!--控制所显示的行数-->
                <binding name="element" value="literal:span"/>
</component>
<component id="nameColumnValue" type="Block"/><!--此处一定要是columns中的列名加“column”,否则会说Person中找不到name属性-->
            <component id="name" type="Insert">
               <binding name="value" value="name"/><!--name是在page类中获取的-->
            </component>



获取name值

           @InjectComponent(“rows”)<!--rows是在html中定义的行集组件-->
       public abstract TableRows getTableRows();
            public String getName() {
     Person person = (Person)getTableRows().getTableRow();
                return person.firstname+person.lastname;
           }



接着就可以再页面上显示自己想要显示的列name了

 

<think> 我们正在讨论的是Layui表格(table组件。根据引用内容,特别是引用[1]和引用[3],提到了使用Layui的数据缓存(layui.data)和表格的缓存数据操作。 用户的问题:从layui table缓存数据里提取某一列的值。 在Layui中,表格组件在渲染时会存储当前页的数据,我们可以通过table模块的cache方法来获取表格的缓存数据。缓存数据是一个数组,每个元素代表一行的数据对象。 步骤如下: 1. 首先,我们需要知道表格的id(即渲染表格时设置的id属性,或者在table.render中设置的id)。 2. 使用`table.cache('tableId')`获取缓存数据,其中'tableId'是表格的id。 3. 得到的缓存数据是一个数组,数组的每个元素是一行数据(对象)。我们可以遍历这个数组,然后取出每一行中指定字段(列)的值。 例如,假设表格的id为'test-table',我们想要获取名为'username'的列的所有值,可以这样做: ```javascript var cacheData = table.cache('test-table'); // 获取缓存数据 var usernames = []; // 用于存放提取出来的值 for(var i=0; i<cacheData.length; i++) { // 取出每一行的'username'字段的值 usernames.push(cacheData[i].username); } ``` 注意:如果列使用的是field属性,那么取数据时应该使用field对应的字段名。例如,列定义中的field:'username',那么数据对象中就会有个username属性。 另外,引用[3]中提到,表格数据可能会被存储在session中,但是这里用户要求的是从table的缓存中提取,所以我们使用table.cache方法。 如果表格有多页,table.cache获取的是当前页的缓存数据。如果需要所有页的数据,那么可能需要遍历所有页,或者在使用表格时设置page:false(不分页),或者通过其他方式存储所有数据(如引用[1]中提到的本地存储)。 根据引用[1]的注意事项,我们需要注意数据安全、存储大小限制等,但这里只是提取当前页的某一列值,不涉及这些。 示例代码: ```javascript // 假设表格id为'demo' var tableCache = layui.table.cache('demo'); // 假设我们要提取的列对应的字段名为'age' var ageList = tableCache.map(function(item) { return item.age; }); console.log(ageList); // 打印出所有年龄的数组 ``` 如果表格是经过重载的,缓存数据也会更新,所以获取的是最新的数据。 注意事项: - 确保在表格渲染完成后执行获取缓存的操作。 - 确保表格id正确。 相关问题: 1. 如何获取Layui表格的所有数据(包括所有页)? 2. Layui表格的缓存数据数据数据有什么区别? 3. 如何更新Layui表格某一行的数据并刷新缓存? </think> ### 从Layui Table缓存数据提取某一列的值 根据提供的引用资料,从Layui Table缓存中提取指定列值的方法如下: 1. **获取表格缓存数据** ```javascript // 获取指定表格的缓存数据tableId为表格渲染时设置的id) var tableData = table.cache('tableId'); ``` 这会返回一个数组,每个元素代表一行的数据对象[^1][^3]。 2. **提取指定列的值** ```javascript // 假设要提取"price"列的值 var columnValues = tableData.map(function(row){ return row.price; // "price"替换为实际字段名 }); ``` --- ### 完整示例 ```javascript // 提取表格中"username"列的所有值 var cacheData = table.cache('userTable'); var usernames = cacheData.map(item => item.username); // 结果示例: ["张三", "李四", "王五"] console.log(usernames); ``` --- ### 注意事项 1. **字段名匹配** 字段名需与表格列配置的`field`值完全一致(大小写敏感)[^1][^3] 2. **空值处理** 当列值为空时返回`undefined`,建议添加过滤: ```javascript let validNames = usernames.filter(name => name); ``` 3. **多页表格** `table.cache()`仅返回当前页数据,如需全量数据需结合分页参数处理[^1] 4. **数据结构验证** ```javascript // 调试用:打印首行数据结构 console.log(table.cache('tableId')[0]); ``` 5. **清除缓存** 更新后需及时清理旧缓存: ```javascript layui.data('tableFilter', {key: 'filterParams', remove: true}); ``` --- ### 引用资料说明 该方法基于Layui的`table.cache()`API实现,缓存机制保证了数据实时性[^1][^3]。当表格重载时会自动更新缓存数据源,无需手动维护[^2]。对于合计列等特殊场景,需确保字段值类型一致(如数值型)[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值