< script th: inline= "none" >
layui. use ( [ 'table' , 'layer' , 'form' , 'jquery' , 'upload' , 'layer' ] , function ( ) {
var upload = layui. upload;
var table = layui. table;
var layer = layui. layer;
var form = layui. form;
var $ = layui. jquery;
var img= null ;
$ ( 'body' ) . removeClass ( 'layui-hide' ) ;
var tableIns= table. render ( {
elem: '#permissionTable'
, method: 'post'
, url: '/sparePartData'
, toolbar: '#permissionTableToolBar'
, cols: [ [
{ field: 'partNumber' , width: 165 , title: '零件号' , fixed: 'left' , sort: true }
, { field: 'name' , width: 165 , title: '名称' , sort: true }
, { field: 'partDescription' , width: 165 , title: '零件描述' }
, { field: 'diagram' , width: 165 , title: '图示' , templet: '<div><img src="image/{{ d.diagram }}" alt="" style="width:30px; height:30px;" οnclick="showBigImage(this)""></div>' }
, { field: 'dataVersion' , width: 165 , title: '数据版本' }
, { field: 'importance' , width: 165 , title: '重要度' }
, { field: 'company' , width: 165 , title: '单位' }
, { field: 'drawingNo' , width: 165 , title: '图纸号' }
, { field: 'drawingVersion' , width: 165 , title: '图纸版本' }
, { field: 'apply' , width: 165 , title: '是否申请新零件号' , templet: function ( d) {
if ( d. apply=== "Y" ) {
return '<input type="checkbox" name="apply" value=' + d. id+ ' lay-skin="switch" lay-filter="status" lay-text="Y|N" checked>' ;
} else {
return '<input type="checkbox" name="apply" value=' + d. id+ ' lay-skin="switch" lay-filter="status" lay-text="Y|N">' ;
}
} }
, { field: 'followUp' , width: 165 , title: '沿用件' , templet: function ( d) {
if ( d. followUp=== "Y" ) {
return '<input type="checkbox" name="followUp" value=' + d. id+ ' lay-skin="switch" lay-filter="status" lay-text="Y|N" checked>' ;
} else {
return '<input type="checkbox" name="followUp" value=' + d. id+ ' lay-skin="switch" lay-filter="status" lay-text="Y|N">' ;
}
} }
, { field: 'partCategory' , width: 165 , title: '零件类别' }
, { field: 'materialScience' , width: 165 , title: '材料' }
, { field: 'materialStandard' , width: 165 , title: '材料标准' }
, { field: 'outlineDimension' , width: 165 , title: '轮廓尺寸' , sort: true }
, { field: 'weight' , width: 165 , title: '重量' }
, { field: 'processSpecification' , width: 165 , title: '工艺规格' }
, { field: 'processConsumption' , width: 165 , title: '工艺用量' }
, { field: 'weldingLength' , width: 165 , title: '焊接长度' }
, { field: 'coatingArea' , width: 165 , title: '涂装面积' }
, { field: 'right' , width: 165 , title: '操作' , align: 'center' , toolbar: '#permissionTableRowBar' , fixed: 'right' }
] ] ,
page: true
} ) ;
showBigImage = function ( e) {
console. log ( e)
layer. open ( {
type: 1 ,
title: false ,
closeBtn: 0 ,
shadeClose: true ,
area: [ $ ( e) . width + 'px' , $ ( e) . height + 'px' ] ,
content: "<img src=" + $ ( e) . attr ( 'src' ) + " />"
} ) ;
}
图片的样式
< style>
img {
width: 300 px;
}