Layui table 初始化渲染、行监听

1.表格初始化渲染,


  layui.use("table", function () {
    var table = layui.table;
    table.render({
      elem: "#search_njq_result",
      url: ajaxurl.searchNJQInfo + "?qsdw_code=" + code + "&zjrxm=" + zjrxm, 
      method: "GET",
      request: {
        pageName: "pageNum", //页码的参数名称,默认:page
        limitName: "pageSize", //每页数据量的参数名,默认:limit
      },
      headers: {
        Authorization: localStorage.token,
      },
      page: {
        //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
        layout: ["count", "prev", "page", "next", "skip"], //自定义分页布局
        groups: 1, //只显示 1 个连续页码
        first: false, //不显示首页
        last: false, //不显示尾页
      },
      limit: 8,
      cols: [
        [
          //表头
          {
            field: "zldwmc",
            title: "行政区划",
            width: 120,
          },
          {
            field: "dkbm",
            title: "地块编号",
            width: 90,
          },
          {
            field: "scmj",
            title: "实测面积",
            width: 90,
          },
          {
            field: "tbmj",
            title: "图斑面积",
          },
        ],
      ],
      parseData: function (res) {
        //res 即为原始返回的数据
        console.log(res);
        debugger;
        return {
          code: 0, //解析接口状态
          msg: "解析成功", //解析提示文本
          count: res.totalCount, //解析数据长度
          data: res.data, //解析数据列表
        };
      },
    });
  });


效果:

2.行监听

    //监听行单击事件(双击事件为:rowDouble)
    table.on("row(search_jbnt_result)", function (obj) {
      var data = obj.data;
      var geoString = data.st_astext;
      //地图上添加地块
      removePreLands(highlightJBNTPrimitives);
      highlight(geoString, highlightJBNTPrimitives, "#00FFFF");
      showLandInfo(data, "#jbnt_landInfoContent", "#jbnt_landInfoTable");
      var centerPoint = resetCenterPoint(data.centerpoint);
      jbntviewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          centerPoint[0],
          centerPoint[1],
          1000.0
        ),
      });
      //标注选中样式
      obj.tr
        .addClass("layui-table-click")
        .siblings()
        .removeClass("layui-table-click");
    });

layui table是一款基于layui框架的表格组件,它提供了丰富的功能和灵活的配置选项。要实现自动跳转页面,可以通过监听表格的点击事件,然后在事件回调函数中进页面跳转操作。 以下是实现自动跳转页面的步骤: 1. 在HTML页面中引入layui和jQuery库,并初始化layui组件。 2. 创建一个表格,并设置需要展示的列和数据。 3. 给表格添加点击事件监听器,当用户点击某一时触发事件。 4. 在事件回调函数中获取点击的数据,并根据需要进页面跳转操作。 下面是一个示例代码,演示如何使用layui table实现自动跳转页面: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui table自动跳转页面</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> </head> <body> <table id="demo" lay-filter="test"></table> <script> layui.use(['table'], function(){ var table = layui.table; // 渲染表格 table.render({ elem: '#demo', url: '/api/getData', // 数据接口 cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'} ]], page: true }); // 监听点击事件 table.on('row(test)', function(obj){ var data = obj.data; // 获取点击的数据 // 根据需要进页面跳转操作,例如跳转到详情页 window.location.href = '/detail?id=' + data.id; }); }); </script> </body> </html> ``` 在上述示例代码中,我们使用了layuitable组件来渲染表格,并通过监听点击事件实现了自动跳转页面的功能。当用户点击某一时,会获取到该的数据,并根据需要进页面跳转操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值