layui如何实现选择列表,打勾,点击确定返回数据

这篇文章将为大家详细讲解有关layui如何实现选择列表,打勾,点击确定返回数据,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联网站建设公司,提供成都网站设计、成都网站制作,网页设计,建网站,PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,是专业的做网站团队,希望更多企业前来合作!

如下所示:





 文件数据
 
 
 



  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;
  }
 
  
  
  
   
  
           搜索
  
                     选择/       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;   }  

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

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如何实现选择列表,打勾,点击确定返回数据
链接分享:http://cdiso.cn/article/ppcgih.html