搜索
查看: 3268|回复: 5

分享layui中table表格模块与aar的交互学习过程

[复制链接]

39

主题

174

帖子

1027

积分

荣誉会员

htmlayout.cn 我的学习笔记

Rank: 8Rank: 8

积分
1027
发表于 2017-12-1 00:05:28 | 显示全部楼层 |阅读模式
一直都想用layui的表格table功能,它实现了一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能.

上面的功能是从官方复制的, 只是说明下它的强悍, 好多功能我还没结合aar测试....

下面记录下,我学习table的过程,
由于是边写测试代码边写这个帖子, 可能比较啰嗦, 没耐心的可以直接跳过过程看结果.

正题开始:
首先去layui下载它的支持文件.

然后我查看了layui的table表格示例:

新建webkit窗体,添加个test.html并复制和修改那个layui的示例代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>layui</title>
  6.   <meta name="renderer" content="webkit">
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9.   <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  10.   <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
  11. </head>
  12. <body>
  13.             
  14. <table class="layui-hide" id="test"></table>
  15.                
  16.            
  17. <script src="layui/layui.js" charset="utf-8"></script>
  18. <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
  19.   
  20. <script>
  21. layui.use('table', function(){
  22.   var table = layui.table;
  23.    
  24.   table.render({
  25.     elem: '#test'
  26.     ,url:'http://www.layui.com/demo/table/user/'
  27.     ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
  28.     ,cols: [[
  29.       {field:'id', width:80, title: 'ID', sort: true}
  30.       ,{field:'username', width:80, title: '用户名'}
  31.       ,{field:'sex', width:80, title: '性别', sort: true}
  32.       ,{field:'city', width:80, title: '城市'}
  33.       ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
  34.       ,{field:'experience', title: '积分', sort: true}
  35.       ,{field:'score', title: '评分', sort: true}
  36.       ,{field:'classify', title: '职业'}
  37.       ,{field:'wealth', width:137, title: '财富', sort: true}
  38.     ]]
  39.   });
  40. });
  41. </script>

  42. </body>
  43. </html>
复制代码

上面js代码中的网址其实就是一个json数据:
  1. {"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}]}
复制代码

在aar的窗体程序代码如下:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = win.form(text="aardio form";right=881;bottom=419;bgcolor=16777215;parent=...)
  4. winform.add()
  5. /*}}*/

  6. import web.kit.form;
  7. var wbkitview = web.kit.form(winform);
  8. //wbkitview.document.write("试一试!");
  9. wbkitview.go("/html/test.html");

  10. wbkitview.external = {
  11.     aardioCall = function(str){
  12.         winform.msgbox(str);
  13.     };
  14. }

  15. /*

  16. winform.button.oncommand = function(id,event){
  17.     //winform.msgbox( winform.button.text );
  18.     wbkitview.getForm(false)
  19.      
  20. }
  21. */
  22. winform.enableDpiScaling();
  23. winform.show();

  24. win.loopMessage();
  25. return winform;
复制代码


那么,如果我已知了数据,应该怎么直接把数据展示在table,而不是通过什么url来间接异步获取呢?
于是查看layui关于table模块的参数文档:

可以利用data直接写到html文件的js里,而不是用url
于是把html中的js修改如下:
  1. <script>
  2. layui.use('table', function(){
  3.   var table = layui.table;
  4.    
  5.   table.render({
  6.     elem: '#test'
  7.     //,url:'http://www.layui.com/demo/table/user/'
  8.     ,skin: 'row' //行边框风格
  9.     ,even: true //开启隔行背景
  10.     ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
  11.     ,heitht:300
  12.     ,cols: [[
  13.       {field:'id', width:80, title: 'ID', sort: true}
  14.       ,{field:'username', width:80, title: '用户名'}
  15.       ,{field:'sex', width:80, title: '性别', sort: true}
  16.       ,{field:'city', width:80, title: '城市'}
  17.       ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
  18.       ,{field:'experience', title: '积分', sort: true}
  19.       ,{field:'score', title: '评分', sort: true}
  20.       ,{field:'classify', title: '职业'}
  21.       ,{field:'wealth', width:137, title: '财富', sort: true}
  22.     ]]
  23.     ,data:[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}]
  24.   });
  25. });
  26. </script>
复制代码


这里需要注意上面代码中data数据和前面通过url获取数据的格式区别!!

