layuitab选项卡标题栏右边添加按钮

layuitab选项卡标题栏右边添加按钮方法：

1、打开编译器，来到代码主要部分，点击进入编译。

2、使用表格中的toolbar属性，字段里面添加toolbar属性。

3、给toolbar进行js赋值，调用监听事件，即可添加按钮。

使用layui的table功能时，在参考官方文档 layui数据表格 情况下，修改 工具栏左侧显示默认的内置模板。

      toolbar: 'default'  //让工具栏左侧显示默认的内置模板

       左侧的内置以layui-icon显示的 *** 作按钮就展示出来，如图所示-左侧部分

但有时根据项目需求，不需要显示 添加 编辑 删除中的某一个或者某两个功能时，我们可以如下 *** 作：

点击功能方法参考官网文档即可；

例如：不想自定义一个复杂的导出功能，在使用官网给的例子的情况下，使用自己的导出方法。删除掉默认模板导出功能，如下图所示：

总结：利用官网文档学习使用layui框架，再此基础上进行修改和完善达到我们想要的功能。

js实现：

layui.use(['table','form'],

function()

{

$

=

layui.jquery

table

=

layui.table

tableIns

=

initTable()

})

//加载列表

function

initTable(){

//

执行渲染

tableIns

=

table.render({

id:

'idTest',

elem

:

'#deviceTable',

//

指定原始表格元素选择器（推荐id选择器）

size:

'lg',

height

:

'full-20',

//

容器高度

url

:

'/csCloud-admin/deviceController/getDeviceList.do',

where:

{

'orgId':$("#orgId").val(),

'coldNum':$("#coldNum").val(),

'devType':$("#devType").val(),

'isUsed':$("#isUsedId").val()

},

method

:

'post',

cols

:

[

[

//

标题栏

{

field

:

'rownum',

title

:

'序号',

width

:

100,

sort

:

true

},

{

field

:

'devNum',

title

:

'设备编号',

width

:

200

},

{

field

:

'devAlias',

title

:

'设备别名',

width

:

100

},

{

field

:

'devTypeVal',

title

:

'设备类型',

width

:

100

},

{

field

:

'devModel',

title

:

'设备型号',

width

:

100

},

{

field

:

'stateVal',

title

:

'设备状态',

width

:

100

},

{

field

:

'coldNum',

title

:

'冷库编号',

width

:

100

},

{

field

:

'orgName',

title

:

'所属机构',

width

:

300

},

{

field

:

'isUsedValue',

title

:

'状态',

width

:

100

},

{

fixed

:

'right',

width

:

300,

align:'center',

toolbar

:

'#barDemo'

}

]

],

//

设置表头

page

:

true,

limits

:

[

10,30,

60,

90,

150,

300

],

limit

:

10

})

return

tableIns

}

jsp实现：

<div

class="layui-fluid">

<div

class="layui-row">

<div

class="layui-col-lg12">

<table

id="deviceTable"></table>

</div>

</div>

</div>

以上这篇layui实现table加载的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:layui的table单击行勾选checkbox功能方法layui实现点击按钮给table添加一行layui结合form,table的全选、反选v1.0示例讲解

---