Layui表格选中指定行的radio单选框并滚动到该行的实现代码
发布时间：2020-07-17 14:35:36 作者：麦叶 
我要评论
我要评论这篇文章主要介绍了Layui表格选中指定行的radio单选框并滚动到该行,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
layui table有多行数据，通过外部输入内容，需要定位到指定行，选中改行，对改行进行操作。
实现效果：
HTML代码：
<body>
<div class="layui-fluid">
<input type="text" id="txt_id" />
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="SetChecked">设置选中行</button>
</div>
</script>
</div>
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="layui/layui.all.js"></script>
<script src="lib/AjaxCommon.js"></script>
<script>
layui.use('table', function () {
var table = layui.table; 19 20 ajaxSend(false, 'http://data.app.local/api/test/hello', '', function (res) { 21 if (res != '') { 22 console.log(res) 23 table.render({ 24 elem: '#test' 25 , height: 'full-50' 26 , limit: Number.MAX_VALUE 27 , data: res.data 28 , toolbar: '#toolbarDemo' 29 , cols: [[ 30 { type: 'radio' } 31 , { field: 'Id', width: '50%', title: 'ID', sort: true } 32 , { field: 'Name', width: '50%', title: 'Name', sort: true } 33 ]] 34 , page: false 35 }); 36 } 37 },'get'); 38 39 //头工具栏事件 40 table.on('toolbar(test)', function (obj) { 41 var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态 42 switch (obj.event) { 43 case 'getCheckData'://获取选中行数据 44 var data = checkStatus.data; 45 layer.alert(JSON.stringify(data)); 46 break; 47 case 'SetChecked'://设置指定行 48 var id = $("#txt_id").val(); 49 var tabledata = table.cache["test"]; //获取现有数据 50 console.log(tabledata) 51 var index = 0; 52 for (var i = 0; i < tabledata.length; i++) { 53 if (tabledata[i].Id == id) { 54 tabledata[i].LAY_CHECKED = true; 55 index = i; 56 } 57 else { 58 tabledata[i].LAY_CHECKED = false; 59 } 60 } 61 table.reload("test", { 62 data: tabledata, 63 }) 64 //滚动到指定行 65 var cellHtml = $(".layui-table-main").find("tr[data-index=" + index + "]"); 66 var cellTop = cellHtml.offset().top; 67 $(".layui-table-main").scrollTop(cellTop - 160); 68 break; 69 }; 70 }); 71 }); 72 </script> 73 </body>
后台代码：
public class LayUITableEntity
{
public string code
{
get;
set;
}
public string msg
{
get;
set;
}
public string count
{
get;
set;
}
public object data
{
get;
set;
}
}
public class TestEntity
{
/// <summary>
/// 这个字段用来标识radio是否选中
/// </summary>
public bool LAY_CHECKED
{
get; set;
}
= false;
public string Id
{
get;
set;
}
public string Name
{
get; set;
}
}
[Route("/api/test")]
public class TestController : ServiceController
{
[RouteHttpGet("hello")]
public FormiumResponse HelloNanUI(FormiumRequest request)
{
List<TestEntity> teList = new List<TestEntity>();
for (int i = 1; i <= 30; i++)
{
TestEntity te = new TestEntity()
{
//初次载入，id为3的选中
LAY_CHECKED = i == 3 ? true : false,
Id = i.ToString(),
Name = "name" + i.ToString() 32
};
teList.Add(te);
}
LayUITableEntity layUITableEntity = new LayUITableEntity()
{
code = "0",
count = teList.Count().ToString(),
msg = "",
data = teList
};
return Json(layUITableEntity);
}
}
到此这篇关于Layui表格选中指定行的radio单选框并滚动到该行的实现代码的文章就介绍到这了,更多相关Layui表格选中radio单选框滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- HTML表格用于在网页上展示数据,通过标签及其相关标签来创建,表格由行和列组成,每一行包含一个或多个单元格,单元格可以包含文本、图像、链接等元素,本文将详细介绍HTML表格2025-03-12
- 本文介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点，感兴2025-02-24
在 Web 开发中，文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧，我们可以创造出许多独特的效果，例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空2024-11-17
在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码2024-09-25- 在HTML中,可以通过设置CSS的resize属性为none,来禁止用户手动拖动文本域（textarea）的大小,这种方法简单有效,适用于大多数现代浏览器,但需要在老旧浏览器中进行测试以确保2024-09-25
本文详细介绍了如何利用HTML和CSS实现多种风格的进度条,包括基础的水平进度条、环形进度条以及球形进度条等,还探讨了如何通过动画增强视觉效果,内容涵盖了使用HTML原生标签2024-09-19- Canvas 提供了一套强大的 2D 绘图 API，适用于各种图形绘制、图像处理和动画制作,可以帮助你创建复杂且高效的网页图形应用，这篇文章主要介绍了HTML中Canvas关键知识点总结2024-06-03
本文主要介绍了html table+css实现可编辑表格的示例代码，主要使用HTML5的contenteditable属性，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习2024-03-06
本文主要介绍了HTML中使用Flex布局实现双行夹批效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2024-02-22
在网站开发中，登录页面是必不可少的一部分，本文就来介绍一下HTML+CSS实现登录切换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需2024-02-02
最新评论