layui和webkit相遇之table学习

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

建立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

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

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

这里就直接用jacen转换过的替换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))
    }
  });


登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...