泸州住房城乡建设局官方网站,西安网站制作模板,织梦做的网站,深圳有什么做招聘网站的公司吗本节课我们来开始了解 Layui 的内置模块#xff1a;table 数据表格。 一#xff0e;基本使用 1. table 模块#xff0c;通过异步加载数据来渲染表格来展现数据内容#xff1b; table idtable/table layui.use([table], () { const table …本节课我们来开始了解 Layui 的内置模块table 数据表格。 一基本使用 1. table 模块通过异步加载数据来渲染表格来展现数据内容 table idtable/table layui.use([table], () { const table layui.table //数据表格 table.render({ elem : #table, url : https://www.liyanhui.com/test/data.php, height : 312, page : true, cols : [[ { field : id, title : ID, width : 80, sort : true, } ... }) } PS官网提供的数据接口本地直接用会出现跨域我用自己服务器做了代理使用 2. 渲染方式有三种JS 方式(推荐上面的例子就是)、自动渲染和转换静态表格 3. 对于自动渲染和静态表格的转换直接看官网的例子即可比较简单不做演示
本节课我们来开始了解 Layui 的内置模块table 数据表格。 一参数说明 1. 参数分为两种基础参数(表格整体的设置)、表头参数(cols 的设置) 2. 这里列举最常用的演示其它对照手册进行自行了解即可 常用基础参数 属性 说明 elem 绑定该表格比如#table cols 设置标头 width 表格长度 height 表格宽度 page 开启分页默认 false。或者引入一个分页对象。 limit 每页多少条默认 10 条 limits 每页条数选项[10, 20, 30, 40] loading 是否显示加载 loading默认 true toolbar 是否开启右侧顶端工具条默认 false更多设置看手册 cols 参数 属性 说明 field 字段名 title 设置标题 width 列长度 minWidth 默认 60最小长度 type 类型normal(默认)、checkbox、radio、numbers、space fixed 固定列left(true)、false hide 默认 false隐藏列 sort 默认 false开启排序 edit 默认不开启可设置text event 自定义点击事件 style 自定义单元格样式 align 默认 left其它center、right colspan 占用的单元格列数一般表头 rowpsan 占用的单元格行数一般表头 异步数据接口参数 属性 说明 url 接口地址默认传递?page1limit30 method http 请求默认 get headers 设置标头 contenType 内容编码 where 其它请求参数 parseData 数据格式解析的回调函数方便转换成可识别的 json request 可以更改请求时 page 和 limit 名称 response 重新定义数据格式 PS剩下一些版本新增或非常用属性可以对照手册参考
