精华内容
下载资源
问答
  • 表格点击事件
    千次阅读
    2022-06-15 09:12:25

    这里先记录一个行点击事件的坑

    初始化表格完成后利用事件给table(定位table需要在HTML代码中给table放入指定div)的

    done: function(res, curr, count){
     $('#div').find('.layui-table-body').find("table" ).find("tbody").children("tr").on('click',function(){
      var id = JSON.stringify($('#div').find('.layui-table-body').find("table" ).find("tbody").find(".layui-table-hover").data('index'));
      var obj = res.data[id];  //这里都是表格的数据
      fun.openLayer(obj);
     })
    }

    更多相关内容
  • 主要介绍了使用javascript生成动态表格并为每个单元格添加单击事件,需要的朋友可以参考下
  • 在学MVC过程中,我们一般都是利用layui插件里的layui数据表格加载数据库中的数据,而layui表格里有许多的事件监听,比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行...
  • Layui的表格点击事件

    万次阅读 2019-06-10 08:14:07
    这里说的是单行数据的点击事件 Layui有一个方法是获取到选中行的方法如下代码 这个方法是选中单选框的方法复选框也有复选框的方法,可以基于责怪单选的方法里面写 这里就是选择到选中框然后处理选中行的数据。 layui...

    Layui是一个比较常用的插件,目前我接触到layui的模块有表格模块与弹出层模块
    这里说的是单行数据的点击事件
    Layui有一个方法是获取到选中行的方法如下代码
    这个方法是选中单选框的方法复选框也有复选框的方法,可以基于责怪单选的方法里面写
    这里就是选择到选中框然后处理选中行的数据。

    layuiTable.on(‘row(tabDicName)’, function (obj) {
    var data = obj.data.DicNameID;//获取点击行数据
    //标注选中样式
    obj.tr.addClass(‘layui-table-click’).siblings().removeClass(‘layui-table-click’);
    //***单击选中单选框
    obj.tr.find(‘div.layui-unselect.layui-form-radio’)[1].click();
    });

    一般选中行的数据获取的方法是这样的。然后获取到再去处理这条数据的子项。
    所以就显得很麻烦。

    var data = layuiTable.checkStatus(‘tabDicName’);//获取点击行数据

    这里可以直接用再layui的方法里面搞事情。
    可以直接再layui里面写需要实现的东西。
    我这里需要实现的是提交这条数据到数据库查询我需要的东西。
    由于是上面layui的方法就是获取选中行的可以先看一下他获取到的数据
    我这里只需要他的这个ID很明显这里就获取到了这个ID
    在这里插入图片描述
    这里获取到了这个id然后直接写这个提交方法就可以了,这个方法只用于单选框。
    不能用在复选框里面。

    layuiTable.on(‘row(tabDicName)’, function (obj) {
    var data = obj.data.DicNameID;//获取点击行数据
    //标注选中样式
    obj.tr.addClass(‘layui-table-click’).siblings().removeClass(‘layui-table-click’);

       //***单击选中单选框
       obj.tr.find('div.layui-unselect.layui-form-radio')[1].click();
    
      tabDicNape = layuiTable.reload("tabDicNape", {
              url: "SelectDicNape",
              where: {
                    DicNameID:data
                },
       });
    

    这里把他提交到数据库去查询需要的东西就可以了。
    我这里用他来实现这个功能,如下,点击字典名这边的数据去数据库查询如果查出来就可以显示出这条数据。我这个贷款银行这里是没有数据的我切到其他数据去
    在这里插入图片描述
    这里可以看到我切到这条其他应用收款类型可以看到字典项那边是有数据的
    在这里插入图片描述

    展开全文
  • 今天小编就为大家分享一篇在Layui中操作数据表格,给指定单元格添加事件示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Layui事件监听的实现(表单和数据表格),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 不话不多说了,直接上代码吧:  <button class=layui-btn id=hqsj data-type=getCheckData>获取选中行数据</button>  <button class=layui-btn data-type=getCheckLength>...
  • ctrlSelectboolean在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作。(该属性自1.3.6版开始可用) checkOnSelectboolean如果为true,当用户点击行的时候该复选框就会被选中或取消选中。如果为false...

    DataGrid其中与选择,勾选相关

    DataGrid属性:
    singleSelect boolean 如果为true,则只允许选择一行。 false 
    ctrlSelect boolean 在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作。(该属性自1.3.6版开始可用) 
    checkOnSelect boolean 如果为true,当用户点击行的时候该复选框就会被选中或取消选中。如果为false,当用户仅在点击该复选框的时候才会呗选中或取消。(该属性自1.3版开始可用) true 
    selectOnCheck boolean 如果为true,单击复选框将永远选择行。如果为false,选择行将不选中复选框。(该属性自1.3版开始可用)
     
    DataGrid列是一个数组对象,该元素也是一个数组对象。元素数组里面的元素是一个配置对象,它用来定义每一个列字段。 
    checkbox boolean 如果为true,则显示复选框。该复选框列固定宽度。 

    DataGrid事件

    onSelect rowIndex, rowData 在用户选择一行的时候触发,参数包括:rowIndex:选择的行的索引值,索引从0开始。rowData:对应于所选行的记录。 
    onUnselect rowIndex, rowData 在用户取消选择一行的时候触发,参数包括:rowIndex:选择的行的索引值,索引从0开始。rowData:对应于取消选择行的记录。 
    onSelectAll rows 在用户选择所有行的时候触发。 
    onUnselectAll rows 在用户取消选择所有行的时候触发。 
    onCheck rowIndex,rowData 在用户勾选一行的时候触发,参数包括:rowIndex:选中的行索引,索引从0开始。rowData:对应于所选行的记录。(该事件自1.3版开始可用) 
    onUncheck rowIndex,rowData 在用户取消勾选一行的时候触发,参数包括:rowIndex:选中的行索引,索引从0开始。rowData:对应于取消勾选行的记录。(该事件自1.3版开始可用) 
    onCheckAll rows 在用户勾选所有行的时候触发。(该事件自1.3版开始可用) 
    onUncheckAll rows 在用户取消勾选所有行的时候触发。(该事件自1.3版开始可用) 

    方法

    getChecked none 在复选框呗选中的时候返回所有行。(该方法自1.3版开始可用) 
    getSelected none 返回第一个被选中的行或如果没有选中的行则返回null。 
    getSelections none 返回所有被选中的行,当没有记录被选中的时候将返回一个空数组。 
    clearSelections none 清除所有选择的行。 
    clearChecked none 清除所有勾选的行。(该方法自1.3.2版开始可用)  
    selectAll none 选择当前页中所有的行。 
    unselectAll none 取消选择所有当前页中所有的行。 
    selectRow index 选择一行,行索引从0开始。 
    selectRecord idValue 通过ID值参数选择一行。 
    unselectRow index 取消选择一行。 
    checkAll none 勾选当前页中的所有行。(该方法自1.3版开始可用) 
    uncheckAll none 取消勾选当前页中的所有行。(该方法自1.3版开始可用) 
    checkRow index 勾选一行,行索引从0开始。(该方法自1.3版开始可用) 
    uncheckRow index 取消勾选一行,行索引从0开始。(该方法自1.3版开始可用)

    展开全文
  • Ant Design Vue 给table表格行加点击事件

    千次阅读 2021-11-16 16:12:09
    这里点击事件触发onClick,返回的第一个参数是点击的行参数,第二个是行下标 function rowClick(record, index) { return { onClick: (event) => { console.log(record.tablename, index, event, "666"); }, }; } ...

    首先官方定义的是customRow设置行属性

    customRow设置行属性Function(record, index)

    官网上会给出这么使用:

    customRow 用法

    适用于 customRow customHeaderRow customCell customHeaderCell。遵循Vue jsx语法。

    <Table
      customRow={(record) => {
        return {
          xxx... //属性
          onClick: (event) => {},       // 点击行
          onDblclick: (event) => {},
          onContextmenu: (event) => {},
          onMouseenter: (event) => {},  // 鼠标移入行
          onMouseleave: (event) => {}
        };
      }}
      customHeaderRow={(column) => {
        return {
          onClick: () => {},        // 点击表头行
        };
      }}
    />

    但是很多小伙伴可能不会使用这种语法,或者一用就报错,跟我刚开始用一样 ,下面我们会介绍另一种方法:

    正题

    第一步

    给a-table元素内加入这个属性 :customRow="rowClick"

    <a-table
          bordered
          :data-source="dataSource"
          :columns="columns"
          :customRow="rowClick"
        />

    第二步 

    这样定义函数名就可以,然后返回你想用什么事件触发,这里点击事件触发onClick,返回的第一个参数是点击的行参数,第二个是行下标

    function rowClick(record, index) {
          return {
            onClick: (event) => {
              console.log(record.tablename, index, event, "666");
            },
          };
        }

     这里我用的是vue3.0,vue2.0写到方法里即可

    最后 

    如果对您有帮助,希望能给个👍评论/收藏/三连!

    博主为人老实,无偿解答问题哦❤

    展开全文
  • 使用customRow 设置行属性,写对应事件 ...补充知识:Ant-Design-Vue table 合并单元格,并且添加点击事件 点击行,有一个customRow。可以配置点击事件。 单元格的自定义分为两种方式。 一种是:通过tem
  • 表格单元格点击事件

    2021-12-17 09:50:23
    <el-table //单元格点击事件 @cell-click="weituocanhuil" //更改样式 :cell-style="cellStyle" v-if="flag" ref="dragTable2" :data="memberData"...
  • 使用表格给每一行添加操作按钮进行查看或者弹窗时,点击分页之后或者切换表格数据之后,点击事件不生效解决办法 $('#id').off("click").on('click', '.tanchuang', function () { console.log(123) }) 使用这种给...
  • 表格行监听(单击监听事件

    千次阅读 2020-08-19 16:11:35
    知识点:表格行监听(单击监听事件) 1、先渲染表格 获取表格数据 var tabFlight, tabFlightCabin, layerIndex = 0; var layer, layuiTable, layuiForm, laydate;//保存layui模块以便全局使用 $(document).ready...
  • // 表格中加入customRow属性并绑定一个custom方法 <a-table rowKey="stockOrderCode" :columns="columns" :dataSource="dataSource" :pagination="pagination" :customRow="customRow" > </a-table>...
  • elementUI table表格行添加点击事件

    千次阅读 2022-07-02 12:21:21
    elementUI table表格行添加点击事件
  • customFeedListColumns: [ { type: '...true } } }, params.row.name) ]) } }, { title: '用户', key: 'userName', align: 'center' }, { title: '生成时间', key: 'createTime', align: 'center' } ],//表格表头
  • 表格点击事件_事件响应函数

    千次阅读 2015-04-06 22:44:53
    // 在页面加载时为每个为每个DOM -> TR 对象绑定事件 trs[i].onmousedown = function() { tronmousedown(this); }; }; }; function tronmousedown(obj) { for (var o = 0; o ; o++) { if ...
  • 表格点击事件

    2019-01-03 19:00:00
    1、加载table需要同步加载,并在加载完后绑定点击事件,或者异步加载在方法内部绑 $.ajax({ url: '/xxx', type:'post', dataType:'json', async: false }).then(function (result) { i...
  • jquery给动态生成的 表格 绑定点击事件
  • el-table表格添加整行click事件
  • 1.单元格事件 function img...点击事件 $("#warnVideoTable").on("click-row.bs.table",function(e, row, $element){ //var index= $element.data('index'); setZoomAndCenter(15,row.longitude,row.latitude) })
  • js 事件小结 表格区别

    2020-12-11 05:30:39
    鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2|3|3.2|4Browser:IE4|N4|O 鼠标双击事件 onMouseDown HTML: 2|3|3.2|4Browser:IE4|N4|O 鼠标上的按钮被按下了 onMouseUp HTML: 2|3|3.2|4...
  • antd表格点击事件

    千次阅读 2020-03-31 11:07:01
    antd的表格可以复选框选中,那怎么点击表格行选中呢? 我们需要给table表格增加一个customRow属性 我们直接上代码了。。。。 <a-table :columns="columns" :dataSource="data" bordered :customRow="click" /...
  • Element表格单元格的几种点击事件

    千次阅读 2021-01-25 10:44:12
    1.cell-click 单元格触发事件 <template> <el-table :data="tableData" style="width: 100%" @cell-click="goclick"> <el-table-column prop="date" label="日期" width="180"> </el-table-...
  • 【js】js实现自定义表格点击事件

    千次阅读 2018-12-25 15:00:30
    2.前端创建表格并填充数据 a.html页面预留table: &lt;div class="blue-title mt"&gt; &lt;span class="fl"&gt;详细地址&lt;/span&gt; &lt;/div&gt; ...
  • <a-table :rowClassName=" (record, index) => (index % 2 === 1 ? 'table-striped' : null) " class="ant-table-striped" :columns="columns" ... :customRow="rowClick" //点击事件 }} &.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 97,578
精华内容 39,031
关键字:

表格点击事件

友情链接: diamond2.zip