Layui表格選中指定行的radio單選框並滾動到該行

時間 2020-07-18

標籤 layui 表格選中指定行的 radio 單選滾動简体版

原文原文鏈接

layui table有多行數據，經過外部輸入內容，須要定位到指定行，選中改行，對改行進行操做。html

實現效果：jquery

HTML代碼：ajax

 1 <body>
 2     <div class="layui-fluid">
 3         <input type="text" id="txt_id" />
 4         <table class="layui-hide" id="test" lay-filter="test"></table>
 5         <script type="text/html" id="toolbarDemo">
 6             <div class="layui-btn-container">
 7                 <button class="layui-btn layui-btn-sm" lay-event="getCheckData">獲取選中行數據</button>
 8                 <button class="layui-btn layui-btn-sm" lay-event="SetChecked">設置選中行</button>
 9             </div>
10         </script>
11  
12     </div>
13     <script src="lib/jquery-1.9.1.min.js"></script>
14     <script src="layui/layui.all.js"></script>
15     <script src="lib/AjaxCommon.js"></script>
16     <script>
17         layui.use('table', function () {
18             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>

後臺代碼：api

 1 public class LayUITableEntity
 2  { 3 public string code { get; set; } 4 public string msg { get; set; } 5 public string count { get; set; } 6 public object data { get; set; } 7  } 8 public class TestEntity 9  { 10 /// <summary> 11 /// 這個字段用來標識radio是否選中 12 /// </summary> 13 public bool LAY_CHECKED { get; set; } = false; 14 public string Id { get; set; } 15 public string Name { get; set; } 16  } 17 [Route("/api/test")] 18 public class TestController : ServiceController 19  { 20 [RouteHttpGet("hello")] 21 public FormiumResponse HelloNanUI(FormiumRequest request) 22  { 23 List<TestEntity> teList = new List<TestEntity>(); 24 for (int i = 1; i <= 30; i++) 25  { 26 TestEntity te = new TestEntity() 27  { 28 //初次載入，id爲3的選中 29 LAY_CHECKED = i == 3 ? true : false, 30 Id = i.ToString(), 31 Name = "name" + i.ToString() 32  }; 33  teList.Add(te); 34  } 35 LayUITableEntity layUITableEntity = new LayUITableEntity() 36  { 37 code = "0", 38 count = teList.Count().ToString(), 39 msg = "", 40 data = teList 41  }; 42 return Json(layUITableEntity); 43  } 44 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。