layui table有几行数据信息 ,根据外界键入內容 ,必须精准定位到特定行,选中改行,对改行开展实际操作。

完成实际效果:

Layui表格选中指定行的radio单选框并滚动到该行的实现代码 radio 单选框 选中 layui HTML/Xhtml  第1张

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单选框并翻转到这家银行的完成编码的文章内容就详细介绍到这了,大量有关Layui报表选中radio单选框翻转內容请搜索之前的文章内容或再次访问下边的类似文章,期待大伙儿之后多多的适用!