layui和webkit相遇之table学习

By admin at 2017-11-28 • 0人收藏 • 969人看过

建立webkit窗口:

import web.kit.form;
var wbkitview = web.kit.form(winform);
wbkitview.document.write("试一试!");

wbKitView.window 就是JS的全局对象,而 wbKitView.document 就是文档对象。

获取到JS或文档对象以后,就可以直接调用该对象的属性或函数了

blob.png

15 个回复 | 最后更新于 2017-12-03
2017-11-28   #1

一个调用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");

blob.png

,theme: '#393D49' 这个是自定义颜色

2017-11-28   #2

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的函数提示了..

blob.png

2017-11-28   #3

看到上面的图片,发现本来应该显示的图标并没有显示.

这个问题,校长已经在论坛说过,是图标字体经过转换下就可以webkit正常使用了

这里就直接用校长转换过的替换font下的字体即可.

iconfont.zip

替换之后,图标正常显示了

blob.png

2017-11-30   #4

正题开始:

首先查看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会更好.

blob.png

2017-11-30   #5

那么,如果我已知了数据,应该怎么直接把数据展示在table,而不是通过什么url来间接异步获取呢?

blob.png

可以利用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,刷新表格.

2017-11-30   #6

那么,如果数据是在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格式返回.

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

2017-11-30   #7

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中设置的了.

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

gifTest.gif

2017-12-01   #8

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}
    ]]


2017-12-01   #9

layui开启单元格编辑功能:

edit: 'text'

,这个功能是增加在 每一列中的属性里

,{field:'classify', title: '职业', edit: 'text'}

这样的话,这样的一列就可以点击然后编辑了.

blob.png

2017-12-01   #10

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(被选中)状态!

blob.png

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

如:

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

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

blob.png

2017-12-01   #11

table之固定列:

fixed: 'left'
fixed: 'right'

固定列。可选值有:left(固定在左)、right(固定在右)。一旦设定,对应的列将会被固定在左或右,不随滚动条而滚动。 

注意:如果是固定在左,该列必须放在表头最前面;如果是固定在右,该列必须放在表头最后面


2017-12-01   #12

aar怎样与table的数据进行互动操作:

  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格式数据.

blob.png

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

2017-12-03   #13

上面获取方式二:

把上面那个方式中的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)
	
}

这样上面就能输出获取到的表行内容了.

以后就可以直接写参数掉函数了.

2017-12-03   #14

对于上面第二种方式,其实那个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)
}

blob.png

2017-12-03   #15

table之添加工具条,并监听事件功能:

添加table属性filter

<table class="layui-hide" id="test" lay-filter="demo"></table>
  1. 首先定义工具条样式

注意: 样式里面添加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))
    }
  });


登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
Sciter中文在线文档Sciter在线学习文档
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...