layui table有多行數(shù)據(jù)，通過(guò)外部輸入內(nèi)容，需要定位到指定行，選中改行，對(duì)改行進(jìn)行操作。
實(shí)現(xiàn)效果：
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">獲取選中行數(shù)據(jù)</button>
<button class="layui-btn layui-btn-sm" lay-event="SetChecked">設(shè)置選中行</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); //獲取選中行狀態(tài) 42 switch (obj.event) { 43 case 'getCheckData'://獲取選中行數(shù)據(jù) 44 var data = checkStatus.data; 45 layer.alert(JSON.stringify(data)); 46 break; 47 case 'SetChecked'://設(shè)置指定行 48 var id = $("#txt_id").val(); 49 var tabledata = table.cache["test"]; //獲取現(xiàn)有數(shù)據(jù) 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 //滾動(dòng)到指定行 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>
后臺(tái)代碼：
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>
/// 這個(gè)字段用來(lái)標(biāo)識(shí)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);
}
}
到此這篇關(guān)于Layui表格選中指定行的radio單選框并滾動(dòng)到該行的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)Layui表格選中radio單選框滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
標(biāo)簽：上海 內(nèi)蒙古 清遠(yuǎn) 吳忠 陜西 廣安 保定 山南
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《Layui表格選中指定行的radio單選框并滾動(dòng)到該行的實(shí)現(xiàn)代碼》，本文關(guān)鍵詞 Layui,表格,選中,指定,行的,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