url获取数据有个头不信息,而data是没有的.
具体的不同可以查看这个模块的文档,这里不再复制过来了.

看到上面异步接口,就知道它们这样用的最大不同是,如果你要是准备分页..那么还是用url异步接口吧,人家有page和get,就和网页类似.


但是实际使用中,作为桌面应用软件,只是展示某些数据的话,完全不需要什么分页.(⊙o⊙)…,我是用不到.所以我更倾向于用aar直接生成数据,然后给这个data,刷新表格.

那么,如果数据是在aar中生成的,怎样才能传递到html的js中的data呢??

第一想到的应该就是利用wbkitview.external= {}函数.

我们在aar界面程序里定义一个这个函数:
  1. import web.json;
  2. wbkitview.external = {
  3.     getOption = function(){
  4.         data = /***
  5.         [{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}]
  6.         ***/;
  7.         return data;
  8.     };
  9. }
复制代码

上面注意: 我是直接将原来html里面的data数据复制过来了.所以可以直接return.

如果你是由aar产生的class或者table表,那么就要
  1. return web.json.stringify(data);
复制代码

把表转换为json数据先.

那么html中怎么获取这个数据呢:

更改data:这行 为下面代码:
  1. ,data:JSON.parse(external.getOption())
复制代码

上面意思是获取外部提供的数据,并解析为json格式返回.

于是,运行就可以得到你想要的展示了.

实现展示之后,如果有数据更新了,那么就要刷新这个table里的数据,如何实现呢?
这就需要用到layui表格的重载:

查看layui的重载说明
tableIns.reload(options)        对象 tableIns 来源于 table.render() 方法的实例
参数 options 即为各项基础参数

我们从上面得知reload即可.那么在aar中怎么使用呢?

我们先在aar的界面上放一个按钮,用来点击重载数据.

我们写入:
  1. winform.button.oncommand = function(id,event){
  2.     //winform.msgbox( winform.button.text );
  3.      
  4.     wbkitview.doScript(`tableObj.reload({data:[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27}]})`);
  5.      
  6. }
复制代码

上面是直接运行js代码功能,这里的tableObj是html中的js一个全局元素.

html中的位置如下:
  1. <script>
  2. layui.use('table', function(){
  3.   var table = layui.table;
  4.    
  5.   tableObj = table.render({
  6.     elem: '#test'
  7.     //,url:'http://www.layui.com/demo/table/user/'
  8.     ,skin: 'row' //行边框风格
  9.     ,even: true //开启隔行背景
  10.     ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
  11.     ,heitht:300
  12.     ,cols: [[
  13.       {field:'id', width:80, title: 'ID', sort: true}
  14.       ,{field:'username', width:80, title: '用户名'}
  15.       ,{field:'sex', width:80, title: '性别', sort: true}
  16.       ,{field:'city', width:80, title: '城市'}
  17.       ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
  18.       ,{field:'experience', title: '积分', sort: true}
  19.       ,{field:'score', title: '评分', sort: true}
  20.       ,{field:'classify', title: '职业'}
  21.       ,{field:'wealth', width:137, title: '财富', sort: true}
  22.     ]]
  23.     ,data:JSON.parse(external.getOption())
  24.   });
  25. });
  26. </script>
复制代码

看到tableobj了吗? 前面是没有var修饰的,如果有修饰就执行不了了.

,运行的效果就是,点击按钮之后,界面上面的表格数据变为aar中设置的了.

(对于上面的示例,从很多数据,变为了只有两行的数据)
运行结果如下


先写这么多,休息一下.
未完待续!
! www.HtmLayout.Cn 我的学习笔记
回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
发表于 2017-12-1 00:06:44 | 显示全部楼层
感谢 popdes,写了这么多,感谢感谢
回复

使用道具 举报

7

主题

51

帖子

408

积分

培训班

积分
408
发表于 2017-12-1 12:28:19 | 显示全部楼层
回复

使用道具 举报

39

主题

174

帖子

1027

积分

荣誉会员

htmlayout.cn 我的学习笔记

Rank: 8Rank: 8

积分
1027
 楼主| 发表于 2017-12-1 23:40:06 | 显示全部楼层
继续:
上面都是简单的介绍和简单的展示layui的table

那么我们想要获取到table的一行的数据,或者说,如果我们编辑了表里的内容,我们还想要获取这个内容,应该怎么办呢?

