html 整行选择状态,Layui表格选中指定行的radio单选框并滚动到该行的实现代码
layui table有多行数据,通过外部输入内容,需要定位到指定行,选中改行,对改行进行操作。
实现效果:
HTML代码:
获取选中行数据
设置选中行
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 73
后台代码:
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
{
///
/// 这个字段用来标识radio是否选中
///
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 teList = new List();
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 整行选择状态,Layui表格选中指定行的radio单选框并滚动到该行的实现代码相关推荐
- bootstrap表格 行编辑状态_JS表格组件BootstrapTable行内编辑解决方案x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
- html关于radio单选框之选中
前言 描述:最近遇到在做单选框控件,遇到了一个关于单选框选中的bug. 初始化单选框控件时,所用的代码如下: $("input:radio:first").attr('checke ...
- layui单选框verify_layui 实现自动选择radio单选框(checked)的方法
HTML表单: 消息通知 JS用ajax去后端取回数据: $.get( "{:url('user/xxxx')}", {'id':adminId}, function(d){ // ...
- 单选框加了css后显示不出来,layui radio 单选框 效果 显示不来 解决方法
$("input[name=sex][value=女]").attr("checked", data.data.adminInfoEntity.adminInf ...
- radio单选框的选中与取消(超详细讲解!)
一.前情提要 刚开始想做的效果是这样:我操作了checkbox复选框,radio单选框的状态会随之变化.进而引出一系列问题,如:1.radio单选框选中了如何取消,取消了如何再选中:2.当checkb ...
- 102.1 html radio单选框默认选中
html radio单选框默认选中 '<input type="radio" name="os" value="0">IOS', ...
- jquery 获取或设置radio单选框选中值的方法
jquery 获取或设置radio单选框选中值的代码 1.获取选中值,三种方法都可以: 2.设置第一个Radio为选中值: 3.设置最后一个Radio为选中值: 4.根据索引值设置任意一个radio为 ...
- bootstrap表格 行编辑状态_JS组件系列——BootstrapTable 行内编辑解决方案:x-editable...
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
- ElementUI表格选中多行改背景颜色
设置:row-class-name="tableRowClassName" <div class="table"> <el-tableref ...
最新文章
- gitLab创建自己的私有库
- centos pureftpd mysql_使用PureFTPd和MySQL的虚拟主机(包括配额和带宽管理)在CentOS 6.2上...
- Pytorch之GPU加速计算问题以及model=model.to(device)
- 文件、格式-【Cocos2D-X 】初窥门径(10)解决中文乱码-by小雨
- 学习Docker容器时,错误bash: ping: command not found的解决方法
- iptables 开放远程_远程FX正式上市 指导价11.99万-12.99万元_搜狐汽车
- PID:我应该何时计算积分项?
- 敏捷开发用户故事系列之四:优先级排序
- 使用tornado让你的请求异步非阻塞
- sql 导入excel 遇到问题
- 百度输入法黑莓版更新至1.0.1.7
- 小游戏策划案例精选_小游戏策划方案.docx
- c语言延时程序 ms us,C语言延时程序(ms,us)
- bedtools subtract 基因区段取差集
- Word2vec And Doc2vec - 文本向量化
- JS调用window系统通知
- Golang 期权 指标计算
- 博学谷python_2020年最新博学谷Python基础班,资源教程下载
- 2021年登高架设考试及登高架设考试题
- rogabet notepad 1.5