layui和webkit相遇之table学习
By
admin
at 2017-11-28 • 0人收藏 • 2100人看过
建立webkit窗口:
import web.kit.form;
var wbkitview = web.kit.form(winform);
wbkitview.document.write("试一试!");wbKitView.window 就是JS的全局对象，而 wbKitView.document 就是文档对象。
获取到JS或文档对象以后，就可以直接调用该对象的属性或函数了
15 个回复 | 最后更新于 2017-12-03
aar与layDate控件的交互:
为了实现交互,调用layDate的交互js函数功能
laydate.render({
elem: '#test20'
,position: 'static'
,done: function(value, date){
//下面调用aar中的函数
external.aardioCall("你选择的日期是: " + value);
//alert('你选择的日期是：' + value + '\n获得的对象是' + JSON.stringify(date));
}
});然后需要在aar窗口代码中定义一个上面引用的函数
wbkitview.go("/html/test.html");
wbkitview.external = {
aardioCall = function(str){
winform.msgbox(str);
};
}这样点击日期的时候,就调用aar的函数提示了..
看到上面的图片,发现本来应该显示的图标并没有显示.
这个问题,jacen已经在论坛说过,是图标字体经过转换下就可以webkit正常使用了
这里就直接用jacen转换过的替换font下的字体即可.
替换之后,图标正常显示了
正题开始:
首先查看layui的table表格示例:
将上面测试test.html中代码改为:
<!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">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="test"></table>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<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}]}
aardio中代码:
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();
return winform;为什么不用楼上示例用的winform.plus作为这个显示容器?
发现显示之后滚动条啥的都不能用了...
这种方式估计用custom会更好.
那么,如果我已知了数据,应该怎么直接把数据展示在table,而不是通过什么url来间接异步获取呢?
可以利用data直接写到html文件的js里,而不是用url
<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是没有的.
这个不同就要查看下layui给出的url异步接口定义了:
数据的异步请求由以下几个参数组成：
| url | 接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） page 代表当前页码、limit 代表每页数据量 |
| method | 接口http请求类型，默认：get |
| where | 接口的其它参数。如：where: {token: 'sasasas', id: 123} |
| request | 用于对分页请求的参数：page、limit重新设定名称，如：codelayui.coderequest: {pageName: 'curr' //页码的参数名称，默认：page,limitName: 'nums' //每页数据量的参数名，默认：limit}那么请求数据时的参数将会变为：?curr=1&nums=30 |
| response | 用于对返回的数据格式的自定义，如：codelayui.coderesponse: {statusName: 'status' //数据状态的字段名称，默认：code,statusCode: 200 //成功的状态码，默认：0,msgName: 'hint' //状态信息的字段名称，默认：msg,countName: 'total' //数据总数的字段名称，默认：count,dataName: 'rows' //数据列表的字段名称，默认：data}你接口返回的数据格式，比如遵循 response 对应的字段名称。比如上面对应的格式为：接口返回的数据格式layui.code{status: 200,hint: "",total: 1000,rows: []}下面是默认接受的数据格式：默认接受的数据格式layui.code{code: 0,msg: "",count: 1000,data: []}接口参考：/demo/table/user/ |
注意：request 和 response 参数均为 layui 2.1.0 版本新增
看到上面异步接口,就知道它们这样用的最大不同是,如果你要是准备分页..那么还是用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格式返回.
于是,运行就可以得到你想要的展示了.
aar对layui表格的重载实现:
查看layui的重载说明
表格重载很多时候，你需要对表格进行重载。比如数据全局搜索。以下方法可以帮你轻松实现这类需求（可任选一种）。
| table.reload(ID, options) | 参数 ID 即为基础参数id对应的值，见：设定容器唯一ID 参数 options 即为各项基础参数 注意：该方法为 2.1.0 版本中新增 | 所有渲染方式 |
| tableIns.reload(options) | 对象 tableIns 来源于 table.render() 方法的实例 参数 options 即为各项基础参数 | 仅限方法级渲染 |
示例1：自动化渲染的重载layui.code【HTML】<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>【JS】table.reload('idTest', {url: '/api/table/search',where: {} //设定异步数据接口的额外参数//,height: 300});示例2：方法级渲染的重载layui.code//所获得的 tableIns 即为当前容器的实例var tableIns = table.render({elem: '#id',clos: [] //设置表头,url: '/api/data' //设置异步接口,id: 'idTest'});//这里以搜索为例tableIns.reload({where: { //设定异步数据接口的额外参数，任意设aaaaaa: 'xxx',bbb: 'yyy'//…},page: {curr: 1 //重新从第 1 页开始}});//上述方法等价于table.reload('idTest', {where: { //设定异步数据接口的额外参数，任意设aaaaaa: 'xxx',bbb: 'yyy'//…},page: {curr: 1 //重新从第 1 页开始}});注意：这里的表格重载是指对表格重新进行渲染，包括数据请求和基础参数的读取
我们从上面得知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中设置的了.
(对于上面的示例,从很多数据,变为了只有两行的数据)
layui开启复选框:
{type:'checkbox'}
注意,添加上面代码之后要在后面加逗号","啊!!!!
,cols: [[
{type:'checkbox'}
,{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}
]]
table组件增加表单元素:
增加表单元素稍微复杂
① 先要创建一个表单样式,通过id传递给table单元格
② 再创建table的列元属性里添加样板属性templet = '刚刚创建的id'
示例如下:
先在html代码中添加一个表单元素样式
这里要注意: 这个样式要放到script中,作为js调用
<script type="text/html" id="switchTpl">
<!-- 这里的 checked 的状态只是演示 -->
<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怎样与table的数据进行互动操作:
获取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表然后保存起来,或者用于临时存储起来用于其他用途!
上面获取方式二:
把上面那个方式中的js代码封装到要给函数,然后使用的时候调用函数eval
代码封装示例:
var jscc = /**
function test(id) {
function test(id) {
if(id == null){
id = 'test';
}
var checkStatus = table.checkStatus(id)
,data = checkStatus.data;
return JSON.stringify(data);
}
**/建立函数之后,先把函数执行一次,以便给html添加这个js属性进去.
wbkitview.doScript(jscc)
执行上面完成之后,html里其实已经有了这个函数了.那么我们下面就是在参数里填写对于的id来获取对硬的内容了.
winform.button2.oncommand = function(id,event){
var tt = wbkitview.eval(`test('test1')`)
console.log(tt)
}这样上面就能输出获取到的表行内容了.
以后就可以直接写参数掉函数了.
对于上面第二种方式,其实那个jscc的代码基本执行一次就不需要在用了,那么,完全可以写到html文件里面去,用的时候直接调用就可以了.
html代码js如下:
getCheckData=function(id){ //获取选中数据
var checkStatus = table.checkStatus(id)
data = checkStatus.data;
return JSON.stringify(data);
};
getCheckLength=function(id){ //获取选中数目
var checkStatus = table.checkStatus(id)
data = checkStatus.data;
return ('选中了：'+ data.length + ' 个');
};
isAll=function(id){ //验证是否全选
var checkStatus = table.checkStatus(id);
return (checkStatus.isAll ? '全选': '未全选')
};在这里要注意这个js里面的函数写法和aar的一样的
那么应该怎么使用呢?
直接eval使用即可,而且还会返回值的哦.
winform.button2.oncommand = function(id,event){
var tt = wbkitview.eval(`getCheckData('test')`)
console.log(tt)
}
winform.button5.oncommand = function(id,event){
var tt = wbkitview.eval(`getCheckLength('test')`)
console.log(tt)
}
winform.button4.oncommand = function(id,event){
var tt = wbkitview.eval(`isAll('test')`)
console.log(tt)
}
table之添加工具条,并监听事件功能:
添加table属性filter
<table class="layui-hide" id="test" lay-filter="demo"></table>
首先定义工具条样式
注意: 样式里面添加lay-event事件,这样才能监听到
<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script>
2.绑定样式到列属性
,{width:137,align:'center', toolbar: '#barDemo'}工具条这个不需要feild属性.
3.js代码中添加监听代码
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.alert('编辑行：<br>'+ JSON.stringify(data))
}
});登录后方可回帖
一个调用layui的layDate时间与日期组件的示例:
html代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body{padding: 20px;} background-color: #fff; border-radius: 2px;} </style> </head> <body> <div class="layui-inline" id="test-n4"></div> <script src="laydate/laydate.js"></script> <script> lay('#version').html('-v'+ laydate.v); //执行一个laydate实例 laydate.render({ elem: '#test-n4' ,type: 'time' ,position: 'static' ,theme: '#393D49' }); </script> </body> </html>aardio主代码:
import web.kit.form; var wbkitview = web.kit.form(winform); //wbkitview.document.write("试一试!"); wbkitview.go("/html/test.html");,theme: '#393D49' 这个是自定义颜色