先来了解一点layui的table其他有用的功能:
这些功能详细文档, 请自行查阅layui的页面吧, 我这里只简单写下
1. 给table添加复选框
  1. {type:'checkbox'}
复制代码

2.开启单元格的编辑功能
  1. edit: 'text'
复制代码

3.给单元格增加表单元素(check,button....等)
增加表单元素稍微复杂

① 先要创建一个表单样式,通过id传递给table单元格

② 再创建table的列元属性里添加样板属性templet = '刚刚创建的id'

示例如下:

先在html代码中添加一个表单元素样式

这里要注意: 这个样式要放到script中,作为js调用
  1. <script type="text/html" id="switchTpl">
  2.   <!-- 这里的 checked 的状态只是演示 -->
  3.   <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.sex == "女" ? 'checked' : '' }}>
  4. </script>
复制代码

上面的d.id和d.sex分别对应创建table列中的filed属性,上面的代码最后几句的意思是如果sex显示的是女,那么就定义为checked(被选中)状态!

然后,把上面定义的样式作用于table列属性中即可

如:
  1. ,{field:'sex', width:80, title: '性别', sort: true,templet: '#switchTpl'}
复制代码

这样运行之后,sex这一列,就自动转换为对应的check状态了.

以上功能熟悉了之后,就可以和aar交互了
1. 获取check选中行数据(json格式)

首先,查看layui中table对应的演示代码如下:
  1. var $ = layui.$, active = {
  2.     getCheckData: function(){ //获取选中数据
  3.       var checkStatus = table.checkStatus('idTest')
  4.       ,data = checkStatus.data;
  5.       layer.alert(JSON.stringify(data));
  6.     }
  7.     ,getCheckLength: function(){ //获取选中数目
  8.       var checkStatus = table.checkStatus('idTest')
  9.       ,data = checkStatus.data;
  10.       layer.msg('选中了:'+ data.length + ' 个');
  11.     }
  12.     ,isAll: function(){ //验证是否全选
  13.       var checkStatus = table.checkStatus('idTest');
  14.       layer.msg(checkStatus.isAll ? '全选': '未全选')
  15.     }
  16.   };
  17.    
  18.   $('.demoTable .layui-btn').on('click', function(){
  19.     var type = $(this).data('type');
  20.     active[type] ? active[type].call(this) : '';
  21.   });
复制代码

从上面我们可以得出:如果我们准备用aar的传统按钮来操作获取选中数据,那么,第一要用到js代码,第二要用到table这个全局变量,第三要有返回值给aar使用.

那么,我们接下来要做的就是,

第一步,把html中的js代码<script>下面第一个var table = .... 这个前面的var删掉,要不然的话,在aar界面程序里是无法访问它的.

第二步,在aar的界面程序里定义一个接收函数,用来接收调用js之后返回的选中行数据

代码如下:
  1. wbkitview.external = {
  2.     getdata = function(...){
  3.         winform.msgbox(...)
  4.     };
  5.      
  6. }
复制代码

第三步,在按钮事件里执行[获取选中行数据]的js代码,但是注意,我们要把刚刚第二步添加的接收函数用上.代码如下:
  1. winform.button2.oncommand = function(id,event){
  2. var jsgetdata = /**
  3.       var checkStatus = table.checkStatus('test')
  4.       ,data = checkStatus.data;
  5.       external.getdata(JSON.stringify(data));
  6. **/
  7. wbkitview.doScript(jsgetdata);
  8.      
  9. }
复制代码

完成,

当我们点击按钮会弹出选中行的json格式数据.

这里演示的是用msgbox显示出来接收到的数据,当然你也可以把这个数据转换为aar的table表然后保存起来,或者用于临时存储起来用于其他用途!

休息休息, 未完待续!
! www.HtmLayout.Cn 我的学习笔记
回复

使用道具 举报

12

主题

57

帖子

422

积分

二级会员

Rank: 3Rank: 3

积分
422
发表于 2018-1-12 20:58:08 | 显示全部楼层
不错不错,继续加油,期待更多分享,以后我也用用layui
回复

使用道具 举报

6

主题

12

帖子

114

积分

一级会员

Rank: 2

积分
114
发表于 2018-4-9 08:30:11 | 显示全部楼层
不错的教程,很有用啊,谢谢分享经验,回去试一下。谢谢楼主分享
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-10-19 14:54 , Processed in 0.062500 second(s), 23 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表