小李飞刀资源网 Design By www.iooab.com
layui table有多行数据,通过外部输入内容,需要定位到指定行,选中改行,对改行进行操作。
实现效果:
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">获取选中行数据</button> <button class="layui-btn layui-btn-sm" lay-event="SetChecked">设置选中行</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); //获取选中行状态 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>
后台代码:
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> /// 这个字段用来标识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); } }
标签:
layui,选中单选框radio
小李飞刀资源网 Design By www.iooab.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
小李飞刀资源网 Design By www.iooab.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]