layui页面操作，点击一个添加页面，跳转有确定，然后点击确定后将选择的几个数据返回前一个页面获取值，然后ajax请求后台...

最新推荐文章于 2024-05-14 09:38:54 发布
最新推荐文章于 2024-05-14 09:38:54 发布
阅读量2.1k 收藏 1
点赞数 1
文章标签： javascript 前端 json ViewUI
原文链接：http://www.cnblogs.com/q1359720840/p/10916372.html
版权

custUserIndex.html [添加页面代码]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>受试者</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">   
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
	<!--		<div class="layui-inline">
				<label class="layui-form-label">编号</label>
				<div class="layui-input-block">
					<input type="text" name="id" placeholder="请输入编号" autocomplete="off" class="layui-input">
				</div>
			</div>-->
	<!--		<div class="layui-inline">
				<label class="layui-form-label">问卷编号</label>
				<div class="layui-input-block">
					<input type="text" name="qnId" placeholder="请输入问卷编号" autocomplete="off" class="layui-input">
				</div>
			</div>-->
	<!--		<div class="layui-inline">
				<label class="layui-form-label">用户编号</label>
				<div class="layui-input-block">
					<input type="text" name="userId" placeholder="请输入用户编号" autocomplete="off" class="layui-input">
				</div>
			</div>-->
			<div class="layui-inline">
				<label class="layui-form-label">用户邮箱</label>
				<div class="layui-input-block">
					<input type="text" name="emain" placeholder="请输入用户邮箱" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">完成时间</label>
				<div class="layui-input-block">
					<input type="text" id="completeDate"  name="completeDate" placeholder="请输入完成时间" autocomplete="off" class="layui-input">
				</div>
			</div>
		<!--	<div class="layui-form-item">
				<label class="layui-form-label">有效期始</label>
				<div class="layui-input-inline">
					<input type="text" name="validateStart" id="validateStart" lay-verify="required" placeholder="请输入有效期始" autocomplete="off" class="layui-input layer-date start">
				</div>-->
		<!--	<div class="layui-inline">
				<label class="layui-form-label">排序</label>
				<div class="layui-input-block">
					<input type="number" name="sort" placeholder="请输入排序" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<input type="text" name="remark" placeholder="请输入备注" autocomplete="off" class="layui-input">
				</div>
			</div>
