layui中弹出层出现数据表格

中弹出层出现数据表格

layui

中的弹出层出现数据表格

function

popup

(

result

)

{

            layui

.

use

(

'table'

,

function

()

{

var

 table 

=

 layui

.

table

;

                layer

.

open

({

                    type

:

1

,

                    area

:

[

"700px"

,

'430px'

],

                    title

:

"

选择

"

,

                    maxmin

:

false

,

                    content

:

''

,

//

先定义⼀个数据表格的

div

框

success

:

function

(

index

,

 layero

)

{

                        table

.

render

({

                            elem

:

'#templateTable'

,

 height

:

300

,

 width

:

'100%'

,

 data

:

 result 

//result

格式为

[{},{}],

此处⽤的是固定数据

,

也可以⽤

url

来请求后台获取数据

,

如果使⽤

url

要根据

layui

规定的格式返回才可以渲染上

,

例：

{"code": 0,"msg": "","count": 1000,"data": [{}, {}]} 

或者使⽤

parseData

进⾏转化也可以

,

 cols

:

[[

//

设置数据表格表头

{

checkbox

:

true

}

//

开启复选框

,{

field

:

'path'

,

 title

:

'

⽂件名称

'

,

 width

:

700

,

 hide

:

true

}

,{

field

:'qad1'

,

 width

:

165

,

 title

:

'QAD

号

'

}

,{

field

:'sid'

,

 width

:

165

,

 title

:

'yst'

,

hide

:

true

}

,{

field

:'describe1'

,

 width

:

165

,

 title

:

'

物料描述

1'

}

,{

field

:'describe2'

,

 width

:

165

,

 title

:

'

物料描述

2'

}

,{

field

:'company'

,

 width

:

165

,

 title

:

'

设计单位

'

}

,{

field

:'qad2'

,

 width

:

165

,

 title

:

'QAD

号

'

}

,{

field

:'describe3'

,

 width

:

165

,

 title

:

'

物料描述

1'

}

,{

field

:'describe4'

,

 width

:

165

,

 title

:

'

物料描述

2'

}

,{

field

:'partNumber'

,

 width

:

165

,

 title

:

'

零件号

'

}

,{

field

:'company2'

,

 width

:

165

,

 title

:

'

设计单位

'

}

,{

field

:'place'

,

 width

:

165

,

 title

:

'

地点

'

}

,{

field

:'reference'

,

 width

:

165

,

 title

:

'

参考号

'

}

,{

field

:'workingNum'

,

 width

:

165

,

 title

:

'

⼯序号

'

}

,{

field

:'purchaseStock'

,

 width

:

165

,

 title

:

'

采购地点

/

制造地点

'

}

,{

field

:'supplierName'

,

 width

:

165

,

 title

:

'

供应商名称

'

}

]]

,

 page

:

true

//

使⽤分页

,

 limits

:

[

10

,

20

,

30

,

40

,

50

,

60

,

70

,

80

,

90

,

100

]

//

动态设置每页显⽰数据的条数

,

 limit

:

10

//

默认每页多少条

});

                        table

.

on

(

'checkbox(templateTable)'

,

function

(

obj

)

{

//

监听复选框

,

获取选择到的值

                             obj_data 

=

 obj

.

data

;

//

获取到选中复选框上的⼀⾏数据

let

 path

=

obj_data

.

path

;

//

获取某个字段的值

                            console

.

log

(

path

);

})

},

                    btn

:

[

'

确定

'

,

'

关闭

'

],

yes

:

function

(

index

,

 layero

)

{

                        $

.

post

(

"/sBom/save"

,

{

sid

:

 obj_data

.

sid

,

qad1

:

 obj_data

.

qad1

,

describe1

:

obj_data

.

describe1

,

describe2

:

obj_data

.

describe2

,

company

:

obj_data

.

company

,

                            company2

:

obj_data

.

company2

,

describe3

:

obj_data

.

describe3

,

describe4

:

obj_data

.

describe4

,

partNumber

:

obj_data

.

partNumber

,

place

:

obj_

data

.

place

,

purchaseStock

:

obj_data

.

purchaseStock

,

                            qad2

:

obj_data

.

qad2

,

reference

:

obj_data

.

reference

,

supplierName

:

obj_data

.

supplierName

,

workingNum

:

obj_data

.

workingNum

},

function

(

ob

j

)

{

if

(

obj

.

code

==

200

){

                                tableIns

.

reload

();

//

重载表格

}

                            layer

.

msg

(

obj

.

msg

);