layui table有多行數據，通過外部輸入內容，需要定位到指定行，選中改行，對改行進行操作。 實現效果： HTML代碼： 1 <body> 2 <div class="layui-fluid"> 3 <input type="text" id="txt_id" /> 4 <table class ...
layui table有多行數據，通過外部輸入內容，需要定位到指定行，選中改行，對改行進行操作。
實現效果：
HTML代碼：
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>
後臺代碼：
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 }