-->
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="manager_search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      
      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
            <!--更改为批量上传，先选择问卷，然后添加然后上传-->
          <button class="layui-btn layuiadmin-btn-admin" data-type="add">批量上传</button>
        </div>
        
        <table id="table_manage" lay-filter="table_manage"></table>  
        <script type="text/html" id="table_operate_html">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="openKS"><i class="layui-icon layui-icon-edit"></i>开始考试</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="openKS"><i class="layui-icon layui-icon-edit"></i>生成报告</a>
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="openKS"><i class="layui-icon layui-icon-edit"></i>查看报告</a>
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
      </div>
    </div>
  </div>

 <script src="/layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','laydate', 'table'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table;
      var laydate = layui.laydate;//实例化引用
      laydate.render({//构造
          elem: '#completeDate' //指定元素
          ,type: 'datetime',//时间类型
          min: '1900-1-1 00:00:00',//开始
          max: '2099-6-16 23:59:59',//结束
          trigger: 'click' //采用click弹出
          ,theme: '#393D49'//自定义颜色
          ,calendar: true,//公历


      });

    table.render({
        elem: "#table_manage",
        url: "/custUser/list",
        page: true,
        autoSort:false,
        response:{statusCode:200},
        initSort:{
		    field: 'id'
		    ,type: 'desc' 
		  },done:function(res,curr,count){
          // 隐藏列
          $(".layui-table-box").find("[data-field='id']").css("display","none");

      },
        cols: [
		[
			{field: "id",title: "编号",sort: !0},
			{field: "qnId",title: "问卷名称",width: "20%",sort: !0},
			{field: "userId",title: "用户名",width: "20%",sort: !0},
			{field: "emain",title: "用户邮箱",width: "10%",sort: !0},
			{field: "completeDate",title: "完成时间",width: "10%",sort: !0},
			{title: "操作",width: "40%",align: "center",fixed: "right",toolbar: "#table_operate_html"}
		]],
        text: "对不起，加载出现异常！"
    }),
    table.on("sort(table_manage)", function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
          //尽管我们的 table 自带排序功能，但并没有请求服务端。
          //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
          console.log(obj);
          table.reload("table_manage", {
              initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
              ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                  field: obj.field //排序字段
                  ,order: obj.type //排序方式
              }
          });
      });
    table.on("tool(table_manage)",
    function(e) {
        e.data;
        if ("del" === e.event){ 
            layer.confirm("确定删除此受试者？",
            function(t) {
            	$.ajax({
                  type: "post",
                  url: "/custUser/delete?id="+e.data.id,
                  success: function (result) {
					console.log(result);
					table.reload('table_manage'); //数据刷新
					layer.close(t); //关闭弹层
                  }
              });
            });
        }
        //考试，生成报告，。
        if ("openKS" === e.event){
            layer.msg('正在完善中,请稍等..');
        }



        else if ("edit" === e.event) {
            console.log($(e.tr));
            layer.open({
                type: 2,
                title: "编辑受试者",
                content: "/custUser/prepareUpdate?id="+e.data.id,
                area: ["710px", "450px"],
                btn: ["确定", "取消"],
                yes: function(e, t) {
                    var l = window["layui-layer-iframe" + e],
                    r = "manager_submit",
                    n = t.find("iframe").contents().find("#" + r);
                    l.layui.form.on("submit(" + r + ")",
                    function(t) {
                        t.field;
                        console.log(t.field);
                        $.ajax({
		                   type: "post",
		                   url: "/custUser/update",
		                   data:t.field,
		                   success: function (result) {
								console.log(result);
								table.reload('table_manage'); //数据刷新
								layer.close(e); //关闭弹层
		                   }
		               });
                    }),
                    n.trigger("click")
                },
                success: function(e, t) {}
            })
        }
    })
    
    //监听搜索
    form.on('submit(manager_search)', function(data){
      var field = data.field;
      
      //执行重载
      table.reload('table_manage', {
        where: field
      });
    });
  
    //事件
    var active = {
      batchdel: function(){
        var checkStatus = table.checkStatus('table_manage')
        ,checkData = checkStatus.data; //得到选中的数据

        if(checkData.length === 0){
          return layer.msg('请选择数据');
        }
        
        layer.prompt({
          formType: 1
          ,title: '敏感操作，请验证口令'
        }, function(value, index){
          layer.close(index);
          
          layer.confirm('确定删除吗？', function(index) {
            
            //执行 Ajax 后重载
            /*
            admin.req({
              url: 'xxx'
              //,……
            });
            */
            table.reload('table_manage');
            layer.msg('已删除');
          });
        }); 
      },

        //添加受试者
      /*

      */


     /*
        layer.open({
          type: 2
          ,title: '添加试卷'
          ,content: '/custQuestionnaire/choose',
                area: ["1510px", "610px"]
          ,btn: ['确定', '取消']
            ,yes: function(index, layero){
                var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submitID = 'manager_submit'
                    ,submit = layero.find('iframe').contents().find('#'+ submitID);

                //监听提交
                iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                    var field = data.field; //获取提交的字段
                    console.log(field);
              //提交 Ajax 成功后，静态更新表格中的数据
             $.ajax({
                   type: "post",
                   url: "/custUser/insert",
                   data:field,
                   success: function (result) {
						console.log(result);
						table.reload('table_manage'); //数据刷新
						layer.close(index); //关闭弹层
                   }
               });

            });

            submit.trigger('click');
          }
        });
      */
        add: function(){
            var ide=  layer.open({
                type: 2,
                title: "添加试卷",
                content: "/custQuestionnaire/choose",
                area: ["1300px", "450px"],
                btn: ["确定", "取消"],
                shadeClose:true,//点击阴影处关闭窗口。
                yes: function(index, layero) {

                    var iframeWindow = window['layui-layer-iframe'+ index]
                        ,submitID = 'btn2_choose'
                        ,submit = layero.find('iframe').contents().find('#'+ submitID);
                    var selected = layero.find("iframe")[0].contentWindow.getSelected();
                    console.log(selected);
                    //将用户id和授权文档进行绑定
               /*     $.ajax({
                        cache:false,
                        type:"post",
                        data:{"CompanyData":JSON.stringify(selected),"id":e.data.id} ,
                        url:"/custUser/inserts",
                        async:true,
                        traditional:true,
                        success:function (res) {
                            if(res.code=='200'){
                                if(res.msg=="-1"){
                                    layer.msg("授权成功");
                                    //关闭当前窗口
                                    layer.close(ide);
                                    //刷新当前页面..
                                    //location.reload();
                                }else{
                                    layer.msg(res.msg);
                                    //关闭当前窗口
                                    layer.close(ide);

                                }

                            }

                        }, error:function(res){
                            alert(res.msg)

                        }
                    })*/

                },
                success: function(e, t) {}
            })
        }

    }  
    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
  </script>
