Layui表格选中指定行的radio单选框并滚动到该行

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;

            ajaxSend(false, 'http://data.app.local/api/test/hello', '', function (res) {
                if (res != '') {
                    console.log(res)
                    table.render({
                        elem: '#test'
                        , height: 'full-50'
                        , limit: Number.MAX_VALUE
                        , data: res.data
                        , toolbar: '#toolbarDemo'
                        , cols: [[
                            { type: 'radio' }
                            , { field: 'Id', width: '50%', title: 'ID', sort: true }
                            , { field: 'Name', width: '50%', title: 'Name', sort: true }
                        ]]
                        , page: false
                    });
                }
            },'get');

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
                switch (obj.event) {
                    case 'getCheckData'://获取选中行数据
                        var data = checkStatus.data;  
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'SetChecked'://设置指定行
                        var id = $("#txt_id").val();
                        var tabledata = table.cache["test"]; //获取现有数据
                        console.log(tabledata)
                        var index = 0;
                        for (var i = 0; i < tabledata.length; i++) {
                            if (tabledata[i].Id == id) {
                                tabledata[i].LAY_CHECKED = true;
                                index = i;
                            }
                            else {
                                tabledata[i].LAY_CHECKED = false;
                            }
                        }
                        table.reload("test", {
                            data: tabledata,
                        })
                        //滚动到指定行
                        var cellHtml = $(".layui-table-main").find("tr[data-index=" + index + "]");
                        var cellTop = cellHtml.offset().top;
                        $(".layui-table-main").scrollTop(cellTop - 160);
                        break;
                };
            });
        });
    </script>
</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()
                };
                teList.Add(te);
            }
            LayUITableEntity layUITableEntity = new LayUITableEntity()
            {
                code = "0",
                count = teList.Count().ToString(),
                msg = "",
                data = teList
            };
            return Json(layUITableEntity);
        }
    }

实现效果:

微信扫码订阅
UP更新不错过~
关注
  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 4

打赏作者

杀马特丶蛮牛

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值