JavaScript

超轻量级php框架startmvc

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

更新时间:2020-09-09 23:36:02 作者:startmvc
如下所示:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

如下所示:


<!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 选择列表,打勾,点击确定返回数据的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

layui 列表 打勾 点击确定