如何点击数据行直接获取该行数据的ID

开发工具与关键技术：Visual Studio ASP.NET MVC

作者：刘剑鸿

撰写时间：2019年06月13日 星期四

                          如何点击数据行直接获取该行数据的ID

双击、单击某个表格的数据行，获取到该行的ID，然后对该数据行进行修改或删除。这操作在数据表格使用中式经常用到的。然而，一张数据表也许有很多行。怎么才精确地获取选中那行的数据？

第一种方法：

刚开始。我们先学习在每一行上定义一个按钮。如下图：

在每行里设置了一个自定义按钮，就可以通过点击获取到该行的数据。至于怎么在表格里面加按钮，方法很简单只要通过templet属性。Templet的属性值是回调方法，通过该方法把所需的ID回调出来。然后通过该ID值去做想要的操作。下面是具体代码：

Templet也是放在cols表头这里，

{ title: '操作',templet: setOperate, width: 148, align: 'center', fixed: 'right' }

这里是setOperate方法，也是自定义模板。

function setOperate(data) {

var PatientID = data.PatientID;

var btns = "";

    btns += '<button type="button"class="layui-btn layui-btn-xs" onclick=openUpdate(' + PatientID + ')>查看</button>';

        return btns;

    }

这里的获取出来的PatientID就可以在本视图到处使用了。

例如：通过点击“查看”按钮，本行数据就会跳到另一个页面显示，不在本视图页面显示。如下方法：

function openUpdate(PatientID) {

  var ckdata = layuiTable.checkStatus('tabPatients').data; //获取选中的数据  

 if (ckdata.length > 0) {

 layer.confirm("确定要选择的数据吗？", { icon: 6, offset:
 '100px;' }, function (index) {

        layer.close(index);                  

        window.location.href = "/OutpatientRegistration/PatientsManagement/PatientsManagement?patientID=" + PatientID;

            });

        }

        else {

                layer.alert("请选择数据", { icon: 6, offset:'100px;' });

            }

    }

本方法主要是放送PatientID这个参数到PatientsManagement该视图上使用。

那么，

第二种方法：

那么，如何在不设置按钮的情况下获取到该行数据的ID？

首先，封装好该方法。具体代码如下：

function doMore() {

 var checkStatus = layuiTable.checkStatus('tabAlrRegistration'); //获取选中checkbox

        if (checkStatus.data.length > 0) {

            var strIds = '';

            //获取到RegistrationChargeIDs，该行的ID。

            for (var i = 0; i < checkStatus.data.length; i++) {

                strIds += checkStatus.data[i].RegistrationChargeIDs;
            }
 layer.confirm("确定要选择的数据吗？", { icon: 6, offset: '100px;' }, function (index) {

     layer.close(index);

    window.location.href "/Outpatient/Outpatient/OutpatientRegistration?RegistrationChargeID=" + strIds;

            })

        }

        else {

            layer.alert("请选择要打印的数据", { icon: 0 });

        }

    }

设置好封装方法后，把该方法放在点击行事件里面。

  layuiTable.on('rowDouble(tabAlrRegistration)', function (obj) {

                var data = obj.data;

                obj.tr.find('div.layui-unselect.layui-form-checkbox')[0].click();

                doMore();

            });

rowDouble是双击事件，row是单击事件。点击事件要注意的是：必须要在cols设置{ type: ‘checkbox’}。