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单选框并滚动到该行的实现代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。