</body>
</html>

　　被请求页面代码：custQuestionnaireChoose.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>授权问卷</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">   
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">

			<div class="layui-inline">
				<label class="layui-form-label">名称</label>
				<div class="layui-input-block">
					<input type="text" name="title" placeholder="请输入名称" autocomplete="off" class="layui-input">
				</div>
			</div>
			<!--修改-->
			<div class="layui-inline">
				<label class="layui-form-label">问卷类型</label>
				<div class="layui-input-block">
					<select name="type" lay-verify="">
						<option value="">请输入</option>
						<option value="dist">dist</option>
						<option value="360">360</option>
					</select>
				</div>
			</div>




          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="manager_search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      
      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>
        </div>

          <table id="table_manage" lay-filter="table_manage"></table>
          <div style="display:none;">
              <button id="btn2_choose" class="layui-btn layuiadmin-btn-admin" data-type="choose">选择</button>
          </div>

      </div>
    </div>
  </div>

 <script src="/layuiadmin/layui/layui.js"></script>  
  <script>
      var checkData=[];
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table;
    
    table.render({
        elem: "#table_manage",
        url: "/custQuestionnaire/list",
        page: true,
        autoSort:false,
        response:{statusCode:200},
        initSort:{
		    field: 'id'
		    ,type: 'desc' 
		  },done:function(res,curr,count){
          // 隐藏列
         $(".layui-table-box").find("[data-field='id']").css("display","none");

      },
        cols: [
		[
            {type:'checkbox'},
			{field: "id",title: "编号",sort: !0},
			{field: "title",title: "名称",width:"15%",sort: !0},
            {field: "type",title: "问卷类型",width:"10%",sort: !0, templet: function(d){
                    if (d.type=="dist") {  // 自定义内容
                        return "dist";
                    } else if (d.type=="360") {
                        return "360";
                    }
                    else {
                        return "其他";
                    }
                } },
			{field: "start",title: "导语",width:"15%",sort: !0},
			{field: "end",title: "结束语",width:"15%",sort: !0},
			{field: "report",title: "报告语",width:"15%",sort: !0},

			{title: "操作",width:"30%",align: "center",fixed: "right",toolbar: "#table_operate_html"}
		]],
        text: "对不起，加载出现异常！"
    }),
    table.on("sort(table_manage)", function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
          //尽管我们的 table 自带排序功能，但并没有请求服务端。
          //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
          console.log(obj);
          table.reload("table_manage", {
              initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
              ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                  field: obj.field //排序字段
                  ,order: obj.type //排序方式
              }
          });
      });
    table.on("tool(table_manage)",
    function(e) {
        e.data;
        if ("del" === e.event){
            layer.confirm("确定删除此授权问卷？",
            function(t) {
            	$.ajax({
                  type: "post",
                  url: "/custQuestionnaire/delete?id="+e.data.id,
                  success: function (result) {
					console.log(result);
					table.reload('table_manage'); //数据刷新
					layer.close(t); //关闭弹层
                  }
              });
            });
        }



    })
    
    //监听搜索
    form.on('submit(manager_search)', function(data){
      var field = data.field;
      
      //执行重载
      table.reload('table_manage', {
        where: field
      });
    });


      //事件
      var active = {
          choose: function(){
              var checkStatus = table.checkStatus('table_manage');
              checkData = checkStatus.data; //得到选中的数据

              if(checkData.length === 0){
                  return layer.msg('请选择数据');
              }

              return checkData;
          }

      }

    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
  </script>
