| layui table删除多条本地数据 | 您所在的位置：网站首页 › layui数据表格删除指定数据 › layui table删除多条本地数据 |
layui table删除多条本地数据
|
Layui_table模块/数据表格文档
table 模块是我们的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。尽管如此，我们仍将对其进行完善，在控制代码量和性能的前提下，不定期增加更多人性化功能。table 模块也将是 layui 重点维护的项目之一。
创建一个table实例最简单的方式是，在页面放置一个元素 ，然后通过 table.render() 方法指定该容器，如下所示： 10000 user-0 女 城市-0 签名-0 255 57 作家 82830700 10001 user-1 男 城市-1 签名-1 884 27 词人 64928690 10002 user-2 女 城市-2 签名-2 650 31 酱油 6298078 10003 user-3 女 城市-3 签名-3 362 68 诗人 37117017 10004 user-4 男 城市-4 签名-4 807 6 作家 76263262 10005 user-5 女 城市-5 签名-5 173 87 作家 60344147 10006 user-6 女 城市-6 签名-6 982 34 作家 57768166 10007 user-7 男 城市-7 签名-7 727 28 作家 82030578 10008 user-8 男 城市-8 签名-8 951 14 词人 16503371 10009 user-9 女 城市-9 签名-9 484 75 词人 86801934 layui 查看 编辑 删除 layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#demo' ,height: 'full-20' ,method:'post' ,skin:'row' ,even:true ,page: true //开启分页 ,url: '/buddhism-heritage2/building/queryAll' //数据接口 ,cols: [[ //表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'name', title: '住房名称', width:80} ,{field: 'floor', title: '楼层', width:80, sort: true} ,{field: 'city', title: '城市', width:80} ,{field: 'num', title: '数量', width: 177} ,{field: 'money', title: '价格', width: 80, sort: true} ,{field: 'houseType', title: '房型', width: 80, } ,{field: 'size', title: '大小', width: 80, sort: true} ,{field: 'purpose', title: '用途'} ,{field: 'decorate', title: '装修'} ,{field: 'year', title: '楼龄', width: 135, sort: true} ,{fixed: 'right', title: '操作', width:178, align:'center', toolbar: '#barDemo'} ]] }); }); 对应的Controller： @Controller @RequestMapping("/building") public class BuildingController { @Autowired private BuildingService buildService; private static ConcurrentMap concurrentMap = new ConcurrentHashMap(); @RequestMapping("/queryAll") @ResponseBody public ConcurrentMap queryAllBuilding() { Integer queryCount = buildService.queryCount(); List building = buildService.queryAll(); concurrentMap.put("count", queryCount); concurrentMap.put("data", building); concurrentMap.put("code", 0); concurrentMap.put("msg", "成功"); return concurrentMap; } } 后台传递的参数格式: { code: 200,//数据状态的字段名称，默认：code msg: "",//状态信息的字段名称，默认：msg count: 1000,//数据总数的字段名称，默认：count data: []//数据列表的字段名称，默认：data }
三种渲染方式
在上述“快速使用”的介绍中，你已经初步见证了 table 模块的信手拈来，但其使用方式并不止那一种。我们为了满足各种情况下的需求，对 table 模块做了三种初始化的支持，你可按照个人喜好和实际情况灵活使用。
方式机制适用场景01.方法渲染用JS方法的配置完成渲染（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。02.自动渲染HTML配置，自动渲染无需写过多 JS，可专注于 HTML 表头部分03.转换静态表格转化一段已有的表格元素无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可
1.方法渲染: var table = layui.table; //执行渲染 table.render({ elem: '#demo' //指定原始表格元素选择器（推荐id选择器） ,height: 315 //容器高度 ,cols: [{}] //设置表头 //,…… //更多参数参考右侧目录：基本参数选项 });其实这是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器： 事实上我们更推荐采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了。 备注：table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作，详见目录：表格重载 2.自动渲染 所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点： 1) 带有 class="layui-table" 的 标签。 2) 对标签设置属性 lay-data="" 用于配置一些基础参数 3) 在 标签中设置属性lay-data=""用于配置表头信息 按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。下面是一个示例 ID 用户名 性别 城市 签名 积分 评分 职业 财富 3.转换静态表格: 昵称 积分 签名 贤心1 66 人生就像是一场修行a 贤心2 88 人生就像是一场修行b 贤心3 33 人生就像是一场修行c var table = layui.table; //转换静态表格 table.init('demo', { height: 315 //设置高度 ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致 //支持所有基础参数 }); |
【本文地址】
公司简介
联系我们