layui.js源码_layui开源项目

文章目录：

• 1、layui中怎么写自己的js
• 2、现在版本的laytpl.js必须引入layui.js吗
• 3、layui实现table加载的示例代码
• 4、关于laydate.js的源码修改的问题

layui中怎么写自己的js

对得起自己的生命，对得起自己的新车。

祥子买车，不是为了摆阔（向人炫耀）广而是为了谋生，为了过上更好的生活；

买车后的多拉快跑。

（对得起自己的生活，更主要是对自己负责，不仅是要对得起新车觉得作者的评价是恰当的（合理的、客观的）

现在版本的laytpl.js必须引入layui.js吗

layui采用的是模块加载的方式使用模板引擎laytpl

layui.use('laytpl', function(){

    //do something

}

所以，是需要使用模块加载的方式使用。

但是！！！ 模块化的东西一般没有依赖的都可以单独使用，比如这个laytpl。

我教你怎么改。。打开这个laytpl文件，文件默认是压缩的，可以使用HBuilder自带的代码整理，整理格式也可以通过网上的工具进行格式整理，也可以不整理格式，因为改的地方很少。

//以下是压缩情况下的

layui.define(function(e) {  //开头是这个，是定义模块的

o.v = "1.2.0", e("laytpl", o)}); // 结尾是这个

1、将layui.define(function(e) { 

改为 (function(e){

2、将 o.v = "1.2.0", e("laytpl", o)}); 改为 

o.v = "1.2.0", window.laytpl = o;})(window);

// 通过看源码，发现传入的这个e实际是window对象。

// 其中是o就是你所需要的laytpl这个对象

// 然后我们将它改成一个自执行函数，创建一个私有的作用域，最后将o这个对象覆盖laytpl

// 就可以通过 laytpl 单独使用了。

layui实现table加载的示例代码

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="239a-4aca-be4f-4e1a layui-fluid"

div

class="4aca-be4f-4e1a-a37b layui-row"

div

class="be4f-4e1a-a37b-cb2e layui-col-lg12"

table

id="deviceTable"/table

/div

/div

/div

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

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

关于laydate.js的源码修改的问题

把.layui-laydate .layui-this中的background去掉，

添加样式

.layui-laydate .layui-this:before { content: " ";position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 8px;background: ##009688;z-index: -1;}