</body>
</html>
<script src="/jquery/jquery-3.3.1.js"></script>
<script>
    var getSelected = function () {
        $("#btn2_choose").click();
        var selected = checkData;
        return selected;
    }
</script>

　　

 

转载于:https://www.cnblogs.com/q1359720840/p/10916372.html

aeteoi5717
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui跳转html如何带参数,Layui跳转页面代码（可携带复杂参数）
weixin_42519985的博客
06-08 7033
今天用了Layui的“数据表格 - 数据操作”示例代码，结果发现点击“编辑”按钮出出来一个弹出消息框，效果如下：虽然说也可以用“弹出层”做编辑页面，但是，由于我编辑的东西很多，用“弹出层”不太理想。我就想能不能像URL链接那样，直接点击链接就跳转走了。例如：点击一个”编辑“按钮，就直接跳转到相对应的”编辑页面“。下面是我给大家的方法，大家可以做一个参考：注意：Layui跳转页面代码最重要的部份是l...
js layui跳转页面_解决layer弹出层的内容页点击按钮跳转到新的页面问题
weixin_33716865的博客
12-28 6625
在参与的一个项目中，有一个这样的需求，导入基础数据成功后，默认弹出一个管理员登录页，点击登录按钮，需要跳到管理页面。导入页按钮：导入导入按钮的点击事件，点击后会出现layer弹出层$("#start").click(function(){// 判断有没有选择区域var regionCode = $("#regionCode").val();if(regionCode!=0){// 获取区域名，用于...
a标签去掉下划线_html教程入门的a标签使用方法，帮你理清逻辑，入门就是快
weixin_39573136的博客
11-27 223
大家好，我是江湖哥，今天分享html教程入门级的部分,大神请绕道，小白请点赞，哈哈，言归正传：Html教程：a标签知识要点：1. a标签的概念2. a标签属性一：什么是a标签？a标签的作用：就是用于控制页面与页面之间的跳转的a标签的格式：需要展示给用户看见的内容江湖哥博客二：a标签的属性a标签中有一个target属性，这个属性的作用就是专门用于控制如何跳转值描述_blank于在新的选项卡中跳转，也...
【前端】LayUI监听事件汇总
最新发布
qq_25285531的博客
05-14 674
一、监听单选按钮事件 二、监听下拉框事件
layui 跳转页面时的传参和取值问题
zyt_oneself的博客
03-31 7735
layui 跳转页面时的传参和取值问题前言一、跳转页面1.弹框按钮2.调用弹框方法二、取值1.取值的方法2.调用方法总结 前言 layui 如何在当前页面点击按钮弹框，弹出的框内容为新页面，将值传到该页面中，并进行取值，是本篇文章主要记录的问题。 提示：以下是本篇文章正文内容，下面案例可供参考 一、跳转页面 点击弹框按钮，弹出新页面，用一下方法，layer.open即弹出一个窗口 示例如下： 1.弹框按钮 <button class="layui-btn layui-btn-normal" id=
layer.js的弹出层点击确认跳转页面
热门推荐
wangweiscsdn的博客
03-01 2万+
代码如下： layer.open({ content: '感谢您参与本次活动！', btn: ['确认', '取消'], yes: function(index, layero) { window.
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
08-28
本文将详细介绍如何实现从列表的item项跳转到下一个页面。 首先，我们需要理解微信小程序提供的三种页面跳转方式： 1. **wx.navigateTo()**：保留当前页面，跳转到应用内的某个页面。这种跳转方式不会关闭当前页面...
layui自己添加图片按钮并点击跳转页面的例子
10-16
在本文中，我们将探讨如何在layui框架中自定义添加一个带有图片的按钮，并实现点击该按钮后跳转到新的页面。layui是一个轻量级的前端UI框架，提供了丰富的组件和便捷的操作方式，使得网页开发更为高效。下面我们将分...
微信小程序由上将一个页面的数据传到下一个页面
03-29
假如说是A页面数据传给B页面，我用的是URL拼接字符串的方法实现的，这里的Url是指A跳转B页面时的链接路径； 在A页面中： buyNowDetailClick: function () { let that = this //这个this是指当前页面（page）因为page...
如何做到打开一个页面，过几分钟自动转到另一页面
10-30
在网页开发中，有时我们需要实现一个功能：当用户打开一个页面后，经过设定的时间间隔，页面会自动跳转到另一个指定的页面。这种效果可以通过JavaScript的定时器功能来实现。以下将详细介绍两种常用的方法。 首先，...
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
10-18
今天小编就为大家分享一篇Layui给数据表格动态添加一行并跳转到添加行所在页的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui-table对返回的数据进行转变显示的实例
10-16
今天小编就为大家分享一篇layui-table对返回的数据进行转变显示的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Layui admin 点击按钮跳转到指定Tab页
weixin_45384584的博客
06-15 1194
Layui admin 点击按钮跳转到指定Tab页 //url:跳转的界面 //title:跳转的标题 //id: tab的lay-id parent.layui.index.openTabsPage(url, title, id);
layui菜单列表不自动展开_layui实现左侧菜单点击右侧内容区显示
weixin_42308943的博客
12-31 2753
layui这个前端框架对后端人员来说提供了极大的方便，很大一部分同学在刚接触到这个框架就迫不及待的要动手实践了，刚好最近需要开发一个后台管理项目，就拿layui来进行学习和实践．还没有接触到的同学可以先通读一遍文档，这样在遇到问题的时候才能够对症下药，仔细研究相关的板块今天我们先来学习一下使用layui来实现左侧点击菜单，内容区显示tab实验效果实现过程html代码content="width=d...
使用layui遇到的一些问题及解决方案
p15097962069的博客
10-27 450
使用layui遇到的一些问题及解决方案
【教程】layui调用弹出层后，返回并刷新父级页面
hifhf的专栏
04-22 2295
layui版本v2.2.6在页面中，有时需弹出一个对话框，给出一定的提示，比如：修改成功，点击确定按钮后，父一级的页面需要刷新以显示修改后的内容，代码如下：layui.use('layer',function(){ varlayer=layui.layer; layer.open({ title:'提示' ,content:'修...
怎么让图片平铺 传进来的图片自适应这个div
若星汉灿烂
10-12 2万+
1.html <div id="bo"> <img src="imgs/1.jpg"> </div> css #bo{ display:inline-block; width:100%;/*图片自适应的父容器的宽*/ height:100%;/*图片自适应的父容器的高*/ } #bo img{ width:100%; height:100%; } ...
layui 使用 layer.open 打开新页面时 常见问题
Y_vocefenrir的博客
02-25 4858
layer.open 代码使用如下 table.on('tool(orderGuestRoomTable)', function (obj) { /*订单详情*/ if (obj.event === "detail") { let btn = []; if (obj.data.status == 0) { btn = ['派遣订单', '取...
写一个layui表格点击按钮跳转页面的功能
04-24
好的，下面是实现layui表格点击按钮跳转页面的功能的代码示例： HTML代码： ``` <table id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a> </script> ``` JavaScript代码： ``` //渲染表格 layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', toolbar: true, url: '/demo/table/user/', cols: [[ {field: 'id', title: 'ID', width:80}, {field: 'username', title: '用户名', width:120}, {field: 'city', title: '城市', width:100}, {field: 'sign', title: '签名', minWidth: 150}, {field: 'experience', title: '积分', width: 80, sort: true}, {field: 'score', title: '评分', width: 80, sort: true}, {field: 'classify', title: '职业', width: 100}, {field: 'wealth', title: '财富', width: 135, sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]], page: true }); //监听工具条 table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ //跳转到详情页 window.location.href = '/detail?id=' + data.id; } else if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ obj.del(); layer.close(index); }); } }); }); ``` 注意事项： 1. 需要引入 layui 的相关文件； 2. HTML 中需要定义表格和按钮的样式； 3. JavaScript 中需要定义表格的相关属性和监听事件； 4. 点击“查看”按钮会跳转到详情页，详情页的URL需要根据实际情况进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值