layui 选择列表,打勾,点击确定返回数据的例子
更新时间：2019年09月02日 09:04:08 作者：lxysoid
今天小编就为大家分享一篇layui 选择列表,打勾,点击确定返回数据的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>文件数据</title>
<link href="~/Content/Base/layui/css/layui.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script src="~/Content/Base/layui/layui.js" type="text/javascript"></script>
<script src="../../../../Content/Views/js/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
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;
}
.searchbtn button
{
width: 80px;
}
</style>
<div id="content">
<div class="topbox">
<div class="searchinput">
<input type="text" name="name" class="layui-input" id="SearchText" />
</div>
<div class="searchbtn">
<button type="button" class="layui-btn" onclick="BtnSearchDataListInfo()">
搜索</button></div>
</div>
<div id="datatable">
<table id="demo" lay-filter="test" style="height:100%">
</table>
</div>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn-mini" lay-event="Select" style="color:#3385ff">选择</a><span style="color:#3385ff">/</span>
</script>
<script type="text/javascript">
layui.use('form', function () {
var form = layui.form;
});
var table;
var datas = null;
function BindData() {
$.ajax({
cache: false,
async: false,
url: '/ModelList/BindModelListView',
type: 'get',
dataType: 'json',
success: function (data) {
DataTable(data);
}, error: function (data) {
alert(JSON.stringify(data));
}
})
}
function DataTable(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) {
var data = obj.data;
if (obj.event === 'Select') {
alert("select");
}
});
})
}
BindData();
var callbackdata = function () {
var checkStatus = table.checkStatus('tempData')
, data = checkStatus.data;
return data;
}
</script>
</body>
</html>
此页面为弹出框页面，选择某一列后，点击确定返回数据
layui.use('layer', function () {
var layer = 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) {
//当点击‘确定'按钮的时候，获取弹出层返回的值
var resdata = window["layui-layer-iframe" + index].callbackdata();
//最后关闭弹出层
layer.close(index);
layui.use('layer', function () {
var layer = 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);
return true;
}, end: function () {
}
});
});
},
cancel: function (index) {
//右上角关闭回调
layer.close(index);
}
});
});
以上这篇layui 选择列表,打勾,点击确定返回数据的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了javascript单例模式与策略模式,结合实例形式详细分析了javascript单例模式与策略模式基本概念、功能、实现技巧与相关注意事项,需要的朋友可以参考下2023-06-06
在做网站系统时经常会用到图片上传功能,用户往往希望能看到自己上传的图片的样子,下面这篇文章主要给大家介绍了关于如何利用原生JS实现图片预览加上传,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了关于html，css，js三者的加载顺序问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Three.js中实现一个OBBHelper,本文参考Box3Helper源码，并写出一个OBBHelper，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-09-09
JavaScript判断表单中多选框checkbox选中个数的方法
这篇文章主要介绍了JavaScript判断表单中多选框checkbox选中个数的方法,涉及javascript针对checkbox复选框的遍历与判断技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
Async / Await是人们期待已久的JavaScript功能，它使使用异步功能更加有趣和易于理解。这篇文章主要给大家介绍了关于Javascript中异步等待的相关资料,需要的朋友可以参考下2021-05-05
JavaScript检测字符串中是否含有html标签实现方法
这篇文章主要介绍了JavaScript检测字符串中是否含有html标签实现方法,本文直接给出实现代码,需要的朋友可以参考下2015-07-07
注册模块中输入密码需要显示密码强度（低中高）本例将做的效果给大家分享下2014-06-06
这篇文章主要介绍了JavaScript中的回调函数，想详细了解回调函数的同学，一定要看一下2021-04-04
这篇文章主要为大家详细介绍了微信小程序获取用户收货地址的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
最新评论