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

popdes · 发表于 2017-12-1 00:05:28

一直都想用layui的表格table功能,它实现了一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能.

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

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

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

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

新建webkit窗体,添加个test.html并复制和修改那个layui的示例代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
<table class="layui-hide" id="test"></table>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'http://www.layui.com/demo/table/user/'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', width:80, title: '城市'}
,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
,{field:'experience', title: '积分', sort: true}
,{field:'score', title: '评分', sort: true}
,{field:'classify', title: '职业'}
,{field:'wealth', width:137, title: '财富', sort: true}
]]
});
});
</script>
</body>
</html>

复制代码

上面js代码中的网址其实就是一个json数据:

{"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的窗体程序代码如下:

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=881;bottom=419;bgcolor=16777215;parent=...)
winform.add()
/*}}*/
import web.kit.form;
var wbkitview = web.kit.form(winform);
//wbkitview.document.write("试一试!");
wbkitview.go("/html/test.html");
wbkitview.external = {
aardioCall = function(str){
winform.msgbox(str);
};
}
/*
winform.button.oncommand = function(id,event){
//winform.msgbox( winform.button.text );
wbkitview.getForm(false)
}
*/
winform.enableDpiScaling();
winform.show();
win.loopMessage();

复制代码

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

可以利用data直接写到html文件的js里,而不是用url
于是把html中的js修改如下:

<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
//,url:'http://www.layui.com/demo/table/user/'
,skin: 'row' //行边框风格
,even: true //开启隔行背景
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,heitht:300
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', width:80, title: '城市'}
,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
,{field:'experience', title: '积分', sort: true}
,{field:'score', title: '评分', sort: true}
,{field:'classify', title: '职业'}
,{field:'wealth', width:137, title: '财富', sort: true}
]]
,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}]
});
});
</script>

复制代码

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

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

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

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

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

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

我们在aar界面程序里定义一个这个函数:

import web.json;
wbkitview.external = {
getOption = function(){
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}]
***/;
return data;
};
}

复制代码

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

如果你是由aar产生的class或者table表,那么就要

return web.json.stringify(data);

复制代码

把表转换为json数据先.

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

更改data:这行为下面代码:

,data:JSON.parse(external.getOption())

复制代码

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

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

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

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

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

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

我们写入:

winform.button.oncommand = function(id,event){
//winform.msgbox( winform.button.text );
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}]})`);
}

复制代码

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

html中的位置如下:

<script>
layui.use('table', function(){
var table = layui.table;
tableObj = table.render({
elem: '#test'
//,url:'http://www.layui.com/demo/table/user/'
,skin: 'row' //行边框风格
,even: true //开启隔行背景
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,heitht:300
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', width:80, title: '城市'}
,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
,{field:'experience', title: '积分', sort: true}
,{field:'score', title: '评分', sort: true}
,{field:'classify', title: '职业'}
,{field:'wealth', width:137, title: '财富', sort: true}
]]
,data:JSON.parse(external.getOption())
});
});
</script>

复制代码

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

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

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

先写这么多,休息一下.
未完待续!

JacenHe · 发表于 2017-12-1 00:06:44

感谢 popdes，写了这么多，感谢感谢

zhoubujin · 发表于 2017-12-1 12:28:19

popdes · 发表于 2017-12-1 23:40:06

继续:
上面都是简单的介绍和简单的展示layui的table

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

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

{type:'checkbox'}

复制代码

2.开启单元格的编辑功能

edit: 'text'

复制代码

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

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

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

示例如下:

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

这里要注意: 这个样式要放到script中,作为js调用

<script type="text/html" id="switchTpl">
<input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.sex == "女" ? 'checked' : '' }}>
</script>

复制代码

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

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

如:

,{field:'sex', width:80, title: '性别', sort: true,templet: '#switchTpl'}

复制代码

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

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

首先,查看layui中table对应的演示代码如下:

var $ = layui.$, active = {
getCheckData: function(){ //获取选中数据
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
layer.alert(JSON.stringify(data));
}
,getCheckLength: function(){ //获取选中数目
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
}
,isAll: function(){ //验证是否全选
var checkStatus = table.checkStatus('idTest');
layer.msg(checkStatus.isAll ? '全选': '未全选')
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});

复制代码

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

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

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

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

代码如下:

wbkitview.external = {
getdata = function(...){
winform.msgbox(...)
};
}

复制代码

第三步,在按钮事件里执行[获取选中行数据]的js代码,但是注意,我们要把刚刚第二步添加的接收函数用上.代码如下:

winform.button2.oncommand = function(id,event){
var jsgetdata = /**
var checkStatus = table.checkStatus('test')
,data = checkStatus.data;
external.getdata(JSON.stringify(data));
**/
wbkitview.doScript(jsgetdata);
}

复制代码

完成,

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

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

休息休息, 未完待续!

iaauto · 发表于 2018-1-12 20:58:08

不错不错，继续加油，期待更多分享，以后我也用用layui

		自动登录	找回密码
密码			注册会员