微客导航 » 文章资讯 » layui 选择列表,打勾,点击确定返回数据的例子

layui 选择列表,打勾,点击确定返回数据的例子

2023-08-15 12:19:05 169

如下所示：





文件数据






body
{
background-color:#F0F0F0;
}
#content
{
margin-top:2px;
}
#btns
{
float:left;
}
#btns.layui-btn
{
margin-top:5px;
}
#Addbtn
{
margin-left:20px;
}
.layui-btn
{
background-color:#3385ff;
width:120px;
}
#datatable
{
background-color:White;
margin-top:5px;
clear:both;
}
.topbox
{
height:50px;
background-color:#ffffff;
}
.searchbox
{
float:right;
margin-right:20px;
}
.searchinput,.searchbtn
{
float:left;
margin-top:5px;
}
.searchinput
{
width:300px;
margin-left:20px;
}
.searchbtnbutton
{
width:80px;
}

搜索

选择/ layui.use('form',function(){ varform=layui.form; }); vartable; vardatas=null; functionBindData(){ $.ajax({ cache:false, async:false, url:'/ModelList/BindModelListView', type:'get', dataType:'json', success:function(data){ DataTable(data); },error:function(data){ alert(JSON.stringify(data)); } }) } functionDataTable(data){ layui.use('table',function(){ table=layui.table; window.demoTable=table.render({ id:'tempData', elem:'#demo', data:data, cols:[[ {checkbox:true,title:'全选',width:33} ,{field:'modelname',title:'名称',width:260,align:'left'} ,{field:'name',title:'产品',width:200,align:'left',templet:'#ProductTpl'} ,{field:'version',title:'版本',width:200,align:'left'} ,{field:'mixname',title:'对象',width:150,align:'left'} ,{field:'methodsName',title:'方法',width:150,align:'right'} ,{field:'attributename',title:'属性',width:180,align:'left',templet:'#FeaturesTpl'} //,{field:'name',title:'文件',width:260,align:'left',templet:'#DataListTpl'} //,{field:'name',title:'文件',width:260,align:'left',templet:'#DataListTpl'} ,{field:'ModelListType',title:'类型',width:150,align:'left'} //,{field:'',title:'操作',width:300,align:'center',toolbar:'#barDemo',fixed:'right'} ]], height:500, even:true, page:true }); //监听工具条 table.on('tool(test)',function(obj){ vardata=obj.data; if(obj.event==='Select'){ alert("select"); } }); }) } BindData(); varcallbackdata=function(){ varcheckStatus=table.checkStatus('tempData') ,data=checkStatus.data; returndata; }

此页面为弹出框页面，选择某一列后，点击确定返回数据

layui.use('layer',function(){
varlayer=layui.layer;
layer.open({
cache:false,
type:2,
title:'对比',
skin:'layui-layer-tb_125',
area:['600px','250px'],
content:'../ModelList/ModelMapNodeAttributeContrastForm',
moveOut:true,
zIndex:layer.zIndex,
btn:['确定','关闭'],
yes:function(index){
//当点击‘确定'按钮的时候，获取弹出层返回的值
varresdata=window["layui-layer-iframe"+index].callbackdata();
//最后关闭弹出层
layer.close(index);
layui.use('layer',function(){
varlayer=layui.layer;
layer.open({
type:2,
title:'查看',
skin:'layui-layer-tb_125',
area:['600px','250px'],
content:'../ModelList/ModelMapNodeAttributeDataForm?ContrastModelId='+resdata["0"].modelid+'&ContrastModelName='+resdata["0"].modelname+'&ContrastProductId='+resdata["0"].productconfigid+'&aaaaaa=1',
moveOut:true,
zIndex:layer.zIndex,
cancel:function(index,layero){
layer.close(index);
returntrue;
},end:function(){

}
});
});


},
cancel:function(index){
//右上角关闭回调
layer.close(index);
}
});
});

以上这篇layui选择列表,打勾,点击确定返回数据的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

layui 选择列表,打勾,点击确定返回数据的例子

热门推荐

随机推荐