Layui table selects the radio button of the specified row and scrolls to the implementation code of the row

The layui table has multiple rows of data. Through external input content, you need to locate the specified row, select the row to change, and perform operations on the row.

Result:

HTML code:

<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">Get the selected row data</button>
                 <button class="layui-btn layui-btn-sm" lay-event="SetChecked">Set the selected row</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 () {
             : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

Background code:

 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>
  /// This field is used to indicate whether the radio is selected. /// </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() 
    { 
     //First time loading, the layer with id 3 is selected 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); 
    } 
    }

This is the end of this article about the implementation code of selecting the radio button in the specified row of the Layui table and scrolling to the row. For more relevant Layui table selected radio button scrolling content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Solution for front-end browser font size less than 12px

>>: Detailed explanation of several clever applications of position:sticky sticky